Text-combine-vertical - CSS-gudrybės

text-combine-uprightCSS nuosavybė jungia raides į vieną simbolį erdvėje. Specifikacija vadina šią „horizontaliai vertikaliai“ kompoziciją, kuri yra puikus būdas apibūdinti naudojimo atvejį: situacijos, kai jums gali prireikti kai kurių simbolių vertikalaus rašymo režimu, kad jie būtų rodomi horizontaliai toje pačioje eilutėje.

span ( text-combine-upright: all; )

Vertikaliame tekste horizontalaus teksto technika yra japonų, vadinama tate-chū-yoko. Štai kaip tai atrodo:

Dirbant su vertikaliu rašymo iš kairės į dešinę režimu ( `writing-mode: vertical-rl;`), kaip ir kairė šios iliustracijos pusė, `text-combine-upright`ypatybė gali užimti kelis simbolius ir juos rodyti horizontaliai, iš esmės suskaidydama simbolių erdvę į lygias dalis pagal tai, kiek simbolių pasirinkta. Šiame pavyzdyje dešinėje pusėje rodomi du simboliai, turintys tą pačią simbolių erdvę vertikalaus rašymo režimo viduje.

Sintaksė

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

Pradinė vertė: none
Taikoma: nepakeistiems įterptiniams elementams
Paveldima: taip
Procentai: nėra
Apskaičiuota vertė: nurodytas raktinis žodis, plius sveikasis skaičius, jeidigits
Animacijos tipas: nėra animacinis

Vertybės

text-combine-upright priima šias vertes:

none: Tai yra pradinė vertė. Vertikalaus rašymo režimu simboliai nerodomi horizontaliai.
all: Visi vienas po kito einantys tipografiniai simboliai, esantys vertikaliame langelyje, rodomi horizontaliai toje pačioje eilutėje, užimant vieno simbolio vietą vertikalioje dėžutėje.
digits ?: Visi vienas po kito einantys ASCII skaitmenys vertikalioje langelyje rodomi horizontaliai toje pačioje eilutėje, užimant vieno simbolio vietą vertikalioje dėžutėje iki nurodyto sveiko skaičiaus. Jei joks sveikas skaičius nėra konkretus, tada numatytasis yra 2 skaitmenys. Viskas, kas yra žemiau 2 ir daugiau nei 4, yra neteisinga.

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

Naudojimas

Tarkime, kad mes paimame pavyzdį, kuris yra tiesiai iš specifikacijos, kuri yra elementas su vertikaliu rašymo režimu.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Gerai, mes norime, kad datos skaičiai būtų rodomi horizontaliai. Logiška manyti, kad pridėjus text-combine-uprighttiesiai prie elemento bus apgauti:

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

Buuuuut, ne tiek. Rašymo metu turime pritaikyti nuosavybę ant pačių skaitmenų, kad tai veiktų. Tiks span.

平成20年4月16日に

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

Štai mes einame!

Naršyklės palaikymas

Kaip ką tik matėme pavyzdyje, naršyklės palaikymas šiuo metu yra šiek tiek išsibarstęs. Nors daugelis naršyklių siūlo bent dalinį palaikymą text-combine-upright, digitsvertę palaiko daug mažiau nei allvertę.

T.Y	Briauna	„Firefox“	„Chrome“	„Safari“	Opera
11¹	12 + 1	48 + ²	48+	5,1 + ³	35+

„Android Chrome“	„Android Firefox“	„Android“ naršyklė	„iOS Safari“	„Opera Mobile“
86+	82 + ²	81+	5 + 3	59+

Šaltinis: caniuse

Naudojamas nestandartinis pavadinimas: -ms-text-combine-horizontal
Pripažįsta eksperimentinės vėliavos digitsvertę layout.css.text-combine-upright-digits.enabled, tačiau dar neįdiegia „tate-chū-yoko“ išdėstymo palaikymo
Naudojamas nestandartinis pavadinimas: -webkit-text-combine