Teksts-apvienot-vertikāli - CSS-triki

text-combine-uprightCSS īpašuma apvieno rakstzīmes telpā vienu rakstzīmi. Specifikācija sauc šo kompozīciju “horizontāli vertikāli”, kas ir jauks veids, kā aprakstīt lietošanas gadījumu: situācijas, kad jums var būt nepieciešamas dažas rakstzīmes vertikālā rakstīšanas režīmā, lai tās parādītu horizontāli vienā un tajā pašā līnijā.

span ( text-combine-upright: all; )

Vertikālā teksta horizontālā teksta tehnika ir japāņu, ko sauc par tate-chū-yoko. Lūk, kā tas izskatās:

Strādājot ar vertikālu rakstīšanas režīmu `writing-mode: vertical-rl;`no kreisās uz labo pusi ( ), tāpat kā šīs ilustrācijas kreiso pusi, `text-combine-upright`rekvizīts var aizņemt vairākas rakstzīmes un parādīt tās horizontāli, būtībā sadalot rakstzīmju telpu vienādās daļās atbilstoši izvēlēto rakstzīmju skaitam. Šajā piemērā labajā pusē ir redzamas divas rakstzīmes, kurām vertikālās rakstīšanas režīmā ir viena un tā pati rakstzīmju telpa.

Sintakse

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

Sākotnējā vērtība: none
Attiecas uz: neaizstātiem rindas elementiem
Mantots: jā
Procenti: n / a
Aprēķinātā vērtība: norādītais atslēgvārds, plus vesels skaitlis, jadigits
Animācijas veids: nav animējams

Vērtības

text-combine-upright pieņem šādas vērtības:

none: Šī ir sākotnējā vērtība. Vertikālās rakstīšanas režīmā neviena rakstzīme netiek parādīta horizontāli.
all: Visas secīgās tipogrāfiskās rakstzīmes vertikālajā saturošajā lodziņā tiek rādītas horizontāli vienā un tajā pašā rindā, vertikālajā lodziņā aizņemot vienu rakstzīmi.
digits ?: Visi secīgie ASCII cipari vertikālajā saturošajā lodziņā tiek parādīti horizontāli vienā un tajā pašā rindā, vertikālajā lodziņā aizņemot vienu rakstzīmi līdz norādītajam veselajam skaitlim. Ja neviens vesels skaitlis nav noteikts, noklusējums ir 2 cipari. Viss, kas ir zem 2 un virs 4, nav derīgs.

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

Lietošana

Pieņemsim, ka mēs ņemam piemēru, kas ir tieši no specifikācijas, kas ir elements ar vertikālu rakstīšanas režīmu.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Labi, mēs vēlamies, lai skaitļi datumā tiktu parādīti horizontāli. Ir loģiski pieņemt, ka pievienošana text-combine-uprighttieši elementam izdarīs šo triku:

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

Buuuuut, nē tik daudz. Rakstīšanas laikā mums jāpielieto īpašums uz cipariem, lai tas darbotos. Spons darīs.

平成20年4月16日に

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

Tur mēs ejam!

Pārlūkprogrammas atbalsts

Kā mēs tikko redzējām piemērā, pārlūkprogrammas atbalsts pašlaik ir nedaudz izkaisīts. Lai gan daudzas pārlūkprogrammas piedāvā vismaz daļēju atbalstu text-combine-upright, digitsvērtībai tiek nodrošināts daudz mazāks atbalsts nekā allvērtībai.

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

Android Chrome	Android Firefox	Android pārlūks	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Avots: caniuse

Izmanto nestandarta nosaukumu: -ms-text-combine-horizontal
Atpazīst digitsvērtību, kas atrodas aiz layout.css.text-combine-upright-digits.enabledeksperimentālā karoga, bet vēl neievieš tate-chū-yoko izkārtojuma atbalstu
Izmanto nestandarta nosaukumu: -webkit-text-combine