Text-combine-upright - CSS-Tricks

A text-combine-uprightpropriedade CSS combina caracteres no espaço de um caractere. A especificação chama essa composição “horizontal-na-vertical”, que é uma boa maneira de descrever o caso de uso: situações em que você pode precisar que alguns caracteres em um modo de escrita vertical sejam exibidos horizontalmente na mesma linha.

span ( text-combine-upright: all; )

A técnica de texto horizontal dentro de texto vertical é japonesa chamada tate-chū-yoko. Veja como fica:

Ao trabalhar com um modo de escrita vertical da esquerda para a direita ( `writing-mode: vertical-rl;`), como o lado esquerdo desta ilustração, a `text-combine-upright`propriedade pode pegar vários caracteres e exibi-los horizontalmente, essencialmente dividindo o espaço do caractere em partes iguais de acordo com quantos caracteres são selecionados. Neste exemplo, o lado direito mostra dois caracteres compartilhando o mesmo espaço de caractere dentro de um modo de escrita vertical.

Sintaxe

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

Valor inicial: none
Aplica-se a: elementos inline não substituídos
Herdado: sim
Porcentagens: n / a
Valor calculado: palavra-chave especificada, mais inteiro sedigits
Tipo de animação: não animável

Valores

text-combine-upright aceita os seguintes valores:

none: Este é o valor inicial. Nenhum caractere é exibido horizontalmente no modo de escrita vertical.
all: Todos os caracteres tipográficos consecutivos na caixa vertical contendo são exibidos horizontalmente na mesma linha, ocupando o espaço de um único caractere na caixa vertical.
digits ?: Todos os dígitos ASCII consecutivos na caixa vertical contendo são exibidos horizontalmente na mesma linha, ocupando o espaço de um único caractere na caixa vertical, até o número inteiro especificado. Se nenhum número inteiro for específico, o padrão é 2 dígitos. Qualquer coisa abaixo de 2 e acima de 4 é inválida.

/* 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 pegamos o exemplo que vem direto da especificação, que é um elemento com um modo de escrita vertical.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, queremos que os números na data sejam exibidos horizontalmente. É lógico supor que adicionar text-combine-uprightdiretamente no elemento resolverá o problema:

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

Buuuuut, não muito. No momento em que este artigo foi escrito, precisamos aplicar a propriedade nos próprios dígitos para que isso funcione. Um intervalo vai fazer.

平成20年4月16日に

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

Aqui vamos nós!

Suporte de navegador

Como acabamos de ver no exemplo, o suporte ao navegador está um pouco disperso no momento. Embora muitos navegadores ofereçam pelo menos suporte parcial para text-combine-upright, há muito menos suporte para o digitsvalor do que para o allvalor.

IE	Beira	Raposa de fogo	cromada	Safári	Ópera
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

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

Fonte: caniuse

Usa o nome não padrão: -ms-text-combine-horizontal
Reconhece o digitsvalor por trás do layout.css.text-combine-upright-digits.enabledsinalizador experimental, mas ainda não implementa suporte de layout para tate-chū-yoko
Usa o nome não padrão: -webkit-text-combine