In the template development of AnQi CMS, handling newline characters in text content is a common requirement.Sometimes we want to display the text input by the user with natural line breaks in a structured paragraph format, and sometimes we just want to simply convert each line break into an HTML line break tag.linebreaksandlinebreaksbrThese two filters come into play. Although they can both handle line breaks, the generated HTML structures and semantics are quite different in practical applications.
linebreaksFilter: Generates structured paragraphs for text
linebreaksThe filter is intended to convert newline characters in plain text to HTML paragraph tags (<p>) and line break tags (<br/>Presented on the web page with more semantic structure.
When we have a text input by a user or extracted from a database, which contains multi-line content, and this content can be logically considered as separate paragraphs,linebreaksis very suitable. It treats consecutive lines of text (separated by a single newline character) as line breaks within the same paragraph and uses<br/>Label it to break it; when encountering two consecutive newline characters, it considers it the start of a new paragraph and separates the text before and after<p>Label it.
Brief description of the working principle:
- Double newline characters (
\n\n)will be converted to<p>and</p>Label to define a new paragraph. - Single line break ()
\n)(If it does not constitute a new paragraph) will be converted to<br/>tag to achieve inline break.
Applicable scenarios:
- The content of the blog post is displayed
- Product detailed description needs segmented text
- Text in user submitted messages, hoping for automatically generated paragraph structure
- Any scenario where natural line breaks need to be converted into semantic paragraphs
Example code (extracted from AnQi CMS document):
{{ archive.Description|linebreaks|safe }}
Possible HTML output:Assumearchive.DescriptionThe content is:
这是一个简单的文本。
这也是一个段落。
对吗?
是的!
ThenlinebreaksThe generated HTML will be:
<p>这是一个简单的文本。</p>
<p>这也是一个段落。<br />对吗?</p>
<p>是的!</p>
You can see that double line breaks generate new lines<p>Labels, while single line breaks are generated within paragraphs.<br/>.
linebreaksbrFilter: Simple inline line breaks.
Withlinebreaksdifferent,linebreaksbrThe filter is more direct and simple. It will only replace each line break in the text.\n)All are converted into HTML line break tags without distinction<br/>),and no additional tags are added<p>Label.
This means it does not attempt to identify paragraph structure and does not wrap text with<p>Wrap the label. Whether it is one or multiple consecutive newline characters, they will all be displayed as a series of elements on the page.<br/>Label.
Brief description of the working principle:
- All newline characters (
\n)are directly converted to<br/>Label. - without adding any
<p>tags.
Applicable scenarios:
- Address information display, for example:
安企科技有限公司 中国广东省广州市天河区 某某街道某某号 - Display of poetry or lyrics, strictly maintaining the independence of each line of text
- Fine line breaks within each list item in the list
- Any scene that does not require paragraph semantics and only needs forced line breaks
Example code (extracted from AnQi CMS document):
{{ archive.Description|linebreaksbr|safe }}
Possible HTML output:Use withlinebreaksEnglisharchive.Descriptioncontent you need to modify:
这是一个简单的文本。
这也是一个段落。
对吗?
是的!
ThenlinebreaksbrThe generated HTML will be:
这是一个简单的文本。<br /><br />这也是一个段落。<br />对吗?<br /><br />是的!
All line breaks are simply and brutally replaced with<br/>, no<p>the wrapping of tags.
The core difference and the way to choose
- Semantic and structure:
linebreaksGenerate with semantics:<p>Tags, more suitable for representing segmented text content, and more friendly to SEO.linebreaksbrGenerate only<br/>Lacks paragraph semantics, more suitable for implementing simple forced line breaks within existing block-level elements. - CSS Styles:
<p>is a block-level element, which defaults to having top, bottom, and outer margins (margins) and other styles, and is easy to control with CSS.<br/>It is an inline element, used only for line breaks, without introducing additional layout space, and its style control granularity is small. - Output result:
linebreaksthe output may include<p>and<br/>two tags, andlinebreaksbrthe output only includes<br/>Label.
Choose which filter to use mainly depends on the structure and style of text you want to display on the web page. If you need structured paragraphs and want to utilize<p>The semantic and style control ability of the label,linebreaksit is a better choice; if it is just a simple inline break, and you do not want to introduce the semantic and extra style of paragraphs,linebreaksbrit is more direct and lightweight.
Common Questions (FAQ)
1. Why did I uselinebreaksorlinebreaksbrFilter, but the text on the page still does not have line breaks or shows HTML tags directly?This is usually because you forgot to add at the end of the filter chain|safeFilter. The CMS (and many other template engines) by default escapes all HTML content output to prevent XSS attacks. Whenlinebreaksorlinebreaksbrgenerated<p>or<br/>tag is not added after|safeThese tags will be escaped as<p>or<br/>The browser will display it as plain text, rather than parsing it as an HTML element. Therefore, the correct usage is{{ archive.Description|linebreaks|safe }}.
2.linebreaksandlinebreaksbrWhat are the differences when handling consecutive blank lines?
linebreaksbrIt will simply convert each newline character (including the newline characters between consecutive blank lines) to<br/>This means that if there are two consecutive blank lines, it will generate two<br/>tags.linebreaksIt will handle more intelligently: if two consecutive newline characters separate two different logical paragraphs, it will generate an independent one for each paragraph.<p>Label. If an empty line appears within a paragraph, for example文本A\n\n文本B,linebreaksit will generate `
TextA</