【CSS 书写模式 (Writing modes )】

---

CSS 书写模式 Writing modes

用于	属性名	CSS 版本
① 设置 元素的书写模式(块流方向 +内联级内容/文本 主流动方向 ) 。	writing-mode	2
② 把字符组合在一起 ，放置在单个字符的空间 ( 垂直模式, 搭配 writing-mode 属性) 。	text-combine-upright	3
③ 设置 垂直行中的 文本的方向 ( 垂直模式, 搭配 writing-mode 属性) 。	text-orientation	3

---

• ⑴ CSS Writing Modes
  • ① 书写模式的方向 ⇒ 根据 其 ❶ 内联基础方向 (inline base direction)和 ❷ 块流方向 (block flow direction)定义。
  • ② CSS Writing Modes : 一个 CSS 模块，定义了 各种 国际写作模式。
    • 从左到右: 如拉丁和印度文字。
    • 从右到左: 如希伯来或阿拉伯文字。
    • 双向: 当混合使用 从左到右 和 从右到左的文字。
    • 垂直: 如一些亚洲文字。
  • ③ 书写模式的 相关属性
    • ❶ text-combine-upright
    • ❷ text-orientation
    • ❸ writing-mode
    • direction: 详情见: 【CSS 文本属性（Text）】
    • unicode-bidi: 详情见: 【CSS 文本属性（Text）】
    • glyph-orientation-horizontal (已废弃)
      • 从 SVG 2开始禁用
      • 影响在呈现每个字形时 当前文本位置的前进量。

---

• ⑵ 内联基础方向 和 块流方向
  • ① 内联基础方向 ⇒ 一行中的排序
    • 内联基础方向: 内容 在一行中的 排序方向。
    • 一行中的排序⇒ 内联方向的 开始和结束
      • 定义了 内联方向的开始和结束
      • 内联方向的开始: 是句子的开始。
      • 内联方向的结束: 是一行文本在换行之前的结束。
  • ② 块流方向 ⇒ 堆叠方向
    • 块流方向 是方框 (例如段落) 以该 书写模式 进行堆叠的方向。
    • writing-mode属性 控制 块元素 流动的方向。
      • 元素上设置 writing-mode: vertical-lr⇒ 这将改变 块的方向，从而也改变 内联方向。

---

1. writing-mode 属性: 设置 元素的书写模式(块流方向 +内联级内容/文本 主流动方向 )

• ⑴ 设置 元素的书写模式(块流方向 +内联级内容/文本 主流动方向 ): writing-mode 属性
  • 属性设置 ❶ 文本行是 水平放置 还是垂直放置，以及 ❷ 块级元素的方向。
  • ① 整个文档的 书写模式
    • 当对 整个文档 进行设置时，应该在根元素(html 元素 )上进行设置。
  • ② 适用对象:
    • 所有元素。除了 表行组、表列组、表行和表列 之外。
  • ③ 指定的方向
    • 书写模式 writing-mode 属性 指定 ❶ 块流方向 = 块级容器的 堆叠方向，以及 ❷ 块容器中 内联级内容的流动方向。
    • ⇒ 块级元素 + 内联级元素 / 文本内容 的顺序。

---

• ⑵ 书写模式的 语法
  • writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

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

/* 全局值 Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

---

• ⑶ 书写模式的 属性值

  • ★ 一个属性值⇒ 指定两个方向⇒

    • 内含 块级元素时: 前面指定 ❶ 内联级内容 / 文本 的 主方向 + 后面指定 ❷ 块流方向 = 块级元素的之间的排列方向。
      • 针对 内联级内容/文本时: 前面指定 ❶ 文本的 主方向 + 后面指定 ❷ 文本的 换行方向 (文本写不下时，换行的方向)
    • 下面的示例图，都是在 父元素.divcontainer 中设置的 书写模式，涉及代码 见示例最下方。

  • ① 块级 从上到下+内容 从左到右(默认值): horizontal-tb

    • ❶ 内联级内容⇒ 水平方向: 内容从左到右 水平流动。
    • ❷ 块级元素⇒ 垂直方向: 内容 从上到下 垂直流动。
      • 下一条水平线 位于前一条线 之下。
      • 在父元素上设置 水平书写模式⇒ 子元素和内容⇒
        • 块级元素⇒ 从上到下
        • 内容⇒ 从左到右
      • 

  • ② 块流 从右到左+ 内容 从上到下: vertical-rl

    • ❶ 内容⇒ 从上到下 垂直流动
    • ❷ 块级元素⇒ 从右到左 水平流动。
      • 下一条垂直线 位于上一行的左侧。
    • 

  • ③ 块级 从左到右+内容 从上到下: vertical-lr

    • ❶ 内联级内容/文本 ⇒ 从上到下 垂直流动。
    • ❷ 块级元素 ⇒ 从左到右 水平流动。
    • 下一条垂直线位于前一条直线的右侧。
    • 

  • ④ 顺时针旋转: 块级从右到左 + 内容 从上到下 (正向朝右)sideways-rl (目前 仅 Firefox 中支持)

    • 内容 ⇒ 从上到下 垂直流动，文本的内容 正向朝右摆放，是侧放的。
      • 效果看上去 像是被顺时针旋转了。
    • 块级元素 ⇒ 从右到左。
      • 

  • ⑤ 逆时针旋转: 块级 从左到右 + 内容 从下到上 (正向朝左): sideways-lr

    • 内容 ⇒ 从下到上 垂直流动，文本的内容 正向朝左摆放，是侧放的。
      • 效果看上去 像是 整体 被逆时针旋转了。
    • 块级元素 ⇒ 从左到右。
      • 

  • ★ 继承性: 默认 会被子元素继承。

    • ① 自动继承: writing-mode: vertical-lr;(此处 诗歌部分 设置了固定宽高，文本 上下左右的流向 看得更清晰些,上面的示例的图 都没有设置宽高，文本流向看得不清晰)
    • ② 值的覆盖: 也可以在 子元素中 设置不同的 writing-mode 属性值，覆盖 自动 从父元素继承的值。
    • 

---

• 上图和下图的示例 涉及代码 如下 ↓

  • 上面的各图 属性值的示例 ，.poem元素 = 诗歌部分 没有设置宽高，自动继承了 父元素的 书写模式，也看不出来 继承值后的样式。
  • 下面各图 是设置了 .poem 元素宽高 ⇒ .poem 诗歌部分的样式 = 自动继承 父元素的书写模式的属性值 样式 = 父元素不设置书写模式 + 单独设置 .poem 元素 书写模式的样式 。

• html

<div class="divcontainer">
    <h2 class="poemtitle">明日歌h2>
    <p class="poem">明日复明日，明日何其多。

        我生待明日，万事成蹉跎。p>
div>

• css

/*设置 元素的包含块 */
.divcontainer {
    width: 40%;
    /*height: 10%;*/
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;
    /* 在父元素中 设置书写模式⇒ 针对内部两个块级 子元素*/
    /*writing-mode:horizontal-tb ;*/
    /*writing-mode: vertical-lr;*/
    /*writing-mode: vertical-rl;*/
    /*writing-mode: sideways-lr;!*Firefox中有效*!*/
    /*writing-mode: sideways-rl;!*Firefox中有效*!*/
}


/*诗歌的标题*/
.poemtitle{
    border: solid 5px lightseagreen;
    width: 15%;
    /*整个元素，在父元素中 居中摆放*/
    margin: 0 auto;
    /*设置字体: 字体大小和字体族 必须设置*/
    font: bold larger tohama,arial,"hiragigo sans gb",sans-serif;
    /*内容，在本元素中 居中*/
    text-align: center;
}

/*诗歌的内容*/
.poem {

    /* 仅设置本元素的 书写模式时，设置的宽高 */
    width: 20%;
    height: 110px;
    margin: 10px;
    border: dashed 5px lightskyblue;
    padding: 10px;
    font-weight: normal;
    letter-spacing: 1px;

    /*设置书写模式⇒ 针对本元素的文本内容*/
    /*writing-mode:horizontal-tb;*/
    /*writing-mode: vertical-lr;*/
    /*writing-mode: vertical-rl;*/
    /*writing-mode: sideways-lr;!*Firefox中有效*!*/
    /*writing-mode: sideways-rl;!*Firefox中有效*!*/
}

• 在 不含子元素的单个元素 .poem中设置的 书写模式

  • ① 主水平+换行上下: 先从左到右，再从上到下。

  • writing-mode:horizontal-tb;

    • 
• ② 主垂直+换行左右: 先从上到下，再从左到右。
  • writing-mode: vertical-lr;
    • 
• ③ 主垂直+换行右左: 先从上到下，再 从右到左。
  • writing-mode: vertical-rl;
    • 
• ④ 逆时针: 主垂直 + 换行左右 + 正向朝左
  • writing-mode: sideways-lr;/*Firefox中有效*/
  • 效果 和逆时针旋转后 很像。
    • 
• 顺时针: 主垂直 + 换行右左 + 正常朝右
  • writing-mode: sideways-rl;/*Firefox中有效*/
  • 效果 和顺时针旋转后 很像。
    • 

---

• ⑷ 书写模式的 浏览器支持
  • 

---

2. text-combine-upright 属性: 把字符组合在一起 放置在单个字符的空间 ( 垂直模式, 搭配 writing-mode 属性)

• ⑴ 把字符组合在一起 放置在单个字符的空间: text-combine-upright
  • ① 单个字符 宽度: 属性 将字符组合一起 放置在 单个字符的空间。
    • 单个字符宽度 = 1em以内: 如果组合的文本 宽度大于1em，则用户代理 必须把内容 调整为 1em内 。
      • 一个字符的空间 ⇒ 会随着 字体大小 font-size的值 增大和缩小。
  • ② 直立字形: 产生的组合物 被视为一个 单独的 用于布局和装饰的 直立字形。
  • ③ 适用元素:
    • ❶ 行内级 不可替换元素 。
    • 此属性 仅对 垂直书写模式 有影响。
      • ❷ writing-mode ≠ horizontal-tb的元素，其他的属性值 都是垂直类型的 书写模式，都有效。

---

• ⑵ 字符组合和放置 语法
  • text-combine-upright: none | all | [ digits ? ];

/* 关键字值 Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Digits 值 或 + 数字值  */
text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

---

• ⑶ 字符组合和放置 属性值
  • ① 无特殊处理(默认值): none
    • 没有特殊处理。
  • ② 全部放在 一个字符空间上: all
    • 试图 在水平方向 对框内的所有连续字符 进行排版，使它们在 框的垂直线内 (挤压在一起)，只占用 单个字符的空间。
    • ❶ 数字设置后,会变垂直放置，原本是侧倒 横着放的。
      • 
    • ❷ 两个汉字 ⇒ 会挤压在一起 占据一个字符的空间。
      • 
    • ❸ 4个数字 ⇒ 挤压在一起，占据 一个字符的空间。
      • 
  • ③ 指定字符数(2-4): digits ? (浏览器支持度 少)
    • 试图显示 一个连续的 ASCII 数字序列(U+ 0030-U +0039)。
      • 其字符数 = 指定的整数相同 或更少, 这样它就 占用了 垂直行框中 单个字符的空间。
    • 如果省略该整数，则计算结果为 2。
    • 2-4 范围之外的 整数无效。
  • ★ 继承性: 会被子元素 自动继承。
    • 红色 是子元素的子元素的内容 ⇒ 整体内容 会因为子元素 划分成几部分 ，文字太多的部分 挤压在一起 糊成一片了。
      • 

---

• 上图涉及的代码
• html

<div class="divcontainer">
    <h2 class="poemtitle">明日歌h2>
    <p class="poem">明日 <span class="digits">9span>复明日<span class="digits">10span>，<span class="digits">明日span>11何其多。

        我生待明日12，万事成蹉跎<span class="digits">2020span>。p>
div>

• css

/*设置 元素的包含块 */
.divcontainer {
    width: 40%;
    /*height: 10%;*/
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;
    /*测试直立字形的 可继承性: 会被子元素 自动继承*/
    text-combine-upright: all;
 }
/*诗歌的标题*/
.poemtitle{
    border: solid 5px lightseagreen;
    width: 15%;
    /*整个元素，在父元素中 居中摆放*/
    margin: 0 auto;
    /*设置字体: 字体大小和字体族 必须设置*/
    font: bold larger tohama,arial,"hiragigo sans gb",sans-serif;
    /*内容，在本元素中 居中*/
    text-align: center;
}

/*诗歌的内容*/
.poem {
    width: 50px;
    height: 210px;
    margin: 10px;
    border: dashed 5px lightskyblue;
    padding: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 5px auto;
    font: 1em Tahoma,Arial,"hiragigo sans gb" ,sans-serif;

    /*设置书写模式⇒ 针对本元素的文本内容  ⇒  设置组合字符的 前提*/
    /*writing-mode:horizontal-tb;*/
    writing-mode: vertical-lr;
}
.digits{
    /*字符组合 不设置的话 会自动继承 父元素的*/
    text-combine-upright: digits 2;/*浏览器 暂不支持*/
    text-combine-upright: all;
    color: red;
}

---

• ⑷ 组合字符和放置的 浏览器支持
  • 

---

3. text-orientation 属性: 设置 垂直行中 文本的方向 ( 垂直模式, 搭配 writing-mode 属性)

• ⑴ 设置 垂直行中 文本的方向: text-orientation，美 /ˌɔːriənˈteɪʃn/
  • 用于 控制使用 ❶ 垂直脚本的 语言的显示，制作 ❷ 垂直 表格标题。
  • 适用对象
    • 所有元素: ❶ 除了表的行组、行、列组和列之外的。
    • 它只影响 ❷ 垂直模式下的文本。
    • writing-mode ≠ horizontal-tb的元素，其他的属性值 都是垂直类型的 书写模式，都有效。

---

• ⑵ 垂直行中 文本方向的 语法
  • text-orientation: mixed | upright | sideways;

/* 关键字值 Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
text-orientation: sideways-right;/*sideways的别名，浏览器不支持*/
text-orientation: use-glyph-orientation;/*目前是无效值，无浏览器支持*/

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

---

• ⑶ 垂直行中 文本方向的 属性值
  • ① 根据文字类型 安排方向(默认值): mixed
    • 将水平字体的字符 顺时针 旋转 90°。自然地安排垂直脚本的字符。
      • ❶ 中文 ⇒ 从上往下的 正着放的。
      • ❷ 英文和数字 ⇒ 顺时针90°，文本的正方向 朝向右。
      • 
  • ② 英文数字 全部直立 朝上: upright
    • 自然地安排 水平文字的字符(垂直)，以及 垂直文字的字形。
    • 这个关键字会导致所有字符都被认为是从左到右的: 强制direction ＝ ltr.
      • 英文和数字,一个字符占一个位置 ⇒ 全部直立起来了。
      • 
  • ③ 顺时针90° 全部 朝向右: sideways
    • 使字符水平排列，但整行 顺时针旋转90°。
    • 
  • 别名: sideways-right (无浏览器支持)
    • 为兼容性目的而保留的sideways的别名。
  • 使用字形方向: use-glyph-orientation (无浏览器支持)
    • 在SVG元素上，这个关键字 导致使用 不赞成的 SVG 属性的值，glyph-orientation-vertical，glyph-orientation-horizontal。

---

• 上图涉及的代码
• html

<div class="divcontainer">
    <h2 class="poemtitle">明日歌h2>
    <p class="poem">明日 tomorrow 9 复明日10，明日11何其多。

        我生待明日12，万事成蹉跎2099。p>
div>

• css

/*诗歌的内容*/
.poem {
    width: 20%;
    height: 210px;
    margin: 10px;
    border: dashed 5px lightskyblue;
    padding: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 5px auto;
    font: 1em Tahoma,Arial,"hiragigo sans gb" ,sans-serif;

    /*设置书写模式⇒ 针对本元素的文本内容*/
    /*writing-mode:horizontal-tb;*/
    writing-mode: vertical-lr;
    /*writing-mode: vertical-rl;*/
    /*writing-mode: sideways-lr;!*Firefox中有效*!*/
    /*writing-mode: sideways-rl;!*Firefox中有效*!*/

    /*设置 垂直行中 文字的方向*/
    /*text-orientation: mixed;*/
    /*text-orientation: upright;*/
    text-orientation: sideways;
    /*text-orientation: sideways-right;!*sideways的别名，浏览器不支持*!*/
    /*text-orientation: use-glyph-orientation;!*目前是无效值，无浏览器支持*!*/
}

---

• ⑷ 垂直行中的 文本方向的 浏览器支持
  • 浏览器前缀: webkit-
  • 

---

♣ 结束语 和 友情链接

• 参考文档
  • MDN CSS 教程
  • CSS Writing Modes | MDN

---

• 友情链接
  • 【CSS 单位 (详细介绍)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103494139
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！