[CSS series] writing-mode - text direction (horizontal/vertical; left/right/right-left)

---

• Documentation: writing-mode - CSS: Cascading Style Sheets | MDN

---

1. Introduction

There is a requirement in the project that the text needs to be arranged vertically. I immediately thought of directionthis attribute in CSS, but this attribute can only set the text "from left to right" or from right to left. After searching, I found that there is an "uncommon attribute" ——writing-mode

This can be achieved as follows:

writing-mode: vertical-lr;

2.writing-mode

writing-modeProperties define the horizontal or vertical layout of text and the direction in which text travels within block-level elements.

1. Grammar

/* 关键字值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

horizontal-tb (default: horizontal direction, text from left to right, lines from top to bottom)

For left-aligned (ltr) text, the content flows horizontally from left to right. For right-aligned (rtl) text, the content flows horizontally from right to left. The next horizontal row is below the previous row.

vertical-rl (vertical direction, text from top to bottom, lines from right to left)

For left-justified (ltr) text, content flows vertically from top to bottom, with the next vertical line to the left of the previous line. For right-aligned (rtl) text, content flows vertically from bottom to top, with the next vertical line to the right of the previous line.

vertical-lr (vertical direction, text from top to bottom, lines from left to right)

For left-justified (ltr) text, content flows vertically from top to bottom, with the next vertical line to the right of the previous line. For right-aligned (rtl) text, content flows vertically from bottom to top, with the next vertical line to the left of the previous line.

sideways-rl (experimental value)

For left-aligned (ltr) text, the content flows vertically from bottom to top. For right-aligned (rtl) text, the content flows vertically from top to bottom. All glyphs, even those in vertical text, are oriented to the right.

sideways-lr (experimental)

For left-aligned (ltr) text, the content flows vertically from top to bottom. For right-aligned (rtl) text, the content flows vertically from bottom to top. All glyphs, even those in vertical text, are oriented to the left.

2. Attribute matching

writing-modeYou can change the text layout direction, and some text-related attributes will also have more wonderful uses:

(1) The box is centered vertically——margin: auto 0;

<div class="container">
     <div class="content"></div>
 </div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #f00;
    writing-mode: vertical-lr;
}
.container .content {
    
    
    height: 100px;
    width: 200px;
    margin: auto 0;
    background-color: #0f0;
}

Note: Fixed width and fixed height

(2) Center the text image vertically——text-align: center;

<div class="container">
    我是一行文字<br>程序边界<br>
    <img src="https://profile-avatar.csdnimg.cn/ea275d892df44c5fb722c5756f8ba98b_qq_32682301.jpg">
</div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-align: center;
}

Original address of program boundary: https://iseeu.blog.csdn.net/article/details/131709017

(3) The indentation of the first line changes the text to sink——text-indent

<div class="container">
    我是一行文字<br>程序边界<br>
</div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-indent: 2rem;
}

Wonderful application
https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html

Original address of program boundary: https://iseeu.blog.csdn.net/article/details/131709017

(4) Others

More ways to play are slowly being explored and discovered, to be continued. . .

3. Past and present life

The writing-mode attribute was originally only an attribute in IE and was only supported by IE. Now it is supported by Google and Firefox in CSS3.

Therefore, you need to remember two different sets of syntax when using it, the private attributes of IE and the canonical attributes of CSS3.

If you only need to be compatible with IE8+, you can just use the standard properties of CSS3.

3. Extend learning

direction

Documentation: direction - CSS: Cascading Style Sheets | MDN

The direction CSS property is used to set the direction of text, table columns, and horizontal overflow.

---

• The writing-mode attribute that changes the vertical and horizontal rules of the CSS world « Zhang Xinxu-Xin Space-Xin Life
• writing-mode attribute css ancient writing method