Свойство text-combine-uprightCSS объединяет символы в пространство одного символа. Спецификация называет эту композицию «горизонтально-вертикально», что является хорошим способом описания варианта использования: ситуаций, когда вам могут потребоваться некоторые символы в режиме вертикального письма для отображения по горизонтали на той же строке.
span ( text-combine-upright: all; )Техника горизонтального текста в вертикальном тексте - это японская техника, называемая татэ-тю-ёко. Вот как это выглядит:
writing-mode: vertical-rl;), как в левой части этой иллюстрации, text-combine-uprightсвойство может принимать несколько символов и отображать их по горизонтали, по существу разделяя пространство символов на равные части в зависимости от того, сколько символов выбрано. В этом примере с правой стороны показаны два символа, использующие одно и то же пространство символов внутри режима вертикального письма.
Синтаксис
text-combine-upright: none | all | ( digits ? )- Первоначальный значение:
none - Применимо к: незамещенным встроенным элементам
- Унаследовано: да
- Проценты: н / д
- Вычисленное значение: указанное ключевое слово, плюс целое число, если
digits - Тип анимации: без анимации
Значения
text-combine-upright принимает следующие значения:
none: Это начальное значение. В режиме вертикального письма символы не отображаются по горизонтали.all: Все последовательные типографские символы в вертикальном содержащем поле отображаются горизонтально на одной строке, занимая пространство одного символа в вертикальном поле.digits ?: Все последовательные цифры 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;использование
Допустим, мы берем пример прямо из спецификации, который представляет собой элемент с режимом вертикального письма.
平成20年4月16日にdate ( writing-mode: vertical-lr; )Хорошо, мы хотим, чтобы числа в дате отображались горизонтально. Логично предположить, что добавление text-combine-uprightнепосредственно к элементу поможет:
date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )Бууууут, не так уж и много. На момент написания нам нужно применить свойство к самим цифрам, чтобы это работало. Подойдет и пролет.
平成20年4月16日にdate ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )Ну вот!
Поддержка браузера
Как мы только что видели в примере, поддержка браузеров на данный момент немного разбросана. Хотя многие браузеры предлагают хотя бы частичную поддержку, для значения text-combine-uprightгораздо меньше поддержки, digitsчем для allзначения.
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| 11¹ | 12 + ¹ | 48 + ² | 48+ | 5.1 + ³ | 35+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 86+ | 82 + ² | 81+ | 5 + ³ | 59+ |
- Использует нестандартное название:
-ms-text-combine-horizontal - Признает
digitsценностьlayout.css.text-combine-upright-digits.enabledэкспериментального флага, но еще не реализует поддержку макета для татэ-тю-ёко - Использует нестандартное название:
-webkit-text-combine
Технические характеристики
- CSS Writing Modes Level 4 (черновик редакции)
Связанные свойства
Альманах на 5 января 2021 г.направление
.element ( direction: rtl; ) 
Альманах Джвахир Сундаи на 5 января 2021 г.
режим письма
.element ( writing-mode: vertical-rl; ) 
Робин Рендл