Experience in Chinese typesetting CSS

Learn web standards for several months and design and produce web pages according to the standards. I have always wanted to write something and sort out my own experiences. This article is mainly written for Chinese typesetting design. English typesetting is rarely done, so it is not involved.

First, we will introduce relatively simple applications such as how to set fonts, colors, sizes, and paragraph blanks. Later, we will introduce such things as drop caps and first line indents. Finally, we will talk about some commonly used Chinese layouts on web pages, such as truncation of Chinese characters, fixed-width word wrapping (word-wrap and word-break), etc. Because I am just writing some application experience, if you need a complete introduction to CSS properties, please refer to the CSS manual.

1. How to set the text font, color and size - use font

font-style to set italics, such as font-style : italic;

font-weight sets the text thickness, such as font-weight: bold;

font-size sets the text size, such as font-size: 12px; (or 9pt, different For unit display issues, please refer to the CSS manual)

line-height sets the line spacing, such as line-height: 150%;

color sets the text color (note not font-color), such as color: red;

font-family sets the font, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; (this is a common writing method)

All of the above can be written in one line of font attributes (except the color attribute, which needs to be written separately):

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans -serif;

2. How to control paragraph layout - use margin, text-align

Chinese paragraph use

tags, margins can be used on the left and right (equivalent to indentation), and the spaces before and after paragraphs. For example:

p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 
}

The alignment method of text is text-align, for example:

p{ 
text-align: center; /*居中对齐*/ 
}

The alignment methods include left, right and justify (justify both ends) )

PS. Speaking of margin, I am used to defining margin: 0; for all tags when writing CSS, because sometimes there are page layout problems caused by the default margin value, and I can’t find the reason ( Pay special attention to tags such as ul/ol/p/dt/dd)

3. Vertical text - use writing-mode

The writing-mode attribute has two values: lr-tb and tb-rl. The former is the default left-right, top-bottom, and the latter is top-bottom, right-left.

For example:

p{ 
writing-mode: tb-rl; 
}

can be combined with direction layout.

4. Problem with bullets - using list-style

In CSS bullets include disc (solid dot), circle (open circle), square (solid square), decimal (Arabic numerals), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase English letters), upper-alpha (uppercase English letters) letters), none (none). For example, set the bullets of a list (ul or ol) to squares, such as:

li{ 
list-style: square; 
}

In addition, list-style also has some values. For example, you can use some small pictures as bullets. Just write the url ("image address") directly under list-style. Note that if the margin-left of an item list is set to zero, bullets with list-style-position: outside (the default is outside) will not be displayed. Unfortunately, the above-mentioned bullets do not seem to be able to set the size, and the dots and squares are always the same. And the vertical alignment cannot be set.

5. Drop cap - use: first-letter

Pseudo object: first-letter can be used with font-size and float Create a drop cap effect.

For example:

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

6. First line indentation - use text-indent

text-indent can indent the first line in the container by a certain unit.

For example, Chinese paragraphs usually have two Chinese characters left before each paragraph. You can write like this:

p{ 
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/ 
}

If font-size is 12px, then text-indent: 2em will be indented by 24px.

7. About Chinese phonetic notation - use ruby ​​tags and ruby-align attributes

For example, you can use ruby-align to set the alignment . This is seen in the CSS manual. You can check the ruby-align item for details.

8. Fixed-width Chinese character truncation - use text-overflow

Using the background language to truncate the field content in the database , for example, cut off 12 Chinese characters (use ellipses afterward). But sometimes it is necessary to filter html tags, etc., but using CSS to control does not have this problem. For example, apply the following style to a list:

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断，不能处理多行。 

9、固定宽度汉字（词）折行 —— 使用word-break 

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：

南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海

值得注意的是里面的空格不能以 代替（最少要有一个软空格）。