Text-combina-vertical - CSS-Tricks

Proprietatea text-combine-uprightCSS combină caracterele în spațiul unui singur caracter. Specificația numește această compoziție „orizontală în verticală”, care este un mod frumos de a descrie cazul de utilizare: situații în care este posibil să aveți nevoie de unele caractere într-un mod de scriere verticală pentru a se afișa orizontal pe aceeași linie.

span ( text-combine-upright: all; )

Tehnica textului orizontal din textul vertical este una japoneză numită tate-chū-yoko. Iată cum arată:

Când lucrați cu un mod de scriere vertical de la stânga la dreapta ( `writing-mode: vertical-rl;`), la fel ca partea stângă a acestei ilustrații, `text-combine-upright`proprietatea poate lua mai multe caractere și le poate afișa orizontal, împărțind în esență spațiul de caractere în părți egale în funcție de câte caractere sunt selectate. În acest exemplu, partea dreaptă arată două caractere care împart același spațiu de caractere în interiorul unui mod de scriere verticală.

Sintaxă

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

Valoarea initiala: none
Se aplică: elementelor în linie care nu sunt înlocuite
Moștenit: da
Procente: n / a
Valoare calculată: cuvânt cheie specificat, plus număr întreg dacădigits
Tipul de animație: nu este animabil

Valori

text-combine-upright acceptă următoarele valori:

none: Aceasta este valoarea inițială. Nu sunt afișate caractere orizontale într-un mod de scriere verticală.
all: Toate caracterele tipografice consecutive din caseta care conține verticală sunt afișate orizontal pe aceeași linie, ocupând spațiul unui singur caracter în caseta verticală.
digits ?: Toate cifrele ASCII consecutive din caseta care conține verticală sunt afișate orizontal pe aceeași linie, ocupând spațiul unui singur caracter în caseta verticală, până la numărul întreg specificat. Dacă niciun număr întreg nu este specific, atunci valoarea implicită este de 2 cifre. Orice sub 2 și peste 4 nu este valid.

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

Utilizare

Să presupunem că luăm exemplul direct din specificație, care este un element cu un mod de scriere vertical.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, vrem ca numerele din dată să fie afișate orizontal. Este logic să presupunem că adăugarea text-combine-uprightdirectă pe element va face trucul:

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

Buuuuut, nu atât. În momentul scrierii, trebuie să aplicăm proprietatea pe cifrele în sine pentru ca acest lucru să funcționeze. O durată va face.

平成20年4月16日に

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

Iată-ne!

Suport pentru browser

Așa cum tocmai am văzut în exemplu, suportul browserului este puțin împrăștiat în acest moment. În timp ce multe browsere oferă suport cel puțin parțial pentru text-combine-upright, există mult mai puțină asistență pentru digitsvaloare decât există pentru allvaloare.

IE	Margine	Firefox	Crom	Safari	Operă
11¹	12 + ¹	48 + ²	48+	5.1 + ³	Peste 35 de ani

Android Chrome	Android Firefox	Browser Android	Safari iOS	Opera Mobile
86+	82 + ²	Peste 81 de ani	5 + ³	Peste 59 de ani

Sursa: caniuse

Folosește numele non-standard: -ms-text-combine-horizontal
Recunoaște digitsvaloarea din spatele layout.css.text-combine-upright-digits.enabledsteagului experimental, dar nu implementează încă suport de aspect pentru tate-chū-yoko
Folosește numele non-standard: -webkit-text-combine