Text-kombinovat-svisle - Triky CSS

Vlastnost text-combine-uprightCSS kombinuje znaky do prostoru jednoho znaku. Specifikace nazývá tuto kompozici „vodorovně-svisle“, což je pěkný způsob, jak popsat případ použití: situace, kdy budete potřebovat, aby se některé znaky v režimu svislého psaní zobrazovaly vodorovně na stejném řádku.

span ( text-combine-upright: all; )

Technika horizontálního textu ve vertikálním textu je japonská metoda zvaná tate-chū-yoko. Vypadá to takto:

Při práci se svislým režimem psaní zleva doprava ( `writing-mode: vertical-rl;`), jako je levá strana tohoto obrázku, může `text-combine-upright`vlastnost trvat více znaků a zobrazit je vodorovně, což v zásadě dělí prostor znaků na stejné části podle toho, kolik znaků je vybráno. V tomto příkladu ukazuje pravá strana dva znaky sdílející stejný znakový prostor uvnitř režimu svislého psaní.

Syntax

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

Počáteční hodnota: none
Platí pro: nevyměněné vložené prvky
Zděděno: ano
Procenta: n / a
Vypočítaná hodnota: zadané klíčové slovo plus celé číslo, pokuddigits
Typ animace: nelze animovat

Hodnoty

text-combine-upright přijímá následující hodnoty:

none: Toto je počáteční hodnota. Ve vertikálním režimu psaní se vodorovně nezobrazují žádné znaky.
all: Všechny po sobě následující typografické znaky ve svislém rámečku obsahujícím se zobrazují vodorovně na stejném řádku, přičemž zabírají prostor jednoho znaku ve svislém rámečku.
digits ?: Všechny po sobě jdoucí číslice ASCII ve vertikálním poli obsahujícím se zobrazují vodorovně na stejném řádku, přičemž zabírají prostor jednoho znaku ve vertikálním poli, až do zadaného celého čísla. Pokud není celé číslo konkrétní, pak je výchozí hodnota 2 číslice. Cokoli pod 2 a nad 4 jsou neplatné.

/* 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;

Používání

Řekněme, že si vezmeme příklad, který je přímo ze specifikace, což je prvek s režimem vertikálního psaní.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Dobře, chceme, aby se čísla v datu zobrazovala vodorovně. Je logické předpokládat, že přidání text-combine-uprightpřímo na prvek bude stačit:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, ne tolik. V době psaní tohoto článku musíme použít vlastnost na samotných číslicích, aby to fungovalo. Rozpětí bude stačit.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Tam jedeme!

Podpora prohlížeče

Jak jsme právě viděli v příkladu, podpora prohlížeče je v tuto chvíli trochu rozptýlená. I když mnoho prohlížečů nabízí alespoň částečnou podporu text-combine-upright, pro tuto digitshodnotu existuje mnohem menší podpora než pro tuto allhodnotu.

TJ	Okraj	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Prohlížeč Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Zdroj: caniuse

Používá nestandardní název: -ms-text-combine-horizontal
Rozpozná digitshodnotu za layout.css.text-combine-upright-digits.enabledexperimentálním příznakem, ale zatím neimplementuje podporu rozložení pro tate-chū-yoko
Používá nestandardní název: -webkit-text-combine