Текст-комбінат-вертикально - CSS-хитрощі

text-combine-uprightВластивість CSS об'єднує символи в просторі одного символу. Специфікація називає цю композицію «по горизонталі у вертикалі», що є приємним способом опису випадку використання: ситуації, коли вам можуть знадобитися деякі символи у вертикальному режимі запису для горизонтального відображення в одному рядку.

span ( text-combine-upright: all; )

Техніка горизонтального тексту у вертикальному тексті - японська, що називається tate-chū-yoko. Ось як це виглядає:

При роботі з вертикальним режимом запису зліва направо ( `writing-mode: vertical-rl;`), як і на лівій стороні цієї ілюстрації, `text-combine-upright`властивість може приймати кілька символів і відображати їх горизонтально, по суті, розділяючи простір символів на рівні частини відповідно до кількості вибраних символів. У цьому прикладі на правій стороні показано два символи, що використовують один і той же простір символів у вертикальному режимі запису.

Синтаксис

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

Початкове значення: none
Застосовується до: незамінених вбудованих елементів
Успадковано: так
Відсотки: н / д
Обчислюване значення: вказане ключове слово, плюс ціле число, якщоdigits
Тип анімації: не анімаційний

Цінності

text-combine-upright приймає такі значення:

none: Це початкове значення. Жодні символи не відображаються горизонтально у вертикальному режимі запису.
all: Усі послідовні друкарські символи у вертикальному полі, що містить, відображаються горизонтально в одному рядку, займаючи простір одного символу у вертикальному полі.
digits ?: Усі послідовні цифри ASCII у вертикальному полі, що містить, відображаються горизонтально в одному рядку, займаючи простір одного символу у вертикальному полі, до вказаного цілого числа. Якщо ціле число не є конкретним, то за замовчуванням це 2 цифри. Все, що нижче 2 і вище 4, є недійсними.

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

Використання

Скажімо, ми беремо приклад прямо з специфікації, яка є елементом із вертикальним режимом запису.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Добре, ми хочемо, щоб цифри в даті відображалися горизонтально. Логічно припустити, що додавання text-combine-uprightбезпосередньо до елемента зробить трюк:

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

Бууууут, не так вже й багато. На момент написання статті нам потрібно застосувати властивість до самих цифр, щоб це працювало. Підійде певний проміжок часу.

平成20年4月16日に

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

Там ми йдемо!

Підтримка браузера

Як ми щойно побачили у прикладі, підтримка браузера на даний момент трохи розкидана. Хоча багато браузерів пропонують принаймні часткову підтримку text-combine-upright, значення набагато менше, digitsніж allзначення.

IE	Край	Firefox	Chrome	Сафарі	Опера
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Джерело: caniuse

Використовує нестандартну назву: -ms-text-combine-horizontal
Визнає digitsзначення layout.css.text-combine-upright-digits.enabledекспериментального прапора, але ще не реалізує підтримку макета для tate-chū-yoko
Використовує нестандартну назву: -webkit-text-combine