Back to all How-tos

Maintaining extra spaces in text added to a template

In the world of HTML, extra spaces are generally dealt with by removing any spaces beyond the single one. In some cases, this is not the behaviour you want to maintain, and those spaces should all be shown in your output.

Changing a single element's property

For a single element, maintaining these spaces requires a simple option added to the property of the element.

For example, to maintain white spaces for a paragraph:

  • Right-click on the paragraph and select Paragraph…
  • Go to the Type tab
  • In the Spacing section, look at the Whitespace option
  • To only affect extra spaces, change the option to pre

For more information about the Whitespace property and its options, see white-space on Mozilla Developer Network.

Affecting multiple elements using a class

To affect multiple elements of various types (divs, paragraphs, cells, etc), you can use a class that is applied on these elements. Only the elements with this class will be affected.

First, create the class:

  • Go to Edit, then Stylesheets…
  • Click New to add a new CSS rule
  • Change the Selector box to name the class. For example, .keepspaces
  • In the Type tab, Spacing group, change the whitespace option to pre.

To affect any element with this CSS rule, simply add the keepspaces class in its attributes. If an existing class is present, you can still add it, just make sure there’s a space between each class. For example, highlighted green keepspaces indicates 3 different classes and will apply styles for all of the appropriate CSS rules.

Affecting each instance of a specific element

You can affect all elements of a specific type in your template (for example, all paragraphs, or all divs) by creating a rule as above. However, instead of using a class selector (.keepspaces), you can simply use an element type selector, such as ptddivh3, etc. Element type selectors are simply the element name (the first word between the <> tag) without any other character around it.

For more information about various CSS Selectors, see CSS Selectors on Mozilla Developer Network.

Leave a Reply

Your email address will not be published. Required fields are marked *