Tekst-kombinacja-pionowo - CSS-Tricks

Właściwość text-combine-uprightCSS łączy znaki w przestrzeń jednego znaku. Specyfikacja nazywa tę kompozycję „poziomą w pionie”, co jest dobrym sposobem opisania przypadku użycia: sytuacji, w których możesz potrzebować niektórych znaków w trybie pisania w pionie, aby wyświetlić je poziomo w tym samym wierszu.

span ( text-combine-upright: all; )

Technika poziomego tekstu w tekście pionowym to japońska technika zwana tate-chū-yoko. Oto jak to wygląda:

Podczas pracy z pionowym trybem pisania od lewej do prawej ( `writing-mode: vertical-rl;`), takim jak lewa strona tej ilustracji, `text-combine-upright`właściwość może przyjmować wiele znaków i wyświetlać je poziomo, zasadniczo dzieląc przestrzeń znaków na równe części w zależności od liczby zaznaczonych znaków. W tym przykładzie po prawej stronie pokazano dwa znaki, które dzielą tę samą przestrzeń znaków w pionowym trybie pisania.

Składnia

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

Wartość początkowa: none
Dotyczy: niezastępowanych elementów wbudowanych
Odziedziczone: tak
Procenty: nie dotyczy
Wartość obliczona: określone słowo kluczowe plus liczba całkowita, jeślidigits
Typ animacji: bez animacji

Wartości

text-combine-upright akceptuje następujące wartości:

none: To jest wartość początkowa. Żadne znaki nie są wyświetlane poziomo w trybie pisania pionowego.
all: Wszystkie kolejne znaki typograficzne w pionowym polu zawierającym są wyświetlane poziomo w tym samym wierszu, zajmując miejsce pojedynczego znaku w pionowym polu.
digits ?: Wszystkie kolejne cyfry ASCII w pionowym polu zawierającym są wyświetlane poziomo w tym samym wierszu, zajmując miejsce pojedynczego znaku w pionowym polu, aż do określonej liczby całkowitej. Jeśli żadna liczba całkowita nie jest określona, wartość domyślna to 2 cyfry. Wszystko poniżej 2 i powyżej 4 jest nieważne.

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

Stosowanie

Powiedzmy, że bierzemy przykład prosto ze specyfikacji, która jest elementem z pionowym trybem pisania.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, chcemy, aby cyfry w dacie były wyświetlane poziomo. Logiczne jest założenie, że dodanie text-combine-uprightbezpośrednio do elementu załatwi sprawę:

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

Buuuuut, nie tak bardzo. W chwili pisania tego tekstu musimy zastosować własność samych cyfr, aby to zadziałało. Rozpiętość wystarczy.

平成20年4月16日に

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

No to jedziemy!

Wsparcie przeglądarki

Jak właśnie widzieliśmy w przykładzie, obsługa przeglądarek jest obecnie nieco rozproszona. Chociaż wiele przeglądarek oferuje przynajmniej częściowe wsparcie dla wartości text-combine-upright, jest o wiele mniejsze wsparcie dla digitswartości niż dla allwartości.

TO ZNACZY	Brzeg	Firefox	Chrom	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Przeglądarka Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Źródło: caniuse

Używa niestandardowej nazwy: -ms-text-combine-horizontal
Rozpoznaje digitswartość za layout.css.text-combine-upright-digits.enabledflagą eksperymentalną, ale nie implementuje jeszcze obsługi układu dla tate-chū-yoko
Używa niestandardowej nazwy: -webkit-text-combine