text-combine-upright

text-combine-upright CSS 属性将字符合并到一个字符的空间中。规范称之为 “水平垂直”组合，这是对用例的很好描述：您可能需要一些字符在垂直书写模式下以水平方式显示在同一行上的情况。

span {
  text-combine-upright: all;
}

垂直文字中水平文字的技术是日本的一种技术，称为tate-chū-yoko。以下是它的外观

语法

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

• 初始值: none
• 应用于: 非替换内联元素
• 继承: 是的
• 百分比: 不适用
• 计算值: 指定关键字，如果digits则加整数
• 动画类型: 不可动画

值

text-combine-upright 接受以下值

• none: 这是初始值。在垂直书写模式下，不会以水平方式显示任何字符。
• all: 垂直包含框中所有连续的排版字符都以水平方式显示在同一行上，占用垂直框中单个字符的空间。
• digits <integer>?: 垂直包含框中所有连续的 ASCII 数字都以水平方式显示在同一行上，占用垂直框中单个字符的空间，最多为指定的整数。如果未指定整数，则默认值为 2 个数字。任何低于 2 或高于 4 的数字都是无效的。

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Digits values */
text-combine-upright: digits; /* 2 digits */
text-combine-upright: digits 4; /* 4 digits */

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

用法

假设我们采用 规范中的示例，即带有垂直书写模式的<date> 元素。

<date>平成20年4月16日に</date>

date {
  writing-mode: vertical-lr;
}

好的，我们希望日期中的数字以水平方式显示。合乎逻辑地假设，直接在元素上添加text-combine-upright 将解决问题。

date {
  text-combine-upright: digits 2; /* 👎 */
  writing-mode: vertical-lr;
}

但是，并非如此。在撰写本文时，我们需要将属性应用于数字本身才能使它起作用。可以使用 span 元素。

<date>平成<span>20</span>年<span>4</span>月<span>16</span>日に</date>

date {
  writing-mode: vertical-lr;
}

span {
  text-combine-upright: digits 2;
}

这样就可以了！

浏览器支持

正如我们在示例中看到的，目前浏览器的支持有些零散。虽然许多浏览器至少提供对text-combine-upright 的部分支持，但 对digits 值的支持远不如对all 值的支持。

IE	Edge	Firefox	Chrome	Safari	Opera
11¹	12+¹	48+²	48+	5.1+³	35+

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
86+	82+²	81+	5+³	59+

规范

• CSS 书写模式级别 4（编辑草案）

相关属性