Kombinovať text-zvisle - Triky CSS

Vlastnosť text-combine-uprightCSS kombinuje znaky do priestoru jedného znaku. Špecifikácia nazýva túto kompozíciu „vodorovne-zvisle“, čo je pekný spôsob, ako opísať prípad použitia: situácie, keď budete potrebovať niektoré znaky v režime zvislého písania, aby sa zobrazili vodorovne na rovnakom riadku.

span ( text-combine-upright: all; )

Technika horizontálneho textu vo vertikálnom texte je japonská metóda zvaná tate-chū-yoko. Vyzerá to takto:

Pri práci s vertikálnym režimom písania zľava doprava ( `writing-mode: vertical-rl;`), podobne ako ľavá strana tohto obrázka, `text-combine-upright`môže vlastnosť obsahovať viac znakov a zobraziť ich vodorovne, čím v podstate rozdelí znakový priestor na rovnaké časti podľa toho, koľko znakov je vybratých. V tomto príklade pravá strana zobrazuje dva znaky zdieľajúce rovnaký priestor znakov vo vnútri režimu vertikálneho písania.

Syntax

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

Pôvodná hodnota: none
Platí pre: nevymenené vložené prvky
Zdedené: áno
Percentá: n / a
Vypočítaná hodnota: zadané kľúčové slovo plus celé číslo, akdigits
Typ animácie: nie je animovateľný

Hodnoty

text-combine-upright akceptuje nasledujúce hodnoty:

none: Toto je počiatočná hodnota. V režime zvislého písania sa vodorovne nezobrazujú žiadne znaky.
all: Všetky po sebe nasledujúce typografické znaky vo vertikálnom poli obsahujúcom sú zobrazené vodorovne na rovnakom riadku, pričom zaberajú priestor jedného znaku vo vertikálnom poli.
digits ?: Všetky nasledujúce číslice ASCII vo vertikálnom poli obsahujúcom sú zobrazené vodorovne na rovnakom riadku, pričom zaberajú priestor jedného znaku vo vertikálnom poli, a to až do zadaného celého čísla. Ak nie je celé číslo konkrétne, predvolená hodnota je 2 číslice. Čokoľvek pod 2 a nad 4 je 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;

Využitie

Povedzme, že si vezmeme príklad, ktorý je priamo zo špecifikácie, čo je prvok s režimom vertikálneho písania.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Dobre, chceme, aby sa čísla v dátume zobrazovali vodorovne. Je logické predpokladať, že pridanie text-combine-uprightpriamo do prvku spôsobí tento trik:

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

Buuuuut, toľko nie. V čase písania tohto článku musíme použiť vlastnosť na samotných čísliciach, aby to fungovalo. Bude to trvať.

平成20年4月16日に

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

Ideme na to!

Podpora prehliadača

Ako sme videli v príklade, podpora prehliadačov je v súčasnosti trochu rozptýlená. Aj keď mnoho prehľadávačov ponúka aspoň čiastočnú podporu text-combine-upright, pre túto digitshodnotu existuje oveľa menšia podpora ako pre túto allhodnotu.

IE	Hrana	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Prehliadač Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Zdroj: caniuse

Používa neštandardný názov: -ms-text-combine-horizontal
Rozpoznáva digitshodnotu za layout.css.text-combine-upright-digits.enabledexperimentálnym príznakom, ale zatiaľ neimplementuje podporu rozloženia pre tate-chū-yoko
Používa neštandardný názov: -webkit-text-combine