CSS about Writing-mode attribute text writing direction and compatible wording

Source: Internet
Author: User

Writing-mode Introduction

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>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.