In website content operation, the layout and alignment of content often directly affects the user's reading experience and the efficiency of information delivery.AnQiCMS as a flexible content management system not only provides basic alignment options in the backend editor, but also offers powerful Filters functionality on the template level, allowing you to dynamically and finely control the alignment and display length of text.

Beyond the dynamic alignment requirements of the editor

In the AnQiCMS backend content editor, we can of course directly set the alignment of the text to center, left, or right.But this manual setting is usually applicable to a single content block, or when the content is pure rich text.However, in the design of actual website templates, we often need to handle dynamically generated content, such as article titles, product names, list item descriptions, etc.In these scenarios, we may need to keep the visual width of these texts fixed in specific areas of the template, and achieve centered, left-aligned, or right-aligned alignment effects by filling in blank spaces, so that the overall layout is more neat and beautiful.AnQiCMS's template filters are exactly created to meet such needs.

Flexible use of text alignment and length control filter

The AnQiCMS template engine includes several very practical filters that can help us dynamically adjust the alignment and display length of text.These filters extend the string to the specified total length by adding spaces on both sides or one side, thus achieving a visual alignment effect.

1. Center alignment (centerThe filter)

As the name suggests,centerThe filter is designed to center the string content within its specified total length.If you want a text block to be centered within a fixed width but the original text length is uneven, you can use it.If the length of the original string is less than the total length we set, the filter will automatically fill in spaces on both sides of the string to achieve centering.It should be noted that if the total length is an odd number, the number of spaces filled on the right will be one less than on the left.

For example, we have a text “AnQiCMS”, we hope it can be centered in 20 characters:

'{{ "AnQiCMS"|center:20 }}'

The output of this code will be:' AnQiCMS '(Padded with 7 and 8 spaces respectively, totaling 20).

In practical applications, you can use it for unified center alignment of titles in lists or cards, for example:

<div class="card-title">{{ item.Title|center:30 }}</div>

2. Left alignment (ljustThe filter)

If you want the text to be aligned to the left and the right side to be filled with spaces according to the set total length, thenljustFilter is an ideal choice.This is very useful when aligning multi-line text or creating a columnar layout similar to a table, allowing all left-aligned text to visually maintain alignment with the right boundary.

For example, display the text “AnQiCMS” on the left within 20 characters:

'{{ "AnQiCMS"|ljust:20 }}'

The output result will be:'AnQiCMS '(13 spaces are filled after the text, with a total length of 20).

You can use it to align the names in the product list, so that all names start from the left:

<span class="product-name">{{ product.Name|ljust:25 }}</span>

3. Right-aligned (rjustThe filter)

WithljustOn the contrary,rjustThe filter will align text to the right and fill in the necessary spaces on the left to reach the specified total length.This is particularly useful for aligning numbers, prices, or dates, etc., allowing them to visually form a vertical line on the right, making it convenient for users to quickly scan.

For example, display the text 'AnQiCMS' right-aligned within 20 characters:

'{{ "AnQiCMS"|rjust:20 }}'

The output will be:' AnQiCMS'(The text is filled with 13 spaces in front, totaling 20 characters).

When displaying prices or numbers,rjustIt can help you keep the columns neat:

<span class="product-price">价格：¥{{ product.Price|rjust:10 }}</span>

Application scenarios and precautions

These alignment filters are very practical in various scenarios, such as:

  • List or card layout:Uniform the display width of titles or descriptions of different lengths to maintain visual neatness.
  • Simulate table:Without using HTML<table>Labels, simple column alignment effect is achieved through text filling.
  • Formatted output:Ensure data column alignment when printing logs, reports, or special text files.

It should be emphasized that these filters arefilling in spacesTo achieve visual alignment effects, rather than controlling the alignment of element box models through CSS styles.Therefore, they are particularly suitable for scenarios where it is necessary to format and fill in the text content itself.

Important reminder:

  • processing HTML content:if your text content itself contains HTML tags (such as){{ archive.Content }})，and you want these tags to be parsed by the browser rather than treated as plain text, please make sure to apply the filter alignment before using themsafefilter. For example:{{ archive.Description|center:50|safe }}. Otherwise, HTML tags will also be treated as ordinary characters and participate in length calculation and space filling.
  • Character length rather than pixels:In the filter.numberThe parameter refers to the number of characters, not the pixel width. The visual pixel width occupied by the same number of characters can vary under different fonts and sizes.
  • Combined with other filters:Before using the alignment filter, you may also need to preprocess the text with other filters, such as usingtruncatecharsortruncatewordsto truncate overly long text, or usingstriptagsRemove HTML tags to ensure the accuracy of alignment effects.

By flexibly using these text processing filters provided by AnQiCMS, you can easily achieve dynamic alignment and formatting of website content, providing users with a more professional and beautiful reading experience.

Frequently Asked Questions (FAQ)

Q1: Do these alignment filters affect the HTML tags in the text?A1: Yes, these filters treat HTML tags as regular characters when calculating text length and filling in spaces. If you want HTML tags to be parsed normally by the browser rather than as plain text participating in alignment calculations, it is recommended to usestriptagsFilter removes HTML tags, or use it after aligning filters in the applicationsafeFilter allows the browser to parse the original HTML content.

Q2: How do I change the visual position of text on the page (for example, to center the entire paragraph) without filling spaces?A2: In this case, it is usually not necessary to use template filters to fill in spaces.You should align visually by adjusting the website's CSS style.text-align: center;Style, or use CSS technologies such as Flexbox, Grid layout, etc. to control the alignment of elements. Template filters are mainly used for character-level formatting of text strings themselves.