A detailed description of the use of Writing-mode in CSS

I use P{WRITING-MODE:TB-RL when I make a Web page;} , the Chinese characters displayed in the Wind page are firm and normal, but when I do my xiaonei, I add this code to my Graffiti board *textrea{writing-mode:tb-rl;} I want my message board to be ticket, but the word is the line, but the word is lying, That is, the Chinese character clockwise rotation of 90 degrees, ask this is why, should be how to deal with?

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.

Run the Code box

<STYLE>P{WRITING-MODE:TB-RL;} </style><p>

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 can't set the alignment in the vertical direction.

LR-TB: Default value. The content in the object flows from left to right in the horizontal direction, and the next line is below the previous line. All glyphs are vertical and upward. This layout is used by the Roman language.
TB-RL: Up-down, right-left. The content in the object flows vertically from top to bottom, from right to left. The latter vertical lines on the left of the previous vertical lines. The full-width character is vertical, half-width such as the Latin alphabet or katakana 90 degrees clockwise. This layout is commonly used in East Asian languages

Description
Sets or retrieves the intrinsic writing direction of the object's content block. The Western language is certainly the left-right, the upper-lower writing style. But Asian languages often have a top-down, right-to-left way of writing.
When this property value changes, the effect of the Text-align property and the Vertical-align property will also vary.
Style sheet properties are not inheritable for the following elements:
BUTTON CAPTION Input Input Type=button input type=file input Type=password input type=reset input type=submit input type=t Ext Isindex OPTION TEXTAREA

This property effect is not cumulative. For example, if this property value of the parent object is set to TB-RL, setting this property value of the child object to TB-RL does not result in the rotation of the child object.
If the object's Writing-mode property setting is not the same as its parent object, it will get its own layout. The width of such an object is determined by using the height of the first parent object that has a layout.
When you use an object with different Writing-mode property values, assigning a certain size to each object gives you a better overall control over their layout.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is writingmode.

Example of vertical layout of text:

. verticle-mode {       writing-mode:tb-rl;       -WEBKIT-WRITING-MODE:VERTICAL-RL;             WRITING-MODE:VERTICAL-RL;   }   /* IE7 weaker, need to do some extra action */  . verticle-mode {       *width:120px;   }   . Verticle-mode h4,   . Verticle-mode p {       *display:inline;       *WRITING-MODE:TB-RL;   }   . Verticle-mode h4 {       *float:rightright;   }

The HTML is as follows:

<div class= "Verticle-mode" >