Search articles, guides, videos, documents

White Space

Whitespace handling is crucial in templating languages like Liquid, as it impacts the readability and formatting of the rendered output. Whitespace includes spaces, tabs, and newline characters. By default, Experience Builder's render engine preserves most of this whitespace, so line breaks, spaces, and tabs in your template will appear in the output.

Whitespace Tag Modifiers

Special tag modifiers have been introduced to manage and trim whitespace around tags and variables. These modifiers allow for greater control over the formatting of output, ensuring that unnecessary spaces are removed and the presentation remains clean and consistent.

{%- -%} and {{- -}}

Using - within tag delimiters removes whitespace to the left or right of the tag.

Left Trim

{%- will trim leading whitespace before the tag.

Example:

    {% assign user_name = "John" -%}
    Hello,
    {{ user_name }}

Output:

    Hello,
    John

Right Trim

-%} will trim trailing whitespace after the tag.

Example:

    {% assign user_name = "John" -%}
    Hello, 
    {{- user_name %}

Output:

    Hello, John

Both Side Trim

Combining both trims whitespace on both sides.

Example:

    {%- assign user_name = "John" -%}
    Hello, 
    {{- user_name -}}

Output:

    Hello,John

Preserving Whitespace

While most sequential whitespace is typically reduced to a single space, there are scenarios where you may want to maintain the formatting within your text. To preserve whitespace, you can use the

 HTML tag within your liquid resources.

Example:
    <pre>
      Text with
      preserved whitespace
    </pre>

Output:
    Text with
      preserved whitespace

Best Practices

Use Trim Delimiters Judiciously: Avoid excessive use of whitespace trim delimiters; only use them where necessary to maintain readability.
Consistent Formatting: Maintain consistent formatting in your templates to enhance readability for future modifications.
Performance Optimization: Be mindful of whitespace management in large loops or heavily nested templates to enhance performance.