【CSS 书写模式 (Writing modes )】

最新推荐文章于 2024-05-03 12:12:21 发布

Hey_Coder

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量990

点赞数

分类专栏：【CSS】文章标签：模式writing-mode 字符组合属性文本方向 css css3

本文链接：https://blog.csdn.net/VickyTsai/article/details/103494139

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

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>

/*设置 元素的包含块 */
.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 <integer>? ];

/* 关键字值 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 <integer>? (浏览器支持度少)
  - 试图显示一个连续的 ASCII 数字序列(U+ 0030-U +0039)。
    - 其字符数 = 指定的整数相同或更少, 这样它就占用了垂直行框中单个字符的空间。
  - 如果省略该整数，则计算结果为 2。
  - 2-4 范围之外的整数无效。
- ★ 继承性: 会被子元素自动继承。
  - 红色是子元素的子元素的内容 ⇒ 整体内容会因为子元素划分成几部分，文字太多的部分挤压在一起糊成一片了。

上图涉及的代码
html

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

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

/*设置 元素的包含块 */
.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>

/*诗歌的内容*/
.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
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

在这里插入图片描述

Hey_Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS 书写模式 (Writing modes )】

CSS 书写模式 Writing modes1. writing-mode 属性: 设置元素的书写模式(块流方向 +内联级内容/文本主流动方向 )2. text-combine-upright 属性: 把字符组合在一起放置在单个字符的空间 ( 垂直模式, 搭配 writing-mode 属性)3. text-orientation 属性: 设置垂直行中文本的方向 ( 垂直模式, 搭配 writing-mode 属性)♣ 结束语和友情链接
复制链接

扫一扫