Paragraph Formatting dialog

The Paragraph Formatting dialog controls how the selected paragraph is formatted. It is accessed by placing the cursor within a paragraph and then selecting Format > Paragraph on the menu.

All settings in this dialog are in fact CSS properties. Cascading Style Sheets (CSS) were originally designed for use with web pages: HTML files. Since Designer templates are HTML files, they are styled with CSS. To learn how to use CSS in the Designer, see Styling and formatting and Styling templates with CSS files. For information about specific properties and their options, see MDN Web Docs - CSS Reference.

Click the Advanced button to enter CSS properties and values directly.

The Apply button lets you preview the template with the new settings.

For information about text and how to style it see Text and special characters and Styling text and paragraphs.

Formats tab

  • General group:

    • Line-height: Specify the height of each line in the element's text, in measure or percentage. Note that this is not spacing between lines, but rather the complete height of the line itself including the text. 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 each paragraph in the element. 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 MDN Web Docs - display. Equivalent to the display property.

    • Direction: Select in which direction text should be displayed (ltr, rtl, auto). Useful for certain languages such as Arabic, Hebrew, etc. Equivalent to the dir HTML attribute.

  • Breaks group:

    • Before: Specifies whether a page break should occur before the paragraph. This is equivalent to the page-break-before property in CSS; see MDN Web Docs - page-break-before for an explanation of the available options.

    • Inside: Specifies whether a page break is allowed inside the paragraph. Equivalent to the page-break-inside property in CSS; see MDN Web Docs - page-break-inside for an explanation of the available options.

    • After: Specifies whether a page break should occur after the paragraph. Equivalent to the page-break-after property in CSS; see MDN Web Docs - page-break-after for an explanation of the available options.

    • Widows: Specifies how to handle widows within the paragraph (lines appearing alone on the next page if the paragraph does not fit on the current one). Equivalent to the widows property. Widows and orphans are ignored if the page-break-inside property is set to avoid.

    • Orphans: Specifies how to handle orphans within the paragraph (lines appearing alone at the end of a page if the paragraph does not fit on the current one). Equivalent to the orphans property.

Note: For more information on page breaks, widows and orphans, see MDN Web Docs - Paged Media.

Spacing tab

For information about spacing see Spacing.

  • Padding group: Defines padding (spacing inside the element) in measure or percentage:
    • All sides: Check to set all padding to use the Top value. Equivalent to the CSS padding property.
    • Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS padding-left, padding-top, padding-right and padding-bottom properties.
  • Margin group: Defines margins (spacing outside the element) in measure or percentage:
    • All sides: Check to set all margins to use the Top value. Equivalent to the CSS margin property.
    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the CSS margin-left, margin-top, margin-right and margin-bottom properties.

Border tab

For information about borders see Border.

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the CSS border property.
  • Top, Left, Bottom, Right: Each group defines the following properties:
    • Width: Specify the thickness of the border. Equivalent to the CSS border-widthproperty.
    • Style: Specify the style of the border such as solid, dashed or dotted. Equivalent to the CSS border-style property.
    • Color: Specify the color of the border: 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 valid 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%).Equivalent to the CSS border-color property.

Type tab

The Type tab has all the settings for text.

  • 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 valid 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 valid 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.