How to dynamically adjust the center, left, and right alignment length of text in AnQiCMS?

In website content operations, the layout and alignment of content often directly affect 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 background editor, but also offers powerful filter (Filters) features on the template level, allowing you to dynamically and finely control the alignment and display length of text.

Beyond the dynamic alignment needs 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.This manual setting is usually suitable for a single content block, or when the content is purely rich text.However, in the actual design of 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 text at a fixed visual width in a specific area of the template, and achieve centering, left alignment, or right alignment by filling in blank spaces, making the overall layout more neat and beautiful.AnQiCMS template filters are designed to meet such needs.

Familiarize yourself with the text alignment and length control filter

AnQiCMS template engine comes with several very useful filters that can help us dynamically adjust the alignment and display length of text.These filters expand the string to the specified total length by padding spaces on both sides or one side of the text, thus achieving a visual alignment effect.

1. Center alignment (centerFilter)

As the name implies,centerThe filter is intended 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 spaces on both sides of the string to achieve centering.It should be noted that if the total length is odd, the spaces filled on the right will be one less than on the left.

For example, we have a text “AnQiCMS” that we want to center within a 20-character length:

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

The output of this code will be:' AnQiCMS '(It is filled with 7 and 8 spaces respectively in front and behind, with a total length of 20).

In practical applications, you can use it to uniformly center the title in lists or cards, for example:

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

2. Align to the left (ljustFilter)

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, thenljustThe filter 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” left-aligned within a length of 20 characters:

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

The output will be:'AnQiCMS '(The text is filled with 13 spaces at the end, making 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. Align to the right (rjustFilter)

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 especially useful for aligning numbers, prices, or dates, allowing them to visually form a vertical line on the right, making it easy for users to scan quickly.

For example, display the text "AnQiCMS" right-aligned within a length of 20 characters:

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

The result will be:' AnQiCMS'(13 spaces were filled in front of the text, making a total length of 20).

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

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

Application scenarios and precautions

These alignment filters are very useful in many scenarios, such as:

• List or card layout:Consistent display width for titles or descriptions of different lengths, maintain visual neatness.
• Simulate table:Without using HTML<table>In the case of labels, simple column alignment effects are achieved through text padding.
• Formatted output:When printing logs, reports, or special text files, ensure the column alignment of the data.

It should be emphasized that these filters passfilling spacesTo achieve visual alignment effects rather than controlling the alignment of the element box model through CSS styles.Therefore, they are particularly suitable for scenarios where the formatting and filling of the text content itself is required.

Important reminder:

• Processing HTML content:If your text content itself contains HTML tags (for example{{ archive.Content }}), and you want these tags to be parsed by the browser instead of being treated as plain text, please make sure to apply the alignment filter before using themsafea filter. 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 filternumberThe 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.
• Combine with other filters:Before using the alignment filter, you may 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 HTML tags in the text?A1: Yes, these filters treat HTML tags as ordinary characters when calculating text length and filling in spaces. If you want HTML tags to be parsed normally by the browser instead of participating in alignment calculation as plain text, it is recommended to use firststriptagsThe filter removes HTML tags or is used after the alignment filter is appliedsafeThe filter allows the browser to parse the original HTML content.

Q2: If I just want to change the visual position of the text on the page (for example, to center the entire paragraph), and not fill in spaces, what should I do?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.For example, add to HTML elements that contain texttext-align: center;Style, or use CSS techniques like Flexbox, Grid layout, etc. to align elements. Template filters are mainly used for character-level formatting of text strings.