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. We’ll have a look at how to manage those using OL Connect Designer.

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 (in the source tab, it should be only <p></p> tags with content inside):

  • Click on the paragraph. You should see in the “breadcrumbs” (top left) something like: ‘p > ~contents’.
  • In the Attributes tab, under Other, tick the Whitespace checkbox.
  • When you type, inside the paragraph, the text will wrap on the next line when it reaches the right edge of the page.
  • If the Whitespace checkbox is not checked, the text will never wrap and it will continue outside of the page.

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 Add (+) 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 *