Tekst-ühenda-püsti - CSS-trikid

text-combine-uprightCSS vara ühendab tähemärki ruumi ühe märgi. Spetsifikatsioon nimetab seda "horisontaalselt vertikaalselt" kompositsiooni, mis on hea viis kirjeldada kasutust: olukordi, kus horisontaalselt samal real kuvamiseks võib vaja minna mõnda märki vertikaalses kirjutamisrežiimis.

span ( text-combine-upright: all; )

Vertikaalteksti horisontaalse teksti tehnika on jaapanikeelne nimega tate-chū-yoko. See näeb välja järgmine:

Vertikaalse vasakult paremale kirjutamise režiimiga ( `writing-mode: vertical-rl;`) töötamisel võib sarnaselt selle illustratsiooni vasakule küljele `text-combine-upright`atribuut võtta mitu tähemärki ja kuvada neid horisontaalselt, jagades märgimärgi sisuliselt võrdseteks osadeks vastavalt sellele, mitu tähemärki on valitud. Selles näites näitab parem pool kahte tähemärki, mis jagavad vertikaalse kirjutamisrežiimi sees sama tähemärki.

Süntaks

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

Algne väärtus: none
Kehtib: asendamata tekstisiseste elementide kohta
Päritud: jah
Protsendid: n / a
Arvutatud väärtus: määratud märksõna, millele lisandub täisarvdigits
Animatsiooni tüüp: pole animeeritav

Väärtused

text-combine-upright aktsepteerib järgmisi väärtusi:

none: See on algväärtus. Vertikaalse kirjutamise režiimis ei kuvata ühtegi märki horisontaalselt.
all: Vertikaalse kasti kõik järjestikused tüpograafilised märgid kuvatakse horisontaalselt samal real, võttes vertikaalses kastis ühe tähemärgi.
digits ?: Vertikaalse kasti kõik järjestikused ASCII-numbrid kuvatakse horisontaalselt samal real, võttes vertikaalses kastis ühe tähemärgi kuni määratud täisarvuni. Kui ükski täisarv pole konkreetne, on vaikimisi 2 numbrit. Kõik alla 2 ja üle 4 on kehtetu.

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

Kasutamine

Oletame, et võtame näite, mis on otse spetsifikatsioonist, mis on vertikaalse kirjutamisrežiimiga element.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, me tahame, et kuupäeva numbrid oleksid horisontaalsed. On loogiline eeldada, et text-combine-uprightotse elemendile lisamine teeb selle triki:

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

Buuuuut, ei nii palju. Kirjutamise ajal peame selle toimimiseks rakendama vara numbritele endile. Span teeb.

平成20年4月16日に

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

Seal me läheme!

Brauseri tugi

Nagu näites just nägime, on brauseritugi praegu veidi hajutatud. Kuigi paljud brauserid pakuvad vähemalt osalist tuge text-combine-upright, toetatakse digitsväärtust palju vähem kui allväärtust.

IE	Edge	Firefox	Chrome	Safari	Ooper
11¹	12 + 1	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Androidi brauser	iOS-i Safari	Opera Mobile
86+	82 + ²	81+	5 + 3	59+

Allikas: caniuse

Kasutab mittestandardset nime: -ms-text-combine-horizontal
Tunnistab eksperimentaalse lipu digitstaga olevat väärtust layout.css.text-combine-upright-digits.enabled, kuid ei rakenda veel tate-chū-yoko paigutustuge
Kasutab mittestandardset nime: -webkit-text-combine