A detailed example of the Writing-mode property in CSS

The Writing-mode property was originally just an attribute in IE, only IE support, now in CSS3 Google, Firefox also began to support.

So when you use it, you need to remember two sets of different grammars, IE's private properties and CSS3 's canonical properties

If you only need to be compatible with ie8+, you can use only the CSS3 specification property.

CSS3:

writing-mode:horizontal-tb;//Default: Horizontal direction, top to bottom

writing-mode:vertical-rl;//vertical direction, right-to-left

Writing-mode:  vertical-lr;//Vertical direction, left to right
IE Private properties:
The main:

WRITING-MODE:LR-TB;//From left to right, from top to bottom. Default

writing-mode:tb-rl;//from top to bottom, right to left

WRITING-MODE:TB-LR (ie8+);//horizontal direction, from top to bottom, left to right

If your project needs to be compatible with IE7, then only focus on these two values: initial values LR-TB and TB-RL, corresponding to HORIZONTAL-TB and vertical-rl! in the CSS3 specification

The Writing-mode property is somewhat similar to the float property (the width and height of the element are propped up by the child element), originally designed to control the display of inline elements;

Writing-mode changes the default horizontal flow of the page to a vertical stream
1. Horizontal direction can also margin overlap
Css

. demo {            -WEBKIT-WRITING-MODE:VERTICAL-LR;            -MS-WRITING-MODE:VERTICAL-LR;            WRITING-MODE:TB-LR;            margin-bottom:20px;        }        . Demo. P1,. Demo. P2 {            margin:0 20px;            background-color:red;        }

Html

<p class= "Demo" >    <p class= "P1" > Horizontal margin overlap </p>    <p class= "P2" > Horizontal margin overlap </p ></p>

2. Vertical centering can be achieved using Margin:auto

Css

. demo1 {            height:300px;            Background-color: #006000;            -WEBKIT-WRITING-MODE:VERTICAL-LR;            -MS-WRITING-MODE:VERTICAL-LR;            WRITING-MODE:TB-LR;        }        . Demo1. p3 {            height:100px;            width:200px;            Margin:auto 0;            background-color:red;        }

Html

<p class= "Demo1" >    <p class= "P3" ></p></p>

3. You can use Text-align:center to achieve vertical center image
Css

          . demo2 {            -webkit-writing-mode:vertical-lr;            -MS-WRITING-MODE:VERTICAL-LR;            WRITING-MODE:TB-LR;            height:300px;            Background-color: #006000;            Text-align:center;        }

Html

<p class= "Demo2" >    </p>

4. You can use Text-indent to achieve text sinking effect
Css

. demo3{            -WEBKIT-WRITING-MODE:VERTICAL-LR;            -MS-WRITING-MODE:VERTICAL-LR;            WRITING-MODE:TB-LR;        }        . Demo3 a {            border:10px solid red;            Text-decoration:none;            -webkit-border-radius:50%;            -moz-border-radius:50%;            border-radius:50%;            Text-align:center;            font-size:28px;            color:darkred;            Display:block;            height:50px;            width:50px;            line-height:50px;            background-color:red;            Box-shadow:inset 0 0 1px darkred, 0 1px, 0 2px, 0 4px;        }

Html

<p class= "Demo3" >    <a href= "javascript:void (0)" > sign </a></p>

5. Can achieve the full compatibility of the icon fonts icons rotation effect
is to set the writing-mode of the parent element containing the icon to VERTICAL-RL, which enables the 180-degree rotation of the element.

The relationship between Writing-mode and direction

writing-mode, direction 3 of the unicode-bidi CSS world's properties that can change the flow of text layout. Among them, belonging to a close direction unicode-bidi relative, often used together, is also the only two CSS properties that are not affected by the CSS3 all property, which is basically used with inline elements.

At first glance, writing-mode it seems to contain direction that unicode-bidi certain functions and behaviors, for example, vertical-rl rl direction rtl have similarities to values, all from right to left. In practice, however, there is no overlap between the two. Because vertical-rl the document flow at this time is vertical, rl indicating the horizontal direction, and then set direction:rtl , in fact, the value rtl changes the vertical direction of the inline elements of the text direction, a horizontal longitudinal, no intersection. and writing-mode can affect the block elements, the direct change of the CSS of the world's vertical and horizontal rules, more direction powerful and more than the ghost animal.

However, the magic of CSS is that some features may have been asked some graphic layout design, but we can take advantage of its characteristics, to play their own creativity, to achieve many other unexpected effects. Therefore, the Three Musketeers appearing above are very good resources.

Flow mechanism of Writing-mode and *-start properties

Many *-start / *-end attributes (also known as CSS logical attributes) appear in CSS3, such as: margin-start / margin-end ,/, border-start border-end padding-start / padding-end , and text-align:start / text-align:end declaration.

Here's the question, why do you bounce so much *-start *-end ?

That's because modern browsers have enhanced the support of convection, including the old rivers and lakes direction , and the recent years of follow-up writing-mode .

A long time ago, in our perception, the page layout was a flow, that is, from left to right, from top to bottom, so we used margin-left / margin-right did not have any problems. However, if our flow is changeable, for example, a picture is 20 pixels from the left edge, and we want its document flow to be from right to left, and 20 pixels to the right of the distance, what can I do?

At this point, margin-left:20px after the picture direction changes, it is invalid; however, margin-start there is no problem, so-called start, refers to the direction of the beginning of the document flow, in other words, if the page is the default document flow, is margin-start equivalent to, if the horizontal right-to- margin-left left document flow, then margin-startequal to margin-right . margin-endis similar.

The WebKit kernel browser also supports *-before and *-end , by default, is similar to, approximate to, margin-before margin-top margin-after margin-bottom However, the specification does not seem to mention, Firefox does not support, *-before and *-after the opportunity is not many , why? Because in fact, with the Writing-mode, *-start / *-end has been able to meet our needs for the logical location, both horizontal and vertical can be controlled, the opposite direction applies to the old *-top / *-bottom .

For example, we set the writing-mode value to vertical-rl , at this time, equal to, if at this time, the margin-start margin-top same, margin-start margin-top will follow the weight and behind the principle of mutual coverage.

Can see, the scene is different, margin-start the function also can not, cadres, can left can right is almost living hundred change star June.

About *-start / *-end after the opportunity will be specific to discuss, here first donuts, we estimate that currently will not be used in actual projects.