Texto-combinar-vertical - Trucos CSS

La text-combine-uprightpropiedad CSS combina caracteres en el espacio de un carácter. La especificación llama a esta composición "horizontal-en-vertical", que es una buena manera de describir el caso de uso: situaciones en las que es posible que necesite algunos caracteres en un modo de escritura vertical para mostrarse horizontalmente en la misma línea.

span ( text-combine-upright: all; )

La técnica del texto horizontal dentro del texto vertical es una japonesa llamada tate-chū-yoko. Así es como se ve:

Cuando se trabaja con un modo de escritura vertical de izquierda a derecha ( `writing-mode: vertical-rl;`), como el lado izquierdo de esta ilustración, la `text-combine-upright`propiedad puede tomar varios caracteres y mostrarlos horizontalmente, esencialmente dividiendo el espacio de caracteres en partes iguales de acuerdo con la cantidad de caracteres seleccionados. En este ejemplo, el lado derecho muestra dos caracteres que comparten el mismo espacio de caracteres dentro de un modo de escritura vertical.

Sintaxis

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

Valor inicial: none
Se aplica a: elementos en línea no reemplazados
Heredado: si
Porcentajes: n / a
Valor calculado: palabra clave especificada, más entero sidigits
Tipo de animación: no animable

Valores

text-combine-upright acepta los siguientes valores:

none: Este es el valor inicial. No se muestran caracteres horizontalmente en un modo de escritura vertical.
all: Todos los caracteres tipográficos consecutivos en el cuadro contenedor vertical se muestran horizontalmente en la misma línea, ocupando el espacio de un solo carácter en el cuadro vertical.
digits ?: Todos los dígitos ASCII consecutivos en el cuadro contenedor vertical se muestran horizontalmente en la misma línea, ocupando el espacio de un solo carácter en el cuadro vertical, hasta el número entero especificado. Si ningún número entero es específico, el valor predeterminado es de 2 dígitos. Cualquier valor inferior a 2 y superior a 4 no es válido.

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

Uso

Digamos que tomamos el ejemplo que viene directamente de la especificación, que es un elemento con un modo de escritura vertical.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Bien, queremos que los números en la fecha se muestren horizontalmente. Es lógico suponer que agregar text-combine-uprightdirectamente al elemento funcionará:

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

Buuuuut, no tanto. En el momento de escribir este artículo, debemos aplicar la propiedad en los dígitos mismos para que esto funcione. Un palmo servirá.

平成20年4月16日に

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

¡Aquí vamos!

Soporte de navegador

Como acabamos de ver en el ejemplo, el soporte del navegador está un poco disperso en este momento. Si bien muchos navegadores ofrecen al menos soporte parcial text-combine-upright, hay mucho menos soporte para el digitsvalor que para el allvalor.

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

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

Fuente: caniuse

Utiliza el nombre no estándar: -ms-text-combine-horizontal
Reconoce el digitsvalor detrás de la layout.css.text-combine-upright-digits.enabledbandera experimental, pero aún no implementa el soporte de diseño para tate-chū-yoko
Utiliza el nombre no estándar: -webkit-text-combine