CSS - writing-mode 属性
CSS writing-mode 属性用于指定元素内文本内容的流动方向。它指定文本是水平显示还是垂直显示。
它特别适用于处理非拉丁文字体的文本方向，例如中文、日文和阿拉伯文，以及创建创意且视觉上有趣的布局。
可能的值
horizontal-tb − 默认值。将文本设置为水平书写模式，文本从左到右、从上到下流动，如大多数西方语言。
vertical-rl − 该值指定从右到左的垂直书写模式，常用于中文、日文或韩文等文字。文本垂直流动，从右侧开始向左侧进行。
vertical-lr − 与 vertical-rl 类似，该值也表示垂直书写模式，但文本从左到右流动，用于蒙古文等文字。
sideways-rl − 该值指定从上到下的垂直文本流动，但文本从右到左定位。该值用于蒙古文或某些垂直日文文本，其中字符顺时针旋转 90 度，从右到左阅读。
sideways-lr − 该值指定从下到上的垂直文本流动，但文本从左到右定位。
CSS 中的 lr, lr-tb, rl, tb, tb-lr, 和 tb-rl 书写模式已被弃用，不应再使用。应改用 horizontal-tb 或 vertical-lr 书写模式。
下表显示了已弃用的书写模式及其等效值：
| 已弃用值 | 等效值 |
|---|---|
| lr | horizontal-tb |
| rl | horizontal-tb |
| lr-tb | horizontal-tb |
| tb | vertical-lr |
| tb-lr | vertical-lr |
| tb-rl | vertical-rl |
适用于
除表格行组、表格列组、表格行和表格列外的所有 HTML 元素。
DOM 语法
object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";
CSS writing-mode - horizontal-tb 值
以下示例演示了将 writing-mode 属性设置为 horizontal-tb 值，文本从左到右、从上到下阅读 −
<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 值
以下示例演示了 writing-mode 属性设置为 vertical-rl 值的情况，其中文本从右到左、从上到下阅读 −
<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 值
以下示例演示了 writing-mode 属性设置为 vertical-lr 值的情况，其中文本从左到右、从上到下阅读：−
<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 值
sideways-rl 值仅由 Firefox 浏览器支持。
以下示例演示了 writing-mode 属性设置为 sideways-rl 值的情况，其中文本从上到下垂直阅读，字符从右到左排列 −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-rl - 此示例仅由 Firefox 浏览器支持。</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 值
sideways-lr 值仅由 Firefox 浏览器支持。
以下示例演示了 writing-mode 属性设置为 sideways-lr 值的情况，其中文本从上到下垂直阅读，字符从左到右排列 −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-lr - 此示例仅由 Firefox 浏览器支持。</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 - 审美用法（英语）
值 vertical-lr 和 vertical-rl 可以在英语中用于审美效果，如以下示例所示：
<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></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 - 相关属性
以下是与 writing-mode 相关的 CSS 属性列表：
| 属性 | 值 |
|---|---|
| display | 设置文本方向。 |
| unicode-bidi | 确定文档中双向文本的行为。 |
| text-orientation | 设置行内字符的朝向。 |
| text-combine-upright | 将多个排版字符单元组合成单个排版字符单元的空间。 |