CSS - 书写模式

CSSwriting -mode属性用于指定元素内文本内容流的方向。它指定文本是水平显示还是垂直显示。

它对于处理非拉丁文字（例如中文、日语和阿拉伯语）中的文本方向以及创建创意和视觉上有趣的布局特别有用。

可能的值

  • 水平-tb - 默认值。它将文本设置为水平书写模式，文本从左到右、从上到下流动，就像大多数西方语言一样。

  • Vertical-rl - 该值指定从右到左的垂直书写模式，通常用于中文、日文或韩文等脚本。文本垂直流动，从右侧开始向左延伸。

  • Vertical-lr - 与Vertical-rl类似，该值也表示垂直书写模式，但文本从左向右流动，用于蒙古文等脚本。

  • sideways-rl - 该值指定从上到下的垂直文本流，但从右到左定位文本。此值用于垂直脚本（如蒙古文）或某些形式的垂直日语文本，其中字符顺时针旋转 90 度并从右向左阅读。

  • sideways-lr - 该值指定从下到上的垂直文本流，但从左到右定位文本。

CSS 中的lr 、lr-tb、rl、tb、tb-lr和tb-rl书写模式已弃用，不应再使用。相反，您应该使用水平 tb或垂直 lr书写模式。

下表显示了已弃用的写入模式及其等效项：

弃用值 等值
LR 水平TB
RL 水平TB
LR-TB 水平TB
待定 垂直lr
tb-lr 垂直lr
tb-rl 垂直-rl

适用于

除表格行组、表格列组、表格行和表格列之外的所有 HTML 元素。

DOM语法

object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";

CSS书写模式-horizo​​ntal-tb值

以下示例将writing-mode属性设置为值horizo​​ntal-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书写模式-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书写模式-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">
      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书写模式-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 - 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书写模式-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 - 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 写作模式 - 审美运用（英语）

值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>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 写入模式 - 相关属性

以下是与写入模式相关的 CSS 属性列表：

财产 价值
展示 设置文本的方向。
unicode-bidi 确定文档中双向文本的Behave。
文本导向 设置一行中字符的方向。
文本垂直组合 将多个印刷字符单元组合到单个印刷字符单元的空间中。