Tekst-kombinere-oppreist - CSS-triks

Den text-combine-uprightCSS eiendom kombinerer tegn i løpet av ett tegn. Spesifikasjonen kaller denne "horisontale-i-vertikale" komposisjonen, som er en fin måte å beskrive brukssaken på: situasjoner der du kan trenge noen tegn i loddrett skrivemodus for å vises horisontalt på samme linje.

span ( text-combine-upright: all; )

Teknikken med horisontal tekst i vertikal tekst er en japansk som kalles tate-chū-yoko. Slik ser det ut:

Når du arbeider med en vertikal skrivemodus fra venstre til høyre ( `writing-mode: vertical-rl;`), som venstre side av denne illustrasjonen, kan `text-combine-upright`egenskapen ta flere tegn og vise dem horisontalt, og i hovedsak dele tegnrommet i like deler i henhold til hvor mange tegn som er valgt. I dette eksemplet viser høyre side to tegn som deler samme tegnplass i en vertikal skrivemodus.

Syntaks

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

Opprinnelig verdi: none
Gjelder for: ikke-erstattede innebygde elementer
Arvet: ja
Prosentandeler: ikke relevant
Beregnet verdi: spesifisert nøkkelord, pluss heltall hvisdigits
Animasjonstype: ikke animerbar

Verdier

text-combine-upright aksepterer følgende verdier:

none: Dette er den opprinnelige verdien. Ingen tegn vises horisontalt i loddrett skrivemodus.
all: Alle påfølgende typografiske tegn i den vertikale innholdsboksen vises horisontalt på samme linje, og tar opp plassen til et enkelt tegn i den vertikale boksen.
digits ?: Alle påfølgende ASCII-sifre i den vertikale innholdsboksen vises horisontalt på samme linje, og tar opp plassen til et enkelt tegn i den vertikale boksen, opp til det angitte heltallet. Hvis intet heltall er spesifikt, er standard to sifre. Alt under 2 og over 4 er ugyldig.

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

Bruk

Si at vi tar eksemplet som er rett fra spesifikasjonen, som er et element med en vertikal skrivemodus.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, vi vil at tall i datoen skal vises horisontalt. Det er logisk å anta at å legge til text-combine-uprightdirekte på elementet vil gjøre susen:

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

Buuuuut, ikke så mye. I skrivende stund må vi bruke eiendommen på sifrene for at dette skal fungere. Et spenn vil gjøre.

平成20年4月16日に

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

Der går vi!

Nettleserstøtte

Som vi nettopp så i eksemplet, er nettleserstøtten litt spredt for øyeblikket. Mens mange nettlesere tilbyr minst delvis støtte for text-combine-upright, er det mye mindre støtte for digitsverdien enn det er for allverdien.

DVS	Kant	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

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

Kilde: caniuse

Bruker navnet som ikke er standard: -ms-text-combine-horizontal
Gjenkjenner digitsverdien bak det layout.css.text-combine-upright-digits.enabledeksperimentelle flagget, men implementerer ennå ikke layoutstøtte for tate-chū-yoko
Bruker navnet som ikke er standard: -webkit-text-combine