Web design for Chinese typesetting CSS experience

css| Design | Web page Design | experience | Chinese

Learn about web standards for months and follow standard design and make Web pages. Always want to write something, to organize their own experience. Writing this article, mainly for the Chinese layout design, English typesetting because it is rarely done, so do not involve. The

first describes how to set a simpler application for fonts, colors, sizes, and paragraph blanks, followed by a drop cap, first-line indentation. Finally, some commonly used Web page layout, such as the truncation of Chinese characters, fixed-width words within the fold line (Word-wrap and Word-break) and so on. Because just write some application experience, if you need complete CSS attribute introduction, please refer to the CSS manual.

1, how to set text font, color, size--use font

Font-style to set italic, such as font-style:italic;
Font-weight Sets the text weight, such as font-weight:bold;
Font-size to set the text size, such as font-size:12px (or 9pt, different unit display problems refer to the CSS manual)
Line-height set line spacing, such as line-height:150%;
Color Sets the text color (note is not font-color), such as color:red;
Font-family set fonts, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, XXFarEastFont-Franklin, Sans-serif; (This is a common notation)

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

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

Chinese paragraph using the
label, left or right (equivalent to indentation), after the paragraph before the blank, can be used margin. For example:


p{
margin:18px 6px 6px 18px;/* is the alignment of the first, right, bottom, left, 12 o'clock clockwise direction/
}
Text in Text-align, for example:
p{
Text-align:center; /* Center-aligned */
}
Alignment also has left, right, and justify (justified)

PS. Talking about margin, I am used to defining margin:0 for all tags when I write CSS. Because sometimes the default margin value causes page layout problems and you can't find the reason (pay special attention to the Ul/ol/p/dt/dd tab)

3, Vertical text--use Writing-mode

Writing-mode property has two values LR-TB and TB-RL, the former is the default left-right, top-bottom, the latter is up-down, right-left.
For example:
p{
Writing-mode:tb-rl;
}
can be combined with direction typesetting.

4, bullet issues--using List-style

in CSS bullets have disc (solid dots), circle (hollow circles), square (solid squares), decimal (Arabic numerals), Lower-roman (lowercase roman numerals), Upper-roman (uppercase Roman numerals), Lower-alpha (lowercase English letters), Upper-alpha (uppercase English letters), none (No). For example, set a list (UL or OL) bullets for the box, such as:
li{
List-style:square;
}
List-style also has some values, such as a small picture can be used as bullets, under List-style directly to write the URL ("Picture address") on it. Note If the left outer patch (MARGIN-LEFT) of a list of items is set to zero, the Bullets for List-style-position:outside (the default is outside) are not displayed. Unfortunately, the above bullets don't seem to set the size, the dots and squares are always the point. And the vertical alignment cannot be set.

5, drop Cap--use: First-letter

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

6, first line indent-use Text-indent

Text-indent can make the first line in the container indent a certain unit. For example, Chinese paragraphs usually empty two characters before each paragraph. You can write this:
p{
Text-indent:2em; /*em is the 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 to 24px.

7, about Chinese character phonetic notation--use Ruby label and Ruby-align attribute

For example, phonetic Zhu Yin, you can use Ruby-align to set the alignment. This is seen in the CSS manual, you can check the ruby-align items.

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

The background language allows you to truncate the contents of a field from a database, such as 12 characters (followed by an ellipsis). But sometimes you also need to filter HTML tags, and the use of CSS control is not the problem. For example, apply the following style to the list: