Using The Text/HTML Editor: Atto

Making Links Accessible in Moodle
Troubleshooting: Inconsistent Text Formatting
Home > Welcome to Moodle > Editing Capabilities in Moodle > Using The Text/HTML Editor: Atto

The text editor (sometimes referred to as the ‘HTML editor’ or even ‘Atto’) has many icons to assist the user in entering content. Many of these icons and functions should be familiar to anyone who uses a word processor. Some examples of where you will see the text editor include editing section headings, describing an activity, writing an answer to a quiz question or editing the content of many blocks.

From Moodle.org Read More about the Atto Text editor

NOTE: When in doubt of what a tool does hover your mouse over it–if you hold still, a tool-tip will pop-up with informative text!

A huge part of using the text editor is text. Without this tool no formatting could be easily applied by anyone except those with HTML and CSS knowledge. The buttons available on our Atto HTML editor have been arranged in order based on a mixture of frequency and accessibility.

Basic

Basic Text Editing Tools

The first set of buttons on the Atto text editor are the bare bones for formatting text content and should be used where applicable as they are key to content being accessible to a screen-reader and to ensure a consistent look for your course content. Use them to break up and identify information.

You should use these three buttons the most often when creating content for your courses.

Paragraph Styles

This drop-down allows you to change the way your Moodle course theme deals with a block of text. Paragraph is the default, but a number of headings and other formats can also be applied to break up or identify content so it’s easier to follow on a web site.

Appearance:
Unordered List

Created a bulleted list from scratch or apply it to existing lines of selected text.

Appearance:
  • First Item
  • Second Item
    • Second Item’s First Child Item
  • Third Item
Ordered List

Create a numbered list from scratch or apply it to existing lines of selected text.

Appearance:
  1. First Item
  2. Second Item
    1. Second Item’s First Child Item
  3. Third Item

Multimedia

Multimedia (Images, Audio, Video, and Interactive Media)

The third set of buttons in the Atto text editor, these let you include other kinds of media like images, audio, video, and interactive content in your Moodle content.

Image

Insert a new picture from another location on the web or your own computer.

Some images are very large and will take a long time to upload and view.

  1. Click into the location you want your image placed.
    NOTE: if you want text to wrap around the image to any degree click what you want the TOP of the image to align with
  2. Click the Image icon button
  3. Click the Browse repositories… button
  4. From the File Picker choose the image you want to upload–most often it will be Upload a file and from there you can browse for the image you wish to use from your computer
  5. Provide a description for your image. If it isn’t a vital piece of content, you can check the Description not necessary button. See the Applying Alt Text To Images In Moodle article for help making your image ADA accessible.
  6. Depending on how you want text to move around the image set your Alignment:
    • Left or Right will have text wrap AROUND the image.
    • Top, Middle and Bottom will place the image as part of the line of text and will center the image or text (whichever is smaller) according to your choice.
  7. Click the Save image button to view your handiwork in the context of your content.

You can dictate the size of your image to make an image appear a little smaller.

  • It is strongly recommended you check the Auto size check-box to avoid distorting the image
  • It is not recommended that you upload a BIG image and make it substantially smaller as that can take a LONG time for students to load. You can use the picresize.com to quickly make any image smaller for the web.
Appearance:
Record Audio

Insert a audio player with a recording of up to 5 minutes in length can be included, inline with any other content present. Video can only be recorded from computer’s microphone (if present) at this time.

Appearance:

You will be able to preview your recording before you attach it to your content. An interactive player will appear inline with any other content (if present).

Record Video

Insert a video player with a recording of up to 5 minutes in length can be included, inline with any other content present. Video can only be recorded from webcam (if present) at this time screen-recording will need to be done with alternative options like Zoom or Kaltura.

Appearance:

You will be able to preview your recording before you attach it to your content. An interactive player will appear inline with any other content (if present).

Insert or edit an audio/video file

To embed audio or video multimedia from another site alongside content created on Moodle you can point to a link to the video’s page and let Moodle do the rest for you.

Entering the URL to a YouTube page (no special embed code or share link needed) will allow Moodle to auto-detect there’s a video present and will embed that video into your content. Entering the URL into the Link or Video tab will still result in an embedded video, use of the Video tab will provide extra control over the Display options of the video to make it appear larger or have a title better suited for your material.

If you’re worried about compatibility you can also opt to Add alternative source so that if your first choice of video host fails there are backups in different places or file types!

NOTE: Make sure you double-check the content after saving your changes to ensure it works and appears as you expect it to!

Appearance:

The Insert media window will pop up with a Link, Video, and Audio tab, each with unique controls for the respective media type you’re trying to share.

Embed Kaltura Media
Kaltura Icon Button

With the Embed Kaltura Media button students and faculty both are able to upload or record videos and post them on Moodle through an integration.

You can upload new content like a video file or record your own video on the spot with the + Add New button.

There may be some preexisting materials too, explore the My Media and Media Galleries tabs for videos associated with your Moodle account or a given Moodle course to reuse those assets.

Appearance:

Once you’ve found or uploaded the desired video you just need to click the associated </> Embed button to add the video player into your Moodle content.

Insert H5P (Interactive Media)

H5P is an open source interactive media tool. This button allows you to embed per-existing H5P content (created on other sites like WordPress or LMS).

H5P content can be added inlineto any Atto text area (though it will not and CANNOT be connected to the gradebook or created from scratch unless you add it as an Activity to your Moodle course).

Appearance:

H5P content will vary drastically in appearance based on the type of content created/imported but can range from a flash cards, an interactive time-line, an accordion for written content and more.

Content created by others but made available for your own use will have a Reuse or Embed link in the bottom-left corner of the activity window.

Accessibility

Accessibility (for content-creators and students!)

The fourth set of buttons in the Atto text editor, these tools to help make both your content and your experience creating that content with the Atto Text Editor more accessible.

Accessibility Checker

Like any automated system this isn’t perfect and may both miss things and identify issues that aren’t present. The Accessibility checker button will review content in the Atto text editor and try to identify issues such as:

  • Images with missing or empty alt text (unless they have the presentation role)
  • Contrast of font colour and background colour meets WCAG AA guidelines
  • Long blocks of text are sufficiently broken up into headings
  • All tables require captions
  • Tables should not contain merged cells as they are difficult to navigate with screen readers
  • All tables should contain row or column headers

List from Moodle.org Read More about the Accessibility Checker

Appearance:

A pop up window the the Accessibility checker will appear with an explanation of what it detects and a numbered list of lines and/or HTML items it identifies potential trouble with.

Screen Reader Helper

The screenreader helper tool is helpful in that it allows you to look at your content more like how someone using a screenreader would experience it. The tool will look for content that you have highlighted with your cursor or whatever line the editor is actively on.

  • Links are listed for navigation and thus without surrounding context and identifies that a link that simply says “Click here” is nearly meaningless (consider using the name of an article or it’s purpose/action for the link instead!).
  • Images are reduced to their Description or “Alt text” (if present) and so you’re able to see how these assets would function to provide the student that information or if some additional tweaking is needed to make them usable.
Appearance:

The Screenreader helper pop up window will display the type of HTML tag is being used (P for Paragraph, H3 for small Heading, OL for Ordered List, etc.) as well as how links and images both appear to a screenreader.

You can click on each linked item in the pop up to highlight it in the editor so that you can easily make the needed modifications.

Clear Formatting

Used to strip away rogue formatting to keep your content clean and accessible. Highlight the text in question and click the Clear formatting button.

For more detailed information on use of this tool see our Troubleshooting: Inconsistent Text Formatting article for instructions.

Appearance:
Paste Special

Paste content from your clipboard (Learn more about how to copy and pasting content) that contains formatting brought over from the original such as font size, color, or other information and paste simplified versions of that content (ideal for a more consistent look regarding course content)

Same as pressing Shift + Ctrl + v on your keyboard.

Appearance:
Toggle full-screen

Clicking this button will expand the Atto text editor to take up the entire browser window or tab to provide additional space to create or edit content without being squeezed by the nav drawer or blocks as well as hide potential distractions that might be caused by other Moodle controls.

To close the interface and return to the normal Editing page click the Toggle full-screen button a second time.

Emphasis

Text Formatting and Emphasis

The fifth set of buttons in the Atto text editor, bold, italic, underline, and strike-through are secondary formatting options used for different kinds of emphasis.

These tools are mostly ideal for sighted users trying to quickly scan a document and should not be used in place of headings. (You can apply them in addition to a heading, however, if you’d like to further emphasis that heading.)

Bold
Bold

Bolded text is meant to provide emphasis on text and can provide easier visual scanning for key words. This may also be referred to as adding weight to text.

Same as pressing Ctrl + b on your keyboard.

Appearance:

Bold text can help emphasize a remark, comment, or key words in text by darkening them and make them easier to spot.

Italic

Italicized text often has a specific meaning in addition to providing emphasis. According to Computer Hope some examples for when it’s appropriate to use italic text:

  • Use italic when you want to emphasize a word or phrase in a sentence.
  • When writing about the title of an album, book, magazine, movie, newspaper, podcast, speech, TV show, or work of art.
  • Italicize a word or phrase that is in a different language.

Same as pressing Ctrl + i on your keyboard

Appearance:

Italic will change the appearance of text to appear gently slanted to the right.

Underline

Text that has been underlined is commonly used to draw attention to to text but on the web common practice relies on underlined text to indicate an interactive link to another page or website.

NOTE: Use caution when using Underlined text, especially when pairing it with bright colors but especially shades of blue.

Same as pressing Ctrl + u on your keyboard

Appearance:

Text that has been underlined may be mistaken for links or hyperlinks to other parts of the internet but can add emphasis to text.

Strike-through

Applies strike through to selected text to indicate the removal of text or suggestions without outright deleting the content.

Appearance:

Strike-Through text will appear with a horizontal line through the middle of it as if it’s been crossed out.

Colors

Text Colors

Text Color

Applies the chosen or default color to selected text.

The available colors are:
  • First row: our CCC Brand colors
  • Second row: Original Atto colors (also available in Background Color)
  • Third, fourth & fifth rows: Colors that are NOT ambiguous to folks with color-blindness.

When in doubt, favor contrast and supplement colors with bold or italics so screen readers can also detect your emphasis or plainly state that you’ll be using font colors and what you’ll be using those colors for.

Appearance:

Text color is the digital equivalent of selecting a different colored pen such as from black ink to red ink.

Text Background Color

Applies the last chosen or default background color but may not be accessible to screen readers, if relying on background color for emphasis please plainly state that you’ll be using it and what you’ll be using it for.

Appearance:

Background color when applied to text is the digital equivalent of using a highlighter pen over other content.

Layout

Page & Paragraph Formatting (Layout)

Bootstrap Grid (Responsive Columns)

This is ideal for content, formatting, and display rather than tabular data the Bootstrap Grid will allow you to break content into columns to break up text or media content and reduce scrolling and wasted screen space.

After clicking the Bootstrap grid button you’ll get the options for column widths. After making your choice, the selected item will appear in the editing area with some filler text for you replace with your own content.

Appearance:

On a small screen the Bootstrap grid will break into separate pieces, one on top of another instead of side-by-side, making its content much more readable on things like smart phones.

Left align

Moves text to hug the left side of the content area.

Appearance:

Text begins in the top-left corner of the page and will start new lines to the left.

Center Align

Moves text to the center of the content area.

Appearance:

Text begins in the center of the page and will start new lines while trying to keep the shape of the text centered and symmetrical.

Right Align

Moves text to hug the right side of the content area.

Appearance:

Text begins in the top-right corner of the page and will start new lines to the right.

Outdent (Remove Indent)

Removes an existing indent where applicable.
When text or a list is indented this will reduce the indent or move it to the left one unit.

Indent

Used to move a block of text or a list item to the right. Often used to better add hierarchy to a document. This can also be applied to lists to create sub-lists.

Appearance:

This item is not indented.

This item is indented twice.

This item is indented once.

Horizontal Rule

This button will add a horizontal line that will automatically span the entire available content area (like a column or the whole page) providing a visual break in information of any sort.

This should be used instead of any number of hyphen/dash (-), underscore (_), or other characters as a screen reader will literally read the names of those characters one-at-a-time. (Example: “—–” would be read as “hyphen hyphen hyphen hyphen hyphen”)

Appearance:

Specialized

Specialized Formatting & Characters

These buttons are not likely to be used by most folks but are vital for some specialized fields like math, science, and some language courses.

Subscript

Subscript (text below baseline) is not as commonly used as superscript but still has it’s uses for chemical formulas and some mathematics.

Appearance:

Subscript text appears smaller in size and below the baseline of the surrounding text.

Superscript

Superscript (text above baseline) is commonly used to indicate exponents in math, the presence of footnotes in writing, and the charges of ions and subatomic particles in chemistry.

Appearance:

Superscript text appears smaller in size and above the baseline of the surrounding text.

Insert Character

Use this tool when you need a special character for foreign languages or other symbols not included in a basic keyboard layout without having to memorize the sequence of keys to otherwise type the character.

To add a special character:
  1. Click the location you want to place the special character
  2. Click the Insert Character button
  3. Click on the desired character’s button
Appearance:

A pop-up window displaying many available special characters to choose from will appear.

Equation Editor
Equation Editor

For adding formatted math equations for maximum clarity/ideal layout without having to draw them by hand, use the Equation Editor to convert TeX code to an automatically generated image that is accessible to a number of screen readers.

Appearance:

A popup window for the Equation editor will appear with multiple tabs at the top for different types of symbols: Operators, Arrows, Greek Symbols, and Advanced.
In the middle of the window that are buttons with the available symbols, and below that is the editable TeX interface to assemble the code.
At the bottom of the window a preview will appear of the generated TeX code as it will appear and the Save Equation button.

Insert/Edit Table

In the Atto text editor, tables are built for displaying information–not aesthetic purposes. If you have a graphical representation of data (i.e. a pie graph), consider also offering a table of the same data to help automated screen readers for ADA accessibility purposes.

A Caption on a table should describe the table’s data/relevance of the table to your other content.

Define headers on Columns will make the top row of your table the headings of a set of information.

Define headers on Rows will make the left-most column of your table the headings of a set of information.

Define headers on Both will set both the top and left-most rows as headings.

Appearance:

A pop-up window will appear asking for basic table settings like Caption, where to define headers, and the number of rows and columns needed.

Advanced

Advanced Editor Functionality

Advanced Editor Functionality

HTML

Sometimes you need to see the source code behind all the pretty content you’ve created. If you know any HTML this is how you would see the raw text behind the content of a resource or activity.

To embed a video from YouTube or similar use the Insert or edit an audio/video file button in the Multimedia section of this article.

Embedding another webpage in an iFrame

(This is not accessible for visually impaired students or those on small screens)
This will make sure the embedded page spans the whole area available, and will be 600 pixels tall so folks can see some of the content and scroll down the embedded page to read as needed.

  1. Locate the webpage you wish to embed into a Moodle resource (such as a page or a book’s chapter) and copy its URL
  2. Go back to Moodle and view the resource you wish to embed the page into; click the HTML button to convert the page to HTML
  3. Paste the URL into the content area.
  4. Copy and Paste the following BEFORE the URL (keeping it all on the same line): 
    <iframe src="
  5. Copy and Paste the following AFTER the URL (keeping it all on the same line): 
    " width="99%" height='600'></iframe>

    So your end result should look something like this:

    <iframe src="http://www.clackamas.edu/CollegeInformation/" width="99%" height='600'></iframe>
  6. Save your changes and check out the results.
Appearance:

The HTML view of the page will show you the markup code and tags that make the content look like they do to allow for fine tuning.

The Atto editor will attempt to color-code, indent, and number lines for HTML and CSS shown here automatically for easier editing by human eyes. It may also attempt to correct mistakes or remove potentially malicious code.

Manage Embedded Files

This interface allows you to interact with and remove files relevant to this resource or activity. If a file has been previously uploaded and removed from a page it can still be found here to re-reference, remove or modify–your choice.

You can also clean out unused files (they aren’t linked in the activity but do take up space) to keep your course’s footprint smaller.

Appearance:

The Manage Embedded files pop up window will list all files uploaded to this activity or resource regardless of if they are being used under Manage Files. Below that is the Unused file section where a list of those files that Moodle does not detect as being used in the content and should be safe for removal.

Import Word file

The Import Word file tool is experimental and may not be a perfect conversion.

This tool allows you to upload a Word document like .doc or .docx and Moodle will attempt to bring over that text, imaging, and basic formatting as it can from the file while allowing students to access the content in their browser and without third party software. This method is cleaner than copy/paste and supports images but may still miss some things, be sure to compare and adjust Moodle content against the source document.

View Related Articles
Troubleshooting: Inconsistent Text Formatting
Atto can get a little overzealous in applying formatting that is copied or dragged into the editor, especially in the Chrome Web Browser. This is most noticeable in f...
Continue Reading
Related Tags
ATTO (Text Editor) (11)Faculty Orientation Moodle (19)Import Content into Moodle (26)Moodle (LMS) (120)Most Common (51)Needs TLC (24)Overview Article (27)