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.

Tip: Here are some helpful how-tos related to this topic:

Tip: 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.

Tip: 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' drop-down 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, or an element that contains text, such as a paragraph or a box. 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 Properties) 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 Properties) 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 MDN Web Docs: 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.

Note: All settings in the Text Formatting dialog are in fact CSS style rules. If you selected some text and then 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).
For more information about CSS, see Styling and formatting.

Note: Make sure to include the curly brackets when selecting an expression (see Variable data in text: expressions) if you want to style the results. HTML tags inside the curly brackets break the expression.

Formatting a paragraph

Through the Paragraph Formatting dialog you can choose a font and style, 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.

Formatting all paragraphs in a Box

Settings that can be made for a paragraph can also be made for a Box that contains one or more paragraphs. The Box settings are applied to all paragraphs in the Box.

To open the Box Formatting dialog, select a Box (see: Selecting an element) or place the cursor in a paragraph in the box, and then select Format > Box from the menu.
For an explanation of all options in this dialog see: Box 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.

    Tip: 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.

Aligning text

To align text horizontally - to the left, center, or right - there are toolbar buttons (see Alignment).

There are no buttons to align text vertically, but there are techniques for doing so.

To be able to align a paragraph vertically, it must be in a fixed-sized element: a table or a positioned box.

  • Table cells have the option to have their content aligned to the top, middle, baseline or bottom. See Styling a table.

  • The contents of a positioned box can be aligned vertically using CSS properties. To bottom-align text, you can use the following CSS rules:

    Copy 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    You can either add these rules via the Box Formatting dialog (click the Advanced button; see Box Formatting dialog) or directly in a style sheet (see Styling templates with CSS files).

    Tip: This approach is especially useful if the text consists of variable data, because with these rules, any empty paragraphs are automatically omitted from the output.

    Tip: Here is a how-to that demonstrates this technique: