你不知道的CSS—writing-mode

d邓会杰
1,634 阅读4分钟

#前言

CSS Writing Modes，是为了支持国际上各种书写模式，例如从左到右的拉丁语和印度语，从右到左的希伯来语和阿拉伯语，双向的混合拉丁语和阿拉伯语和垂直的亚洲文本。

CSS书写模式由inline base direction 和 block flow direction这两个概念决定 的。

  • inline base direction是指行内文本的书写方向，水平书写或垂直书写。
  • block flow direction是指块（行）的堆叠方向。行与行之间从上到下、从左到右或从右到左排列。

该图展示了拉丁语的书写模式，行内水平书写，行间从上到下排列。 image.png

该图展示了蒙古语的书写模式，行内是垂直书写，行间是自左向右排列。 image.png

该图展示了汉语系的两种书写模式，现代汉语是行内自左向右书写，行间是从上到下排列。古汉语书写模式是行内垂直书写，行间自右向左排列。

image.png

在css中writing mode书写模式是由writing-mode,direction,和text-orientation属性决定。下面分别介绍这三种属性。

# 书写模型 | writing-mode

writing-modeCSS属性定义文本行是否水平或垂直布置以及块扩展的方向。

writing-mode取值 horizontal-tb| vertical-rl|vertical-lr

  • horizontal-tb——内容按从左到右水平从上到下垂直流动。
  • vertical-rl——内容按从上到下垂直流动，水平从右到左。
  • vertical-lr——内容按从上到下垂直流动，水平从左到右。

image.png

# 方向 | direction

direction 属性指定了内联块display:inline-block顺序。

direction属性取值ltr|rtl

  • ltr——内联元素是从左往右依次排布,比方说前后两个图片，DOM在前的就显示在左边。
  • rtl——内联内容是从右往左依次排布的，比方说前后两个图片，DOM在前的就显示在右边。

image.png image.png

# 文字方向 | text-orientation

定义行内文本字符的方向。此属性仅在垂直模式(writing-mode:vertical-rl|vertical-lr)下有效。

text-orientation属性取值mixed | upright | sideways

  • mixed——将水平脚本的字符旋转90°。
  • upright——自然地表现（竖直）水平脚本的字符以及垂直脚本的字形。
  • sideways——使字符按照水平放置的方式布置， image.png

# 文本竖排组合|text-combine-upright

是将多个字符组合到单个字符的空间中，如果组合文本宽于1em，则用户代理必须调整到1em内的内容。所得到的组合物被视为用于布局和装饰的单个直立字形。此属性仅在垂直模式下有效。

text-combine-upright取值none | all | [ digits <integer>? ]

  • none——没有特别的处理。
  • all ——尝试将水平方框内的所有连续字符排版，以便它们占据框的垂直线内的单个字符的空间。
  • digits <integer>? --尝试显示一个连续的ASCII数字（U + 0030-U + 0039）。该数字与指定的整数具有相同或更少的字符数目，从而占用垂直线框内单个字符的空间。如果省略整数，则计算出的值最大为2。范围之外的整数是无效的。（该属性兼容性不好，仅IE支持）

image.png image.png

# 实例应用

沁园春雪垂直排版

image.png

  1. 设置书写模式为垂直书写，从右向左排列。
 writing-mode: vertical-rl;
  1. 将1936作为一个字符水平展示。
.combine{
  text-combine-upright: all;
}
<span class="combine">1936</span>
  1. 在垂直模式中，字母或者数字会旋转90度展示，将其转换成水平展示
.orientation{
  text-orientation: upright;
}
<span class="orientation">2</span>

源码地址：codepen.io/denghuijie/…

direction属性可以方便的控制居中按钮顺序

.button-group{
    direction: rtl;
    text-align: center;
}
<div class="button-group">
    <button>确定</button>
    <button>取消</button>
</div>

image.png image.png

#总结

本文介绍了关于CSS排版的四个属性

  • writing-mode 定义行内文本的书写方向，以及行的堆叠方向。取值 horizontal-tb| vertical-rl|vertical-lr
  • direction 属性指定了内联块display:inline-block顺序。取值ltr|rtl
  • text-orientation 定义了在垂直模式下，行内文本字符的方向。取值mixed | upright | sideways
  • text-combine-upright在垂直模式下，是将多个字符组合到单个字符的空间中。取值none | all | [ digits <integer>? ]

参考链接：

www.zhangxinxu.com/study/20160… drafts.csswg.org/css-writing… developer.mozilla.org/en-US/docs/…

avatar
文章
阅读
粉丝