4 Working With Text

While working in Contributor, you spend most of your time adding and editing text. The Contributor editor provides several commonly used editing and formatting options that you find in most word-processing programs (cut, copy, paste, change font and text size, change text color, align text, and much more). The site designer controls what formatting options are available in the Contributor editor.

This section covers the following topics:

4.1 Formatting Text

You can change the appearance of text by using standard formatting options such as bold and underline.

To format text, complete the following tasks:

  1. Highlight the text that you would like to format.

  2. In the editing toolbar, choose the formatting option you want to apply to the selected text. Please note that not all formatting options in the table below may be available, depending on what the site designer chose to enable in the editor.

Toolbar Option Description
Remove Formatting icon Removes all formatting from the highlighted text.
Formatting icons (bold, italic, underscore, strikethrough) Applies bold, italic, underline or strikethrough formatting to the highlighted text.
Superscript and Subscript icons Applies superscript or subscript formatting to the highlighted text.
Quotation icon Formats a block of text to identify quotations (text coming from other sources).
Style Applies a CSS formatting style to the selected text. The list of available styles is defined by the site designer. To remove the applied style, select the style name again.
Format Applies an HTML formatting tag to the selected text (for example, <H1>). The list of available formats is defined by the site designer.
Font Applies a font to the selected text.
Size Applies a font size to the selected text.
Text Color icon Changes the color of the text.
Text Background icon Changes the background (highlight) color of the text.

4.2 Applying CSS Styles to Text

There are two ways to format the text (or graphics) on your web pages. You can manually apply formatting attributes (such as bold, italic, and font color), or you can apply a style (from a cascading style sheet, or CSS) using the style menu in the editing toolbar.

A style can store attributes such as typeface, font, and positioning. Styles are created ahead of time by your site designer or site manager to simplify the process of formatting web pages and to make them more consistent. Rather than having to manually format the text on a given web page and then trying to remember those settings for the next page, you can simply apply a style to your text.

To apply a CSS class to your text, complete the following tasks:

  1. Highlight the desired text (or image).

  2. In the editing toolbar, click the style you want to apply to your text.

Figure 4-1 Styles Menu (Example)

Style menu with available styles.

The text then takes on the formatting attributes stored in that particular style. You can assign a class to individual words and graphics in the same field in Contributor. The available styles in the list may vary from one field to another and from one web page to another (depending on how the site was set up).

4.3 Indenting and Outdenting Text

You can increase and decrease the left margin using the indent or outdent button in the editing toolbar.

To indent or outdent text, perform these tasks:

  1. Place your cursor where you would like to change the margin.

  2. In the editing toolbar, click the Indent icon (Figure 4-2) to increase the left margin.

    Or, click the Outdent icon (Figure 4-2) to decrease the left margin.

Figure 4-2 Text Indentation Icons

Text indentation icons

4.4 Aligning Text

You can align your text (left, center, right, full) using the alignment icons on the editing toolbar.

To align your text, perform these tasks:

  1. Place your cursor where you would like to change the alignment of the text.

  2. In the editing toolbar, choose one of the following:

    • Click the Left Align icon (Figure 4-3) to align the text to the left margin.

    • Click the Center icon (Figure 4-3) to center the text.

    • Click the Right Align icon (Figure 4-3) to align the text to the right margin.

    • Click the Justification icon (Figure 4-3) to align the text to both the left and right margin.

Figure 4-3 Text Alignment Icons

Text alignment icons

4.5 Adding Numbered and Bulleted Lists

You can add numbered (ordered) lists and bulleted (unordered) list from the toolbar.

To create a numbered or bulleted list, perform these tasks:

  1. Place your cursor on a new line, or within a block of text you want included as part of the list.

  2. In the editing toolbar, choose one of the following:

    • Click the Numbered List icon (Figure 4-4) to create a list where each item in the list has a number.

    • Click the Bulleted List icon (Figure 4-4) to create a list where each item in the list has a bullet.

Figure 4-4 Lists Icons

Lists icons

If you want to remove a list, select the text in the list and click the appropriate list icon.

4.6 Changing the Font Typeface and Size

You can change the font typeface and size using two menus in the editing toolbar.

Changing the Font Typeface

To change the typeface, highlight your text and select the desired typeface (Arial, Verdana, Times New Roman, and so on) from the list of available typefaces (Figure 4-5). This list contains several web-safe fonts that should work in most web browsers.

Figure 4-5 Font Menu

Font menu with available fonts.

Changing the Font Size

To change the font size, highlight your text and select a size from the list of available sizes (Figure 4-6).

Figure 4-6 Size Menu

Surrounding text describes Figure 4-6 .

4.7 Changing the Text Color and Text Highlight Color

You can change the font color and font background (highlight) color using the color buttons in the editing toolbar.

Changing the Font Color

To change the font color, perform these tasks:

  1. Highlight your text.

  2. Click the Font Color icon (Figure 4-7).

  3. Choose a color for your text using the color selector.

Figure 4-7 Text Color Icon

Text color icon

Changing the Highlight Color

To change the font background (highlight) color, perform these tasks:

  1. Highlight your text.

  2. Click the Highlight Color icon (Figure 4-8).

  3. Choose a highlight color for your text using the color selector.

Figure 4-8 Text Highlight Color

Text Highlight Color icon

4.8 Adding a Horizontal Line

A horizontal line is useful to separate content on a web page. You may want to use a line to separate large portions of text or graphics. You can add a horizontal line using the editing toolbar.

To add a horizontal line, perform these tasks:

  1. Place your cursor where you would like the rule to appear.

  2. Click the Horizontal Line icon (Figure 4-9) in the editing toolbar.

    The rule extends across the page (its width taken from the parent field).

Figure 4-9 Horizontal Line Icon

Horizontal Line icon

4.9 Checking Spelling

When you finish formatting and editing text, you may want to perform a spell check of your work. You can do this using the spell checker in Contributor.

To do a spell check, perform these tasks:

  1. Place your cursor in the element to spell check.

  2. Click the Spell Checker icon (Figure 4-10) on the editing toolbar.

Figure 4-10 Spell Checker Icon

Spell checker icon