Styling text and paragraphs

There are numerous ways to format text in a template. You can apply a certain font, make it bold, center the text, color it, etc.

This topic explains how to apply local formatting to text. It is recommended though, to format text using style sheets; see Styling and formatting and Styling templates with CSS files.

Formatting text and paragraphs locally

An intuitive way of formatting text locally is by using the toolbar buttons: select some text, or an element that contains text (see: Selecting an element) and click one of the toolbar buttons to make it bold, center it, create a numbered or bulleted list, etc.

To quickly change a paragraph into a Heading, Address or Pre element, select the paragraph (see: Selecting an element) and on the Format menu, select the appropriate element.

More local formatting options are available in the Formatting dialogs; see below.

Formatting text

To open the Text Formatting dialog, select some text and then select Format > Text. In the Text Formatting dialog you can set:

• The font, font size, color and background color:
  • Font: see also: Fonts. This is equivalent to setting the font-family property in CSS.

  • Font size. Enter the size in a measure, named size or percentage. This is equivalent to setting the font-size property in CSS.

  • Color: this the color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color manually. The color value must be a valid HTML color name or hexadecimal color code. This setting is equivalent to the color property in CSS.

  • Background color: this is the background color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color value manually. a valid HTML color name or hexadecimal color code. This setting is equivalent to the background-color property in CSS.

• The spacing between letters and words and the way the text is wrapped:
  • Letter Spacing: The space between characters in a text in measure or percentage. This is equivalent to the letter-spacing property in CSS.
  • Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the word-spacing property in CSS.
  • Whitespace: Specify how the text wraps. See CSS White-Space for details. This is equivalent to the white-space property in CSS.
• The style of the text:
  • Bold: Sets the font-weight to 700.
  • Italic: Sets the font-style to italic.
  • Underline: Sets the text-decoration to underline.
  • Strikethrough: Sets the text-decoration to line-through.
  • Subscript: Sets the vertical-align to super.
  • Superscript: Sets the vertical-align to sub.
  • Capitalize: Sets the text-transform to capitalize.
  • Uppercase: Sets thetext-transformto uppercase.
  • Lowercase: Sets thetext-transformto lowercase.
  • Small-caps: Sets the font-variant to small-caps.

Formatting a paragraph

Through the Paragraph Formatting dialog you can set the line height and first indent, among other things. It also lets you add spacing and a border; see Spacing and Border.

To open the Paragraph Formatting dialog, select a paragraph (see: Selecting an element) or place the cursor in a paragraph, and then select Format > Text.

On the Formats tab you can set:

• Line-height: Specify the height of each line in the paragraph's text, in a measure or percentage. Note that this is not the spacing between lines, but rather the complete height of the line itself including the text. This is equivalent to the line-height property in CSS.
• Align: Select how text should be aligned, such as left, center, right or justify. Equivalent to the align property in CSS.
• First Indent: Specify the indentation of the first line of the paragraph. Equivalent to the text-indent property in CSS.
• Display: Select how to display the element. This can also be used to hide an element completely using the none option. See CSS Display. Equivalent to the display property in CSS.
• Direction: Select in which direction text should be displayed (left to right, right to left, or auto). Useful for certain languages such as Arabic, Hebrew, etc. This is equivalent to the dir HTML attribute.
• (Page) breaks: these settings are only useful in Print sections, as only Print sections have pages.
  • Before: Sets whether a page break should occur before the paragraph. This is equivalent to the page-break-before property in CSS; see CSS page-break-before property for an explanation of the available options.
  • Inside: Sets whether a page break is allowed inside the paragraph. Equivalent to the page-break-inside property in CSS; see CSS page-break-inside property for an explanation of the available options.
  • After: Sets whether a page break should occur after the paragraph. Equivalent to the page-break-after property in CSS; see CSS page-break-after property for an explanation of the available options.
  • Widows and orphans: this setting is only useful in Print sections; see Preventing widows and orphans for an explanation.
  For more information on page breaks, widows and orphans, see the W3 Paged Media reference.

Click the Advanced button to add CSS properties and values to the inline style tag directly.

Remove local formatting from text

Layout buttons and options on the Format menu add inline style tags to the text. Style tags can look like this: <b>...</b> or like this: <p style= "color: red;" >.

Inline style tags have priority over styles defined in a CSS file. For example, when a formatting rule in a style sheet colors all paragraphs green, a paragraph with an inline style tag to color it red would still stay red. So, when a rule in a style sheet doesn’t seem to work, an inline style tag can be the culprit. In that case you might want to remove the local formatting.

To remove local formatting:

• Select the formatted text and click the toolbar button Remove Formatting. Doing this removes inline style tags from the selection.
• Alternatively, click the Source tab at the bottom of the workspace (or select View > Source View) to manually remove style tags.

  When you select an element in the template, the Styles pane will show which styles are applied to that element. The link behind the style will take you to the place (the Source tab, or a CSS file) where that style is defined.