Текст-комбиновати-усправно - ЦСС-трикови

text-combine-uprightЦСС имовина комбинује карактере у простор једног карактера. Спецификација ову композицију назива „хоризонтално у вертикалном“, што је леп начин за опис случаја употребе: ситуације у којима ће вам можда требати неки знакови у вертикалном режиму писања за хоризонтално приказивање у истој линији.

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 ?: Све узастопне АСЦИИ цифре у вертикалном оквиру са садржајем приказују се хоризонтално у истој линији, заузимајући простор једног знака у вертикалном пољу, до наведеног целог броја. Ако ниједан цео број није одређен, тада су подразумеване 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вредност.

ИЕ	Ивица	Фирефок	Хром	Сафари	Опера
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Андроид Цхроме	Андроид Фирефок	Андроид претраживач	иОС Сафари	Опера Мобиле
86+	82 + ²	81+	5 + ³	59+

Извор: каниус

Користи нестандардни назив: -ms-text-combine-horizontal
Препознаје digitsвредност иза layout.css.text-combine-upright-digits.enabledексперименталне заставе, али још увек не примењује подршку за распоред за тате-цху-иоко
Користи нестандардни назив: -webkit-text-combine