webCOMAND

Rich Text Styles & Formatting

Rich Text Toolbar Styles & Formatting

By default, the Rich Text Editor offers a number of options for styling and formatting text.  Depending on where the text will ultimately end up, it may make sense to use some options and not others.  This page details the options and provides guidance on when and when not to use them.

Styles

The Styles drop-down is generally the recommended way to format text destined for the web and other digital productions.  The default styles include those commonly found in document and web pages.  However, the styles can be fully customized to options for your specific needs on projects where you are in control of global formatting, such as websites and documentation.

Developers and system administrators can customize Styles with Rich Text Settings.

Font Formatting

The font family, size, color and background color can be adjusted independently.  These options can be useful for one-off email, web and informal text.  However, they are generally not recommended for large and formal text because they can lead to inconsistencies and are difficult to reuse and change systematically in the future.

Emphasis Formatting

Bold (strong), italic (emphasis), underline, strike-through, subscript and superscript formatting can all be used to emphasis text in different ways, including in combination when appropriate.  While more subtle than Styles and Font Formatting, emphasis formatting is generally very well supported across most mediums and channels (especially bold, italic and underline), so they are recommended in most use cases.  It should be recognized that the styling may vary from one medium or channel to the next.

Clear Formatting (Rich Text Editor - Clear Formatting)

In addition to adding formatting, it is possible to remove formatting, which is especially useful after pasting rich text from another source, such as a Word document.

To remove formatting, select the formatted text and then click Clear Formatting in the toolbar.

Copy Formatting (Rich Text - Copy Formatting)

In some cases it is easier to copy one or more formats from existing rich text, removing the need to remember or reproduce the exact style(s) and format(s) applied to the source text.

To copy formatting, select the source text, or just place the typing cursor within the source text, click the Copy Formatting option in the toolbar, and then select the destination text.

In addition to the toolbar option, CTRL+SHIFT+C and CTRL+SHIFT+V can be used to copy and paste formatting, similar to CTRL+C and CTRL+V to copy and paste formatted text.

Paragraph Breaks (ENTER) vs Line Breaks (CTRL+ENTER)

Sometimes it is useful to force a line break, within a paragraph.  Use CTRL+ENTER on your keyboard to add a single line break within a paragraph.  This will ensure text will begin on a new line, but without adding the additional margin that is applied before and after a new paragraph.

Press ENTER on your keyboard to add a new paragraph, with the associated margin before and after adjacent paragraphs.

Best Practices

Creating content destined for multiple, non-traditional mediums and channels like the web, social media and online documentation has unique considerations, especially when content is part of a greater production, such as a website.  In particular, this means you need to be concerned with:

  • Consistency - Formatting should be systemized as much as possible, so that all pages of a larger production share consistent styles and formatting.
  • Reusability - It should be easy to customize the same content per channel and design, and for future redesigns.
  • Changability - It should be easy to change the resulting content based on rules, either as it is published, or in some cases by updating the source content itself.

It can be a challenge to address the goals above, while still giving the desired attention to a specific target destination.  The following tips and best practices aim to help you find the right balance.

Styles (good) vs Font Formatting (generally bad)

  • DON'T use the Font, Font Size, Font Color and Font Background options.
  • DO use options defined in the Styles drop-down consistently across content.

When a style is applied to text, it "tags" the text (with an HTML class).  The styling applied to that tag can be customized per channel and design, and redefined in the future.  Font, Font Size, Font Color and Font Background options set specific values, and can not be easily customized per channel and design, so it is generally not a good idea to use them, except in special cases.

Basic formatting like Bold, Italic, Underline, Strike-through, Subscript, Superscript, Bullets, Indenting and Pull-quotes all work like Styles as well, in that they "tag" text as having a certain style, but they don't necessarily indicate exactly how to look.  For example, Bold really just means that the text should appear "stronger" than normal text, which could be represented with bolder text or just a different color or darker shade of a color.  Similarly, Strike-through could be represented as greyed out text.

Responsive Design

Consider that even a single destination (ie. the web) can be viewed from many different screens, orientations and devices (ie. black and white e-books, and text-only browsers).  Assume that text will likely wrap at in different break-points and flow around inline images differently depending on many factors.  You should author text and place images accordingly, so they will make sense and flow well, no matter the content area width.  Inline images should generally use styles to set their widths proportionately to the content area (ie. 1/3rd, 2/3rd, full width).  Those general styles can also be leveraged for web designs to determine when and how to adjust the layout of the text and images for specific screen widths.