Css 简明教程
CSS - writing-mode Property
CSS writing-mode 属性用于指定元素中文本内容流动的方向。它指定文本应水平显示还是垂直显示。
CSS writing-mode property is used to specify the direction of text content flows within an element. It specifies whether text should be displayed horizontally or vertically.
它在处理非拉丁文字的文本方向（如中文、日语和阿拉伯语）以及创建创意且在视觉上引人注目的布局时特别有用。
It is particularly useful for handling text orientation in non-Latin scripts, such as Chinese, Japanese, and Arabic, as well as for creating creative and visually interesting layouts.
Possible Values
-
horizontal-tb − Default value. It sets the text to be laid out in horizontal writing mode, where text flows from left to right and top to bottom, as in most Western languages.
-
vertical-rl − This value specifies a vertical writing mode from right to left, commonly used for scripts like Chinese, Japanese, or Korean. Text flows vertically, starting from the right and proceeding to the left.
-
vertical-lr − Similar to vertical-rl, this value also represents a vertical writing mode, but the text flows from left to right, which is used in scripts like Mongolian.
-
sideways-rl − This value specifies vertical text flow from top to bottom, but positions the text from right to left. This value is used for vertical scripts like Mongolian or some forms of vertical Japanese text, where the characters are rotated 90 degrees clockwise and read from right to left.
-
sideways-lr − This value specifies vertical text flow from bottom to top, but positions the text from left to right.
下表显示了不推荐使用的书写模式及其对应方式：
The following table shows the deprecated writing modes and their equivalents:
Deprecated Value |
Equivalent Value |
lr |
horizontal-tb |
rl |
horizontal-tb |
lr-tb |
horizontal-tb |
tb |
vertical-lr |
tb-lr |
vertical-lr |
tb-rl |
vertical-rl |
Applies to
除表格行组、表格列组、表格行和表格列以外的所有 HTML 元素。
All the HTML elements except table row groups, table column groups, table rows, and table columns.
DOM Syntax
object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";CSS writing-mode - horizontal-tb Value
以下示例演示了将 writing-mode 属性设置为值 horizontal-tb 的情况，其中文本从左到右、从上到下读取 −
The following example demonstartes writing-mode property set to value horizontal-tb, where text is read from left to right and top to bottom −
<html>
<head>
<style>
.box {
width: 250px;
background-color: pink;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h2>CSS writing-mode: horizontal-tb</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>CSS writing-mode - vertical-rl Value
以下示例演示了将 writing-mode 属性设置为值 vertical-rl 的情况，其中文本从右向左、从上到下读取 −
The following example demonstartes writing-mode property set to value vertical-rl, where text is read from right to left and top to bottom −
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-rl</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>CSS writing-mode - vertical-lr Value
以下示例演示了将 writing-mode 属性设置为值 vertical-rl 的情况，其中文本从左到右、从上到下读取： −
The following example demonstartes that the writing-mode property set to value vertical-rl value, where text is read from left to right and top to bottom: −
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-lr</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - sideways-rl Value
以下示例演示了将 writing-mode 属性设置为值 sideways-rl 的情况，其中文本从上到下垂直读取，并且字符从右到左排列 −
The following example demonstrates that writing-mode property set to value sideways-rl, where text read vertically from top to bottom, with characters arranged from right to left −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - sideways-lr Value
以下示例演示了将 writing-mode 属性设置为值 sideways-lr 的情况，其中文本从上到下垂直读取，并且字符从左到右排列 −
The following example demonstrates that writing-mode property set to value sideways-lr, where text is read vertically from top to bottom, with characters arranged from left to right −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - Asthetic Use (english Language)
值 vertical-lr 和 vertical-rl 可用于英语语言的审美效果，如下示例所示：
The values vertical-lr and vertical-rl can be used in English language for asthetics as demonstrated in the following example:
<html>
<head>
<style>
.mainbox{
max-width: 750px;
position: relative;
padding-left: 80px;
padding-top: 50px;
}
.box {
height: 250px;
background-color: pink;
}
h2 {
padding-top: 70px;
writing-mode: vertical-rl;
position: absolute;
left: 0;
top: 0;
line-height: 1;
color: lightgreen;
font-size: 40px;
font-weight: 800;
}
</style>
</head>
<body>
<div class="mainbox">
<h2>TutorialsPoint</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>CSS writing-mode - Related Properties
以下是与书写模式相关的 CSS 属性的列表：
Following is the list of CSS properties related to writing-mode:
property |
value |
Sets the direction of text. |
|
Determine the behavior of bi-directional text in a document. |
|
Sets the orientation of the characters in a line. |
|
Combines multiple typographic character units into the space of a single typographic character unit. |