Special Text Layout

Chinese Page Paragraph Typography

Chinese page paragraphs are not limited to pure Chinese characters; they often contain mixed English characters or Arabic numerals.

Full-line characters justified at both ends, content evenly distributed.

Full-line character justification means:

Suppose a line width is 100px, each character width is 15px, and there are 10 characters. The characters would be too long to fit on one line and would automatically wrap. The first line would be "full" (6 characters), with a total width of 90px, leaving remaining space at the end of the line.

Similarly, for multiple full lines where the actual character widths are not equal, the total character width of each line would be different, making it look less "aesthetic". We use these two properties to optimize and achieve full-line character justification with evenly distributed content:

text-justify: inter-ideograph;
text-align: justify;

Both-end justification: means the first character on the left is flush with the left edge of the element's content, and the first character on the right is flush with the right edge of the element's content.

Evenly distributed content: In this context, a Chinese character is treated as one character; while a string of numbers, an English word, a non-Chinese character punctuation, or a mix of the above are all treated as one character, and based on this, they are evenly distributed within the content.

For content that doesn't fill a line, this is not affected.

Barcode

A barcode is generally pure Arabic numerals, pure English characters, or a mix of the two.

<div class="barcode">{{codeContent.split('').join(' ')}}</div>

.barcode {
  text-align: justify;
}
.barcode::after {
  display: inline-block;
  content: '';
  width: 100%;
}