In AnQiCMS template development, dealing with multi-line text is a common requirement, especially when these texts contain specific formatting, such as indentation. AnQiCMS provideslinebreaksA filter is used to assist in handling these situations, but it has its specific mechanism in dealing with indentation, which is worth in-depth understanding.

linebreaksThe filter is mainly responsible for converting newline characters in text to HTML.<p>and<br/>Tags, to ensure that the text content is displayed correctly on the web page. Specifically, it converts individual newline characters into<br/>While converting two or more consecutive newline characters (usually representing a blank line), convert them to a paragraph tag pair (<p>...</p>However, for special indentation formats at the beginning of a text line or within the text (such as indentation achieved through spaces or tabs),linebreaksThe filter itself does not actively retain these visual indentation effects.

This is determined by the rendering mechanism of HTML.The browser, while parsing HTML, performs 'whitespace collapsing' on consecutive whitespace characters (including spaces, tabs, and newlines), usually treating multiple consecutive whitespaces as a single space and ignoring leading whitespace.linebreaksThe filter converts to<p>and<br/>After the tag, the text content inside is still affected by this white space collapsing rule. This means that even if your original text contains这是一行缩进的文字such content, afterlinebreaksAfter processing, it is likely to be displayed in the browser as<p>这是一行缩进的文字</p>The indentation at the beginning of each line will be ignored.

Then, if your multiline text indeed needs to retain a special indentation format, how should we operate? At this point, you need to use a tag specifically designed for displaying preformatted text in HTML:<pre>.<pre>The label will preserve all whitespace characters (including spaces and newline characters) and display according to the original text formatting.

You can place multiline text with special indentation in the template.<pre>Tags, and then combine them with filters.linebreaksFor example, if your article content is stored inarchive.Contentand you need to preserve the indentation and line breaks in the template code:

<pre>{{ archive.Content|linebreaks|safe }}</pre>

Here,linebreakswill ensure that the line breaks in the text are converted to<br/>and<p>(if any), and the external<pre>The tag ensures that all whitespace characters (including indentation) are preserved within these HTML structures. It is worth noting that, due tolinebreaksThe filter will generate HTML tags, you need to use|safethe filter to inform the template engine that these outputs are safe HTML content and should not be escaped again.

If you do not want the text to be<p>wrapped in tags, but simply to convert newline characters into<br/>while preserving the original line structure, but still need to maintain indentation, thenlinebreaksbrThe filter would be a better choice, as it only handles line breaks and does not add additional paragraph tags. You can use it like this: 

<pre>{{ archive.Content|linebreaksbr|safe }}</pre>

In some cases, you may also need to add line numbers to each line of multiline text,linenumbersThe filter can achieve this function.

On the whole, understandinglinebreaksThe working principle of the filter and the HTML whitespace collapse rules can help us better control the presentation of multi-line text on web pages. For multi-line text that needs to retain special indentation formats, it is recommended to use in combination with<pre>Tags are the most direct and effective method. When entering content in the AnQi CMS backend, if a section of text needs to retain precise formatting (such as code snippets, poetry, or lists with specific indentation), it is recommended to use it directly in the template.<pre>or<pre><code>Wrap the tags to ensure the final display effect meets expectations.

Common Questions (FAQ)

  1. linebreaksandlinebreaksbrWhat are the differences between filters? linebreaksThe filter will convert newline characters in the text to<br/>Tags, and it will convert empty lines (i.e., two or more consecutive newline characters) to HTML tags.<p>...</p>paragraph tags, which means it will create paragraph structures for the content.linebreaksbrThe filter is even simpler, it will simply convert all newline characters directly to<br/>tags without adding anything extra<p>tags, making it more suitable for scenarios where only simple line breaks are needed.

  2. Why do the multiple lines of text and indentation I input in the rich text editor of the AnQi CMS backend not display consistently on the front end?This is usually due to the rendering mechanism of HTML and the handling method of rich text editors.Most rich text editors convert the content to HTML format when saving.During this process, non-standard indentation (such as through multiple spaces or tabs) may not be converted to the corresponding HTML entities or structure, and browsers will also default to ignoring extra whitespace at the beginning and within lines when displaying.<pre>Tags, or when editing in the background, using the 'Code block' or 'Blockquote' feature of the editor, which are usually converted to<code>or<pre>tags to maintain the format.

  3. Except<pre>Tags, are there any other methods to retain indentation?Besides using it directly<pre>Tags, for code snippets,<code>Tags are also commonly used to represent code, but they do not retain indentation themselves, usually requiring to be used with<pre>Combine usage. At the CSS level, you can try to usewhite-spaceproperty (such aswhite-space: pre-wrap;）to simulate<pre>behavior, but this method depends on the correct loading of the stylesheet and browser support, and may not be as direct as using<pre>Tags are stable and semantically meaningful. Markdown editors usually convert code block content automatically in the background.<pre><code>This is a highly recommended way to preserve code indentation as structure.