Tekst-kombinere-opretstående - CSS-tricks

Den text-combine-uprightCSS ejendom kombinerer tegn i løbet af ét tegn. Specifikationen kalder denne "vandret-i-lodret" komposition, som er en god måde at beskrive brugssagen på: situationer, hvor du muligvis har brug for nogle tegn i en lodret skrivetilstand for at blive vist vandret på samme linje.

span ( text-combine-upright: all; )

Teknikken med vandret tekst i lodret tekst er en japansk kaldet tate-chū-yoko. Sådan ser det ud:

Når du arbejder med en lodret skrivningstilstand fra venstre mod højre ( `writing-mode: vertical-rl;`), ligesom venstre side af denne illustration, kan `text-combine-upright`ejendommen tage flere tegn og vise dem vandret og i det væsentlige opdele tegnrummet i lige store dele alt efter hvor mange tegn der er valgt. I dette eksempel viser højre side to tegn, der deler det samme tegnrum inde i en lodret skrivemåde.

Syntaks

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

Startværdi: none
Gælder for: ikke-udskiftede integrerede elementer
Arvet: ja
Procentdele: ikke oplyst
Beregnet værdi: specificeret nøgleord plus heltal hvisdigits
Animationstype: ikke animerbar

Værdier

text-combine-upright accepterer følgende værdier:

none: Dette er den oprindelige værdi. Ingen tegn vises vandret i en lodret skrivetilstand.
all: Alle på hinanden følgende typografiske tegn i det lodrette indholdsfelt vises vandret på samme linje og optager pladsen for et enkelt tegn i det lodrette felt.
digits ?: Alle på hinanden følgende ASCII-cifre i det lodrette indholdsfelt vises vandret på den samme linje og optager pladsen for et enkelt tegn i det lodrette felt op til det angivne heltal. Hvis intet heltal er specifikt, er standard 2 cifre. Alt under 2 og over 4 er ugyldigt.

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

Anvendelse

Sig, at vi tager eksemplet, der er direkte fra specifikationen, hvilket er et element med en lodret skrivemåde.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, vi vil have, at numre i datoen vises vandret. Det er logisk at antage, at tilføjelse text-combine-uprightdirekte til elementet gør tricket:

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

Buuuuut, ikke så meget. I skrivende stund er vi nødt til at anvende ejendommen på cifrene for at dette skal fungere. Et span vil gøre.

平成20年4月16日に

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

Sådan der!

Browsersupport

Som vi lige så i eksemplet, er browsersupport lidt spredt i øjeblikket. Mens mange browsere i det mindste tilbyder delvis understøttelse af text-combine-upright, er der meget mindre understøttelse af digitsværdien, end der er for allværdien.

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

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

Kilde: caniuse

Bruger det ikke-standardnavn: -ms-text-combine-horizontal
Genkender digitsværdien bag det layout.css.text-combine-upright-digits.enabledeksperimentelle flag, men implementerer endnu ikke layoutunderstøttelse af tate-chū-yoko
Bruger det ikke-standardnavn: -webkit-text-combine