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">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </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">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </div>
</body>
</html>

CSS writing-mode: Vertical-lr

以下内容示例说明将writing-mode属性设置为vertical-rl值，其中文本从左到右、从上到下读取: -

<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">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </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">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </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">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </div>
</body>
</html>

CSS writing-mode: Asthetic Use (english Language）

值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>Yxjc123</h2>
   <div class="box">
      Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.
   </div>
   </div>
</body>
</html>

CSS writing-mode: 相关属性

以下是与writing-mode相关的CSS属性列表:

属性	值
display	设置文本方向。
unicode-bidi	确定文档中双向文本的行为。
text-orientation	设置一行中字符的方向。
text-combine-upright	将多个印刷字符单元组合成单个印刷字符单元的空间。