Format Text With the HTML Editor
About Fonts
The HTML Editor works similarly to a word processing program, with built-in tools for formatting text, creating headers, and adding bullets, numbered lists, horizontal lines, subscripts, superscripts, and more. This page describes the font tools.
Note
If you paste the text into the HTML Editor, choose the option to remove formatting. Then, use the built-in tools to format your content. This will prevent formatting problems and facilitate screen readers (opens in new tab).
Note
We recommend using the default font style and size. This ensures that users with visual impairments can customize their fonts, including using OpenDyslexic and Huge font types. For instructions on customizing fonts, visit the Account Settings help page.
Add Headers
Headers do double duty. They add formatting, and they provide an index for screen readers. With headers, visually-impaired people do not have to start at the top and read through all of the text every time they want to access something on a page.
Note
Headers hierarchically organize content. Think about the organization of a book: Header 1 would be the book title; header 2 would be a chapter title; header 3 would be a section; header 4 would be a sub-section; and “paragraph” would be the book text.
Step 1
Select anywhere on the line of text you wish to format.
Step 2
Select the Actions Menu icon to the right of Paragraph to open it.
Step 3
Select the appropriate level of heading.
Step 4
When you are finished, use the Publish (or Update) button to save your work.
Note
To remove a heading, follow the same steps but select the Paragraph option from the menu itself.
Add Bold Type, Italics, or Underlines
When it comes to adding bold, italics, and underlines, the HTML editor works similarly to a word processing program.
Step 1
Highlight the text you wish to format.
Step 2
Select the button(s) to bold, italicize, and/or underline your text.
Note
You can alternatively use shortcut keys (Ctrl+B, Ctrl+I, Ctrl+U).
Step 3
When you are finished, use the Publish (or Update) button to save your work.
Add Strikethrough, Subscript, or Superscript
Step 1
Highlight the text you wish to format.
Step 2
Select the text formatting Actions Menu icon to the right of the Underline button.
Step 3
Select the option you want from the menu.
Step 4
When you are finished, select the Publish (or Update) button to save your work.
Add A Symbol
The Other Insert Options Menu icon allows you to embed special characters and symbols into your text, as well as use Emojis.
Note
Mathematical equations and characters are inserted using a different HTML Editor tool. Learn more by visiting the Math and Scientific Expressions help page.
Step 1
Place your cursor where you want to insert the symbol or emoji.
Step 2
Select the Other Insert Options menu icon and select Symbols or Emoji.
Step 3
In the Symbols or Emoji box, select the symbol / emoji you want to insert.
Step 4
When you are finished, select the Publish (or Update) button to save your work.
Change Font Color
Step 1
Select the text you wish to change.
Step 2
Select the Font color tool to open the menu of options.
Step 3
Select the color you wish to use.
Step 4
Use the slider to change the contrast.
Step 5
Make sure you see a green checkmark next to both the Large Text and Small Text boxes (unless you are only using large text). If you see a "cross" icon, your text might be illegible or invisible to some users. See Screenshot in Step 4.
Step 6
Select the Save button.
Step 7
When you are finished, select the Publish (or Update) button to save your work.
Add Accessible Tables
Note
When it comes to tables, simpler is better.
To ensure that your table is accessible for your students, proceed in this order:
Step 1
Select the Table Button and select Insert Table.
Step 2
Highlight the number of cells you would like in your table.
Step 3
Select the last cell to insert your table.
Step 4
To add content, select inside of an empty cell.
Note
Because the cells are collapsed, it can be difficult to navigate an empty table. The easiest way to move around your table is to use your keyboard. The Tab key will move you to the next cell. Arrow keys will move you in any direction.
Step 5
Add your content.
Note
The table will resize to fit your content.
Step 6
To format your headers, select the cell you wish to format.
Important
These formatting steps are critical. Do not skip them! Without header rows/columns, tables are not accessible ways of presenting information.
Step 7
Select the Table Icon.
Step 8
Select Cell.
Step 9
Select Cell Properties from the list.
Step 10
For Cell Type select Header cell.
Step 11
For Scope, select:
- Row (if you have one header per row).
- Column (if you have one header per column).
- Row Group (if you have row headers nested under this header).
- Column Group (if you have column headers nested under this header).
Step 12
Repeat this process for every column and row header in your table.
Note
The cell will be formatted for you. Do not add bolding, underlines, or other aesthetic elements to make your headers stand out unless there is a compelling reason to do so.