Web page Text vertical style sheet (CSS) method

css| Page | There are two important properties in the text processing attribute of the Stylesheet style sheet: Writing-mode and text-align. Let's take a look at their usage first:
1. Writing-mode (Set object writing direction)
Syntax: WRITING-MODE:LR-TB, TB-RL
Parameters: Lr-tb: From left to right, from top down
TB-RL: From top down, right to left
Example: div {writing-mode:tb-rl;}
2. Text-align (Sets the alignment of the text in the object)
Grammar: Text-align:left, right, center, justify
Parameters: Left: Align Right: right-aligned
Center: Centered Justify: Justified
Example: div {text-align:center;}
Next, let's make an example of a tight row:
< HTML >
< head >
< title > Vertical Text </title >
< style type= "Text/css" >
<!--
. TNT {WRITING-MODE:TB-RL; TEXT-ALIGN:LEFT;FONT-SIZE:9PT}
-->
</style >
< BODY >
< div class= "TNT" >
Indeed, the vertical line of presentation text is very easy to implement in word processing Office software. Since this effect is not much seen in the production of Web pages, the discussion on this issue is relatively small. But in the production of Chinese ancient characteristics of the site, such as the text history, calligraphy, tourist sites and so on site, if the use of vertical text, with the antique background and simple old colors, in the visual will get unexpected results.
</div >
</body >

We can know that the attribute value of "Writing-mode" for the text is "Tb-rl", the text is "from top to bottom", and the property value of "Text-align" is "left", and the text is "Right-to-left". In summary, the contents of < div >......</div > will be arranged in a defined way.
The last point to be explained is "Writing-mode" currently only IE browser support, Nestscape Browser does not support!