Szöveg-össze-függőleges - CSS-trükkök

A text-combine-uprightCSS tulajdonság egyesíti a karaktereket egy karakter szóközébe. A specifikáció ezt a "vízszintes-függőleges" kompozíciót hívja, amely jól leírja a használati esetet: olyan helyzetek, amikor függőleges írási módban szükség lehet néhány karakterre, hogy vízszintesen ugyanazon a vonalon jelenjen meg.

span ( text-combine-upright: all; )

A függőleges szövegen belüli vízszintes szöveg technikája egy japán, tate-chū-yoko. Így néz ki:

Ha függőleges balról jobbra írási üzemmóddal ( `writing-mode: vertical-rl;`) dolgozik , hasonlóan `text-combine-upright`ennek az ábrának a bal oldalához, a tulajdonság több karaktert is felvehet, és vízszintesen megjelenítheti őket, lényegében a karakterterületet egyenlő részekre bontva aszerint, hogy hány karakter van kijelölve. Ebben a példában a jobb oldalon két olyan karakter látható, amelyek ugyanazon karakterterületet osztják meg egy függőleges írási mód belsejében.

Szintaxis

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

Kezdő érték: none
A következőkre vonatkozik: nem cserélt soros elemek
Örökölt: igen
Százalékok: n / a
Számított érték: megadott kulcsszó, plusz egész szám, hadigits
Animáció típusa: nem animálható

Értékek

text-combine-upright a következő értékeket fogadja el:

none: Ez a kezdeti érték. Függőleges írásmódban egyetlen karakter sem jelenik meg vízszintesen.
all: A függőleges tartalmazó mezőben az összes egymást követő tipográfiai karakter vízszintesen, ugyanazon a vonalon jelenik meg, a függőleges mezőben egyetlen karakter helyet foglal el.
digits ?: A függőleges tartalmazó mezőben az összes egymást követő ASCII számjegy vízszintesen, ugyanazon a vonalon jelenik meg, a függőleges mezőben egyetlen karakter helyet foglal el a megadott egész számig. Ha nincs egész szám, akkor az alapértelmezett 2 számjegy. Minden, ami 2 és 4 felett van, érvénytelen.

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

Használat

Tegyük fel, hogy egyenesen a specifikációból vesszük a példát, amely függőleges írási módú elem.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, azt akarjuk, hogy a dátumban szereplő számok vízszintesen jelenjenek meg. Logikus feltételezni, hogy a text-combine-uprightközvetlenül az elemre való hozzáadással sikerül a trükk:

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

Buuuuut, nem annyira. Az írás idején a tulajdonságot magukra a számjegyekre kell alkalmaznunk, hogy ez működjön. Span megteszi.

平成20年4月16日に

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

Tessék!

Böngésző támogatás

Amint a példában láttuk, a böngésző támogatása jelenleg kissé szétszórt. Míg sok böngésző legalább részben támogatja a text-combine-uprighttámogatást, az digitsérték sokkal kevésbé támogatott, mint az allérték.

AZAZ	Él	Firefox	Króm	Szafari	Opera
11¹	12 + 1	48 + ²	48+	5,1 + 3	35+

Android Chrome	Android Firefox	Android böngésző	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + 3	59+

Forrás: caniuse

A nem szabványos nevet használja: -ms-text-combine-horizontal
Felismeri a kísérleti zászló digitsmögött rejlő értéket layout.css.text-combine-upright-digits.enabled, de még nem valósítja meg a tate-chū-yoko elrendezés támogatását
A nem szabványos nevet használja: -webkit-text-combine