Writing-mode Text display orientation and compatible notation in CSS

CSS Writing-mode is said to be for Chinese, Japanese and other blocks of text design, to modify the writing direction, through this property can achieve the right-to-left text layout, or from the top-down layout.

Writing-mode use

. wrtmod{    margin:15px;    padding:15px;    border:1px solid #bababa;    Background: #f1f1f1;    font-size:15px;    WRITING-MODE:VERTICAL-RL;    WRITING-MODE:TB-RL;}

The effect is as follows:

Chrome Browser:

IE Browser:

Writing-mode property values are: Horizontal-tb,vertical-lr,vertical-rl, the corresponding IE value is: LR-TB,TB-LR,TB-RL.

HORIZONTAL-TB is the default value. Writing-mode attribute values are separated by a middle line, can be recorded as Xx-oo, HORIZONTAL-TB indicates the horizontal arrangement of the text, row up and down the line, VERITCAL-RL indicates the text up and down, rows from right to left. The LR-TB of IE indicates that the text is arranged from left to right, lines are arranged from top to bottom, TB-RL indicates the text is arranged up and down, and rows are favorably left. LR is the acronym for Left,right, and TB is the acronym for TOP,BOTTOM initials. Under IE, you can also use attribute values such as BT-RL,LR-BT to enrich the arrangement. However, for compatibility only these three permutations can be used in the Writing-mode attribute.

From above, we can see that Writing-mode not only changed the direction of writing, but also changed the way the container was laid out. The Chrome,firefox Browser Div presents the inline features,

IE8 Browser the entire div from landscape to portrait, with a highly adaptive feature.

The use of Writing-mode is generally used in the portrait of some verses, or some retro-effect on the page, but note that IE8 and other browsers, it does not show the characteristics of inline, so we want to pass the display: Inline-block to achieve the effect under IE.

. wrtmod{    margin:15px;    padding:15px;    border:1px solid #bababa;    Background: #f1f1f1;    font-size:15px;    WRITING-MODE:VERTICAL-RL;    WRITING-MODE:TB-RL;    Text-align:center;    line-height:32px;    letter-spacing:12px;    Display:inline-block; }.wrtmod:first-line{    Font-weight:bold;    Color: #0C58A7;    font-size:18px;} <div class= "Wrtmod" >    static Night thinking <br/>    window front bright moonlight <br/>    suspected ground frost <br/>    Jutou looking at the moon <br/ >    Think Home </div>

The effect is as follows:

Writing-mode changes the writing mode, the Text-align:center can be used to achieve the upper and lower center. The above effect uses letter-spacing and:: First-line pseudo-class, combine write-mode to realize the writing effect of an ancient poem.