CKEditor
Most content types include at least one field on the editing form with a large box for entering multiple paragraphs of formatted text. In most cases, this large box will have a toolbar at the top with formatting buttons. The toolbar we are using is called CKEditor. (“CK” stands for “Content and Knowledge.”)
The CKEditor toolbar can be configured with many different buttons. Buttons have been preselected to provide appropriate formatting options for your website. Some buttons have been omitted intentionally to help avoid common usability problems. The buttons on the CKEditor toolbar format your text by modifying the HTML code that will display it. You can see the HTML code by clicking the Source button. (Click Source a second time to toggle back to the formatted display.)
If the formatting option you require is not available on the CKEditor toolbar, you may need to add HTML tags or CSS rules to the HTML code. Related: Overriding Sitewide Theme Styling.
Formatting Text with CKEditor
Some formatting can be applied to text letter-by-letter (e.g. bold, italic, links); other formatting affects whole paragraphs. A paragraph in CKEditor is any text that ends with a hard return (you insert a hard return anytime you press the Enter key). Some examples of formatting that applies to whole paragraphs:
- Align text left/right
- Unordered/ordered lists
- Indent/outdent
- Normal text/Headings (found under the Format drop-down menu)
Paragraph Line Spacing
Paragraphs have an extra margin of space separating them from other text to improve readability.
- Use the Enter key to start a new paragraph (aka hard return).
- Use Shift + Enter to insert a line break within the current paragraph (aka soft return). Line breaks do not add extra space between lines.
Format Text for Readability
- Organize your text with Headings and lists (unordered (bulleted) or ordered (numbered)).
- Text should not be in all caps, all bold, all italics, or all Headings.
- Avoid mixing fonts or adding colored text.
- For emphasis, use bold, italics, or one of the heading styles.
- Color should not be used as the only indication of emphasis (particularly red or green).
- Underlining should never be used to emphasize text – people confuse it for a link.
Use Headings
Headings are options available in the Format menu (listed as Heading 2, Heading 3, etc.). Use the heading styles for headlines and to title sub-sections in the body of each page. Type the headline, highlight it, and select “Heading 2,” “Heading 3,” etc. from the menu.
- Each page should have one and only one Heading 1. This will be automatically applied to the main title of the page.
- Like an outline, headings should be nested to convey the structure of the page. Each Heading 2 should be a sub-point of Heading 1, each Heading 3 should be sub-point of Heading 2, etc. In other words, you should not put a Heading 3 on the page unless there is a Heading 2 appearing somewhere before it.
Why It’s Important to Use Headings
When a piece of text is formatted as a heading, it changes in two ways:
- It becomes bigger/bolder than normal text.
- Structural information is added to the code of the page to indicate that the text is a heading.
The extra “structural” information that is added to the code is not visible in the formatted view, but it is important because:
- Search engines can use it to identify keywords that sum up what the page is about.
- Screen readers can use it to help visually impaired users identify the main sections of the page (sort of a table of contents for the page).