How to use the Writing-mode text layout property of CSS

Writing-mode is often used to implement the vertical layout of the page text, here we take a systematic look at the CSS Writing-mode text layout properties using the method, including an example of an ancient poem to show Writing-mode vertical use of text

Grammar:

WRITING-MODE:LR-TB | Tb-rl

/* keyword value */WRITING-MODE:HORIZONTAL-TB;    /* Default value */WRITING-MODE:VERTICAL-RL;   WRITING-MODE:VERTICAL-LR;

/* Global value-keyword inherit ie8+,initial and unset IE13 only support */writing-mode:inherit;   writing-mode:initial;   Writing-mode:unset;

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:

<p class= "Verticle-mode" >    
We can see the ancient poetry of the vertical row!