Текст-комбинирай-изправен - CSS-трикове

В text-combine-uprightCSS Имотът съчетава символи в пространството на един знак. Спецификацията нарича тази композиция „хоризонтално във вертикално“, което е добър начин да се опише случаят на употреба: ситуации, при които може да са ви необходими някои символи във вертикален режим на писане, за да се покажат хоризонтално на същия ред.

span ( text-combine-upright: all; )

Техниката на хоризонталния текст във вертикалния текст е японска, наречена tate-chū-yoko. Ето как изглежда това:

Когато работите с вертикален режим на писане отляво надясно ( `writing-mode: vertical-rl;`), подобно на лявата страна на тази илюстрация, `text-combine-upright`свойството може да приема множество символи и да ги показва хоризонтално, като по същество разделя пространството от символи на равни части според броя на избраните символи. В този пример дясната страна показва два знака, които споделят едно и също пространство от символи във вертикален режим на писане.

Синтаксис

text-combine-upright: none | all | ( digits ? )

Начална стойност: none
Прилага се за: незаменени вградени елементи
Наследен: да
Проценти: n / a
Изчислена стойност: посочена ключова дума, плюс цяло число, ако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	Ръб, край	Firefox	Chrome	Сафари	Опера
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android Chrome	Android Firefox	Браузър за Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Източник: caniuse

Използва нестандартното име: -ms-text-combine-horizontal
Разпознава digitsстойността зад layout.css.text-combine-upright-digits.enabledексперименталния флаг, но все още не прилага поддръжка за оформление за tate-chū-yoko
Използва нестандартното име: -webkit-text-combine