Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "CSS writing-mode text typesetting attribute use steps". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Grammar:

CSS Code Copy content to clipboard

writing-mode : lr-tb | tb-rl

CSS Code Copy content to clipboard

/* Keyword value */

writing-mode: horizontal-tb; /* Default */

writing-mode: vertical-rl;

writing-mode: vertical-lr;

CSS Code Copy content to clipboard

/* Global value-keywords inherit IE 8 +, initial and unset IE13 only supported */

writing-mode: inherit;

writing-mode: initial;

writing-mode: unset;

lr-tb : Default value. The contents of the object flow horizontally from left to right, with the latter row below the previous row. All glyphs are vertical. This layout is used by Roman languages.

tb-rl : up-down, right-left. The contents of an object flow vertically from top to bottom, right to left. The last vertical row is to the left of the first vertical row. Full-angle characters are vertically oriented, and half-angle characters such as Latin letters or Katakana are rotated 90 degrees clockwise. This layout is commonly used in East Asian languages

Description:

Sets or retrieves the writing orientation inherent to the content block of the object. What Western languages do save is left-right, top-down writing. But Asian languages are often written top-down, right-left.

When the value of this attribute changes, the text-align attribute and the vertical-align attribute also change in effect.

Style sheet attributes 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=text ISINDEX OPTION TEXTAREA

The effect of this attribute does not accumulate. For example, if the parent object has this attribute value set to tb-rl, setting this attribute value to tb-rl on the child object does not cause rotation of the child object.

If an object's writing-mode property is set differently from its parent object, it will get its own layout. The width of such an object is determined by using the height of its first laid out parent object.

When you use objects with different writing-mode attribute values, assigning a certain size to each object gives you greater overall control over their layout.

This property is read-only for currentStyle objects. It is readable and writable to other objects.

The corresponding script attribute is writingMode.

Example of vertical text:

CSS Code Copy content to clipboard

.verticle-mode {

writing-mode: tb-rl;

-webkit-writing-mode: vertical-rl;

writing-mode: vertical-rl;

}

/* IE7 is weak and needs some extra action */

.verticle-mode {

*width: 120px;

}

.verticle-mode h5,

.verticle-mode p {

*display: inline;

*writing-mode: tb-rl;

}

.verticle-mode h5 {

*float:rightright;

}

html as follows:

XML/HTML Code Copy content to clipboard

Yongliu

Jasper makeup into a tree high, ten thousand hanging green silk sash. I do not know who cut out the thin leaves, February spring like scissors.

We can see the ancient verse vertically!

"CSS writing-mode text typesetting property use steps" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.