Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 10
  • Help

Breadcrumb

  1. Home
  2. Drupal 10
  3. Content

Formatting Content

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).

Book traversal links for Formatting Content

  • Events: Repeating dates
  • Up
  • Links to Webpages and Files
  • Content
    • Removing Formatting from Copied & Pasted Content
    • Adding Content (Nodes)
    • CKEditor 5 Editing Toolbar Changes
    • Changing Authoring information - Drupal 9
    • Editing Existing Content (Nodes) on Your Website
    • Events: Repeating dates
    • Formatting Content
    • Links to Webpages and Files
    • Making content sticky
    • Using Editoria11y
  • Layout Builder
  • Managing Media & Files
  • Media Library
  • Revisions
  • Webforms
  • Webinars

Tags

accordion 1
account 2
anchors 1
blocks
cache 1
carousel 2
CKEditor 5
configuration 1
content types 1
CSS 1
disable rich-text 1
Drupal 10 15
Drupal 9 16
email 2
embed code 1
Entity Registration 5
events 6
file browser 1
files 4
files media 1
folders 1
formatting 2
front page 3
Google Analytics 1
headings 2
HTML 1
iframe 2
images 4
imce 1
Layout Builder 3
link a pdf 1
links 5
login 1
media 2
menus 3
nodes 1
openid 1
paste as plain text 1
paths 4
performance 1
photo albums 1
photo galleries 1
redirects 3
registration 5
remove format 1
repeat dates 2
reports 1
revisions 1
sidebars
site name 1
slogan 1
source 1
sticky 2
text formats 1
themes 1
toolbar 2
URL aliases 4
Webform 2
widget 1