Chinese typography CSS experiences _ Experience Exchange

Learn Web standards for months and follow standard design and production Web pages. Always want to write something, tidy up their experience. Write this article, mainly for the Chinese typesetting design, English typesetting because rarely done, so not involved.

First introduce how to set the font, color, size, paragraph blank, and other simple applications, followed by such as the first word sinking, first line indentation. Finally, some commonly used Web page Chinese typesetting, such as the truncation of the text, fixed-width word within the line (Word-wrap and Word-break) and so on. Because just write some application experience, if you need a full description of CSS properties, please refer to the CSS manual.

1, how to set the text font, color, size--using font

Font-style set italic, such as font-style:italic;
Font-weight set the text thickness, such as font-weight:bold;
Font-size set the text size, such as font-size:12px, (or 9pt, different units display problem reference CSS manual)
Line-height set line spacing, such as line-height:150%;
Color Set text colors (note not font-color), such as color:red;
Font-family set fonts, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Arial, Sans-serif; (This is the general wording)

The above can be written in one line of the font attribute (except that the color attribute needs to be written separately):
Font:italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, song body, Sans-serif;

2, how to control the paragraph layout--using margin,text-align

Chinese paragraph use

Labels, left and right (equivalent to indentation), the gap after the paragraph, can be used margin. Like what:
p{
margin:18px 6px 6px 18px; /* Clockwise from top, right, bottom, left, 12 o'clock */
}
The text is aligned using text-align, such as:
p{
Text-align:center; /* Center Alignment */
}
Alignment with left, right, and justify (justified)

PS. Talking about margin, I'm used to defining margin:0 for all tags when I write css; Because sometimes the default margin value causes the page layout problem, but you can not find the reason (pay special attention to UL/OL/P/DT/DD and other tags)

3. Vertical text--Using Writing-mode

The Writing-mode property has two values LR-TB and TB-RL, which are the default left-right, top-down, and the latter is up-down, right-left.
Like what:
p{
WRITING-MODE:TB-RL;
}
Can be combined with direction typesetting.

4, the problem of bullets--using List-style

In CSS, bullets have disc (solid dots), Circle (Hollow Circle), square (solid squares), decimal (Arabic numerals), Lower-roman (lowercase roman numerals), Upper-roman (uppercase Roman numerals), Lower-alpha (lowercase English alphabet), Upper-alpha (uppercase English alphabet), none (none). For example, set a list (UL or OL) of the bullets as blocks, such as:
li{
List-style:square;
}
In addition, List-style also have some values, such as the use of some small images as bullets, under List-style directly write the URL ("Picture address") on it. Note If the left outer patch (MARGIN-LEFT) of an item list is set to zero, the Bullets for List-style-position:outside (the default is outside) are not displayed. Unfortunately, the above bullets do not seem to set the size, and the dots and squares are always the point. And you cannot set the alignment in the vertical direction.

5. Drop Cap--use: First-letter

Pseudo-object: First-letter with font-size, float can make the drop cap effect.
Like what:
p:first-letter{
padding:6px;
font-size:32pt;
Float:left;
}

6, first line indent-use Text-indent

Text-indent can indent a unit in the first line of the container. For example, Chinese paragraphs usually have two characters in front of each paragraph. It can be written like this:
p{
Text-indent:2em; /*em is a relative unit, 2EM is now twice times the size of a word */
}
If the font-size is 12px, then the TEXT-INDENT:2EM is indented 24px.

7. About Chinese phonetic notation--using Ruby tags and ruby-align attributes

For examplephonetic Zhu Yin , you can use Ruby-align to set the alignment. This is seen in the CSS manual, you can refer to the Ruby-align item yourself.

8, Fixed width Chinese character truncation--using Text-overflow

The background language allows you to truncate the contents of a field from a database, for example, by truncating 12 characters (followed by ellipses). But sometimes you need to filter HTML tags and so on, but using CSS to control the problem is not. For example, apply the following style to the list:
li{
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
}
However, you can only handle truncation of text on one line, and you cannot handle multiple lines.

9, fixed-width Chinese characters (words) folding line-use Word-break

For example, to show a lot of place names in a fixed-width container (assuming space-delimited), in order to avoid the middle of a place name break (that is, one word on top and the other word breaks to the next line). You can use Word-break. Like what:

Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Beijing Shanghai, Nanjing Shanghai Shanghai, China, Shanghai

It is important to note that the space inside cannot be substituted (at least one soft space).

