【CSS 书写模式 (Writing modes )】

CSS 书写模式 Writing modes

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

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

【CSS 书写模式 (Writing modes )】相关推荐

浏览器渲染原理及css书写顺序
文章目录浏览器内核浏览器主要组件结构: 浏览器功能浏览器的渲染流程 css书写顺序注意浏览器内核 (1)Trident内核,由于被微软采用,并得益于微软操作系统的普及,以前几乎一统天下,所以 ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
来自Mozilla的CSS书写规范建议
一个来自Mozilla的CSS书写规范建议,希望对大家有帮助引用内容 //显示属性 display list-style position float clear //自身属性 width heig ...
推荐大家使用的CSS书写规范、顺序
推荐大家使用的CSS书写规范.顺序 CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, ...
（转）CSS书写规范、顺序
原文地址写了这么久的Css,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及 ...
css书写规范、行高
css书写规范: 空格规范: 选择器与花括号{之间必须包含空格,属性冒号:后面和属性值必须包含空格 .text {font-size: 16px;} 选择器规范: 当有多个选择器同时出现时,每个选择器 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
css书写顺序规范---规范书写很重要
css书写顺序规范顺序常用属性 1.位置属性 position left top right bottom z-index display float overflow clear 2.宽高间隔 ...
html中怎样写css路径,CSS 书写位置
CSS的样式书写位置 css的样式书写位置常用的有三种: 行内样式(内联样式) style标签外部样式(link标签) 行内样式 css书写位置生当作人杰,死亦为鬼雄至今思项羽,不肯过江东将样 ...
html字体自动放大,让用户自己控制网页字体的大小的css书写方法
让用户自己控制网页字体的大小的css书写方法更新时间:2007年09月18日 20:31:41 作者: 现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是 ...

【CSS 书写模式 (Writing modes )】

CSS 书写模式 Writing modes

CSS 书写模式 Writing modes

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

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

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

♣ 结束语和友情链接

【CSS 书写模式 (Writing modes )】相关推荐

最新文章

热门文章

【CSS 书写模式 (Writing modes )】

CSS 书写模式 Writing modes

CSS 书写模式 Writing modes

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

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

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

♣ 结束语 和 友情链接

【CSS 书写模式 (Writing modes )】相关推荐

最新文章

热门文章

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

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

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

♣ 结束语和友情链接