Detailed explanation of writing direction and compatible writing methods of writing-mode attribute in CSS (picture)

writing-mode introduction

css writing-mode is said to be designed for Chinese, Japanese and other block text. It is used to modify the writing direction of the text. Through this attribute, the text can be realized from right to Left layout, or top-down layout.

writing-mode uses

.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:

The attribute values ​​​​of writing-mode are: horizontal-tb, vertical-lr, vertical-rl, and the corresponding values ​​​​under IE are ：lr-tb,tb-lr,tb-rl.

horizontal-tb is the default value. The attribute value of writing-mode is separated by a dash and can be recorded as XX-OO. horizontal-tb means that the text is arranged horizontally and the lines are arranged up and down. veritcal-rl means that the text is arranged up and down and the lines are arranged from right to left. IE's lr-tb means that the text is arranged from left to top, and the lines are arranged from top to bottom. tb-rl means that the text is arranged from top to bottom, and the lines are arranged from top to left. lr is the abbreviation of left and right, and tb is the abbreviation of top and bottom. You can also use attribute values ​​such as bt-rl, lr-bt under IE, and the arrangement methods are more abundant. However, for compatibility, only these three arrangements can be used in the writing-mode attribute.

From the screenshot above, we can see that writing-mode not only changes the writing direction of the text, but also changes the layout of the container. The div in chrome and FireFox browsers has the inline feature.

The entire div in the IE8 browser changes from horizontal to vertical, and has a highly adaptive feature.

The purpose of writing-mode is generally used in the vertical display of some poems, or on some pages with retro effects. However, it should be noted that IE8 is different from other browsers. It does not have the feature of inline, so we To achieve the effect under IE through display:inline-block.

.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">
    静夜思<br/>
    窗前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>

writing-modeAfter changing the writing mode, use text-align:center to achieve top and bottom centering. The above effect uses letter-spacing and ::first-line pseudo-classes, combined with write-mode, to achieve the writing effect of an ancient poem.

The above is the detailed content of Detailed explanation of writing direction and compatible writing methods of writing-mode attribute in CSS (picture). For more information, please follow other related articles on the PHP Chinese website!