Besedilo-kombiniraj-pokončno - CSS-triki

Lastnost text-combine-uprightCSS združuje znake v prostor enega znaka. Spec imenuje to sestavo »vodoravno v navpičnem položaju«, kar je dober način za opis primera uporabe: situacije, ko boste morda potrebovali nekaj znakov v načinu navpičnega pisanja, da se vodoravno prikažejo v isti vrstici.

span ( text-combine-upright: all; )

Tehnika vodoravnega besedila v navpičnem besedilu je japonska, imenovana tate-chū-yoko. Takole izgleda:

Pri delu z navpičnim načinom pisanja od leve proti desni ( `writing-mode: vertical-rl;`), tako kot na levi strani te ilustracije, lahko `text-combine-upright`lastnost zajema več znakov in jih prikaže vodoravno, v bistvu pa razdeli prostor znakov na enake dele glede na to, koliko znakov je izbranih. V tem primeru desna stran prikazuje dva znaka, ki si delita isti prostor znakov znotraj načina navpičnega pisanja.

Sintaksa

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

Začetna vrednost: none
Velja za: neizmenjene vstavljene elemente
Podedovano: da
Odstotki: n / a
Izračunana vrednost: določena ključna beseda plus celo število, čedigits
Vrsta animacije: ni animirana

Vrednote

text-combine-upright sprejema naslednje vrednosti:

none: To je začetna vrednost. V navpičnem načinu pisanja se noben znak ne prikaže vodoravno.
all: Vsi zaporedni tipografski znaki v navpičnem polju, ki vsebuje, so prikazani vodoravno v isti vrstici in zavzamejo prostor enega samega znaka v navpičnem polju.
digits ?: Vse zaporedne številke ASCII v navpičnem polju, ki vsebuje, so prikazane vodoravno v isti vrstici, pri čemer zavzamejo prostor enega znaka v navpičnem polju do navedenega celotnega števila. Če nobeno celo število ni natančno, je privzeta 2 števki. Vse pod 2 in nad 4 je neveljavno.

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

Uporaba

Recimo, da vzamemo primer, ki je naravnost iz specifikacije, ki je element z navpičnim načinom pisanja.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

V redu, želimo, da so številke v datumu prikazane vodoravno. Logično je domnevati, da bo dodajanje text-combine-uprightneposredno na element naredilo trik:

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

Buuuuut, ne toliko. V času pisanja moramo lastnost uporabiti na samih številkah, da bo to delovalo. Dovolj bo razpon.

平成20年4月16日に

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

No pa gremo!

Podpora brskalnika

Kot smo pravkar videli v primeru, je podpora brskalnika trenutno nekoliko razpršena. Medtem ko mnogi brskalniki ponujajo vsaj delno podporo za text-combine-upright, je veliko manj podpore za digitsvrednost kot za allvrednost.

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

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

Vir: kanius

Uporablja nestandardno ime: -ms-text-combine-horizontal
Prepozna digitsvrednost layout.css.text-combine-upright-digits.enabledeksperimentalne zastave, vendar še ne izvaja podpore za postavitev za tate-chū-yoko
Uporablja nestandardno ime: -webkit-text-combine