Tekst-kombiniraj-uspravno - CSS-trikovi

text-combine-uprightCSS svojstvo kombinira znakove u prostor jednog lika. Specifikacija naziva ovaj sastav "vodoravno u okomitom položaju", što je lijep način za opis slučaja upotrebe: situacije u kojima će vam trebati neki znakovi u vertikalnom načinu pisanja za vodoravno prikazivanje u istoj liniji.

span ( text-combine-upright: all; )

Tehnika vodoravnog teksta u vertikalnom tekstu je japanska koja se naziva tate-chū-yoko. Evo kako to izgleda:

Kada radite s vertikalnim načinom pisanja slijeva udesno ( `writing-mode: vertical-rl;`), poput lijeve strane ove ilustracije, `text-combine-upright`svojstvo može uzeti više znakova i prikazati ih vodoravno, u osnovi dijeleći prostor znakova na jednake dijelove prema broju odabranih znakova. U ovom primjeru, desna strana prikazuje dva znaka koja dijele isti prostor znakova unutar vertikalnog načina pisanja.

Sintaksa

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

Početna vrijednost: none
Primjenjuje se na: nezamijenjene inline elemente
Naslijeđeno: da
Postoci: n / a
Izračunata vrijednost: navedena ključna riječ, plus cijeli broj akodigits
Vrsta animacije: nije animirana

Vrijednosti

text-combine-upright prihvaća sljedeće vrijednosti:

none: Ovo je početna vrijednost. Nijedan se znak ne prikazuje vodoravno u vertikalnom načinu pisanja.
all: Svi uzastopni tipografski znakovi u okomitom okviru koji sadrži prikazani su vodoravno u istoj liniji, zauzimajući prostor jednog znaka u okomitom okviru.
digits ?: Sve uzastopne ASCII znamenke u okomitom okviru koji sadrži prikazane su vodoravno na istoj liniji, zauzimajući prostor jednog znaka u okomitom okviru, do navedenog cijelog broja. Ako nijedan cijeli broj nije specifičan, tada su zadane 2 znamenke. Sve ispod 2 i iznad 4 su nevaljane.

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

Upotreba

Recimo da uzmemo primjer koji je izravno iz specifikacije, koja je element s vertikalnim načinom pisanja.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

U redu, želimo da se brojevi u datumu prikazuju vodoravno. Logično je pretpostaviti da će dodavanje text-combine-uprightizravno na element učiniti trik:

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

Buuuuut, ne toliko. U vrijeme pisanja ovog članka, svojstvo moramo primijeniti na same znamenke da bi to uspjelo. Dovoljan će biti raspon.

平成20年4月16日に

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

Idemo tamo!

Podrška preglednika

Kao što smo upravo vidjeli u primjeru, podrška za preglednik trenutno je malo raspršena. Iako mnogi preglednici nude barem djelomičnu podršku za text-combine-upright, za digitsvrijednost postoji puno manje podrške nego za allvrijednost.

IE	Rub	Firefox	Krom	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

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

Izvor: caniuse

Koristi nestandardni naziv: -ms-text-combine-horizontal
Prepoznaje digitsvrijednost iza layout.css.text-combine-upright-digits.enabledeksperimentalne zastave, ali još uvijek ne implementira podršku za izgled za tate-chū-yoko
Koristi nestandardni naziv: -webkit-text-combine