Styling text and paragraphs

There are numerous ways to format text in a template. You can apply a certain font, make text bold, transform it to uppercase, center it, 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.

With the Copy fit feature, text can automatically be scaled to the available space in a Box or Div. See Copy Fit.

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, place the cursor inside of it, or select the paragraph (see: Selecting an element). Then select the appropriate element, either on the Format menu, or from the 'Element type' dropdown on the toolbar.

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: Select the font used to display text. 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: Specify the color of the text: select a named color (defined in the Colors Editor) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a predefined CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      This setting is equivalent to the color property in CSS.

    • Background color: Specify the background color of the text: select a named color (defined in the Colors Editor) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be a predefined CSS color name (CSS color names), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
      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. Check any option to apply the selected style to text within the element. This list shows the CSS property and value for each of the options:
    • 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-transform to uppercase.
    • Lowercase: Sets thetext-transform to lowercase.
    • Small-caps: Sets the font-variant to small-caps.

All settings in the Text Formatting dialog are in fact CSS style rules. When you change one or more settings, the selected text gets wrapped in a Span element that has an inline style tag containing the selected setting(s). Click the Advanced button to add CSS properties and values to the inline style tag of the Span directly. For more information about CSS, see Styling and formatting.

Formatting a paragraph

Through the Paragraph Formatting dialog you can set the line height and first indent of a paragraph, and specify how to handle page breaks before, in and after the paragraph. 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 > Paragraph.
For an explanation of all options in this dialog see: Paragraph Formatting dialog.

Removing 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 because they are considered more specific (see Using a more specific CSS rule). 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 may 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.