combinación de texto en posición vertical

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

span {  text-combine-upright: all;}

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

Sintaxis

text-combine-upright: none | all | [ digits integer? ]

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

Valores

text-combine-uprightacepta 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 integer?: 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 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 proviene directamente de la especificación, que es un dateelemento con un modo de escritura vertical.

date平成20年4月16日に/date

date {  writing-mode: vertical-lr;}

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

date {  text-combine-upright: digits 2; /*   */  writing-mode: vertical-lr;}

Pero no tanto. Al momento de escribir este artículo, necesitamos aplicar la propiedad en los propios dígitos para que esto funcione. Un lapso bastará.

date平成span20/span年span4/span月span16/span日に/date

date {  writing-mode: vertical-lr;}span {  text-combine-upright: digits 2;}

¡Aquí vamos!

Soporte del navegador

Como acabamos de ver en el ejemplo, la compatibilidad con el navegador está un poco dispersa en este momento. Si bien muchos navegadores ofrecen al menos soporte parcial para 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+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
86+	82+²	81+	5+³	59+

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

Especificación

• Modos de escritura CSS Nivel 4 (borrador del editor)

Propiedades relacionadas

dirección

.element { direction: rtl; } Sara Cope

Unicode-bidi

.element { unicode-bidi: embed; } Chris Coyier

orientación del texto

element { text-orientation: mixed; } Jwahir Sundai

modo de escritura

.element { writing-mode: vertical-rl; } Robin Rendle