Apresentamos quatro novos recursos internacionais no CSS

Jack J
Jack J

Quatro novos recursos de CSS internacionais do Módulo de texto CSS de nível 4 estão chegando ao Chrome. Esta postagem explica o que já foi enviado e o que será lançado em breve.

  • No Chrome 119: quebra de linha de frase em japonês com word-break: auto-phrase.
  • Por trás de uma sinalização do Chrome 120: espaçamento entre scripts com a propriedade text-autospace.
  • Em desenvolvimento: correspondência de pontuação em chinês, japonês e coreano (CJK) com a propriedade text-spacing-trim.
  • tamanho de fonte mínimo consistente em todos os idiomas;

Quebra de linha de frase em japonês: word-break: auto-phrase

Esse recurso melhora a legibilidade do texto em japonês e está disponível no Chrome 119

Alguns idiomas asiáticos, como chinês ou japonês, não usam espaços para separar palavras, e as linhas podem envolver qualquer caractere, mesmo que ele esteja no meio de uma palavra. Esse é o comportamento normal de quebra de linha nesses idiomas. No entanto, para textos curtos, como títulos ou poemas, é preferível quebrar linhas dentro dos limites de frases naturais (em japonês, esse limite é chamado de "Bunsetsu").

O novo recurso CSS word-break: auto-phrase especifica que o ajuste deve ocorrer nesses limites.

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>
quebra de palavra: a frase automática une a linha no limite da frase natural.
word-break: auto-phrase encapsula a linha no limite da frase natural.

A detecção de limites é realizada por um mecanismo de machine learning e, portanto, pode não ser o resultado esperado. Se isso acontecer, você poderá ajustar manualmente os pontos quebráveis. Uma tag <wbr> ou um espaço de largura zero (&ZeroWidthSpace;) aplica um ponto quebrável, e um combinador de largura zero (&zwj;) evita uma interrupção.

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

Atualmente, o Chrome oferece suporte a esse recurso apenas para japonês, usando a porta BudouX C++ que usa a tecnologia de ML AdaBoost. Leia mais sobre isso em Google Developers Japan: BudouX: 読やす。改はの動めの軽量ますんち書ま器.

Planejamos oferecer suporte ao coreano e ao chinês em versões futuras do Chrome.

Espaçamento entre scripts: text-autospace

O recurso a seguir está atualmente protegido por uma sinalização no Chrome. Para testar, ative a flag Recursos experimentais da Plataforma Web (encontrada em chrome://flags/#enable-experimental-web-platform-features) no Chrome 120 ou mais recente.

O chinês e o japonês combinam vários scripts, dígitos Han, latino e ASCII, além de hiragana e katakana no caso do japonês. Espaçamentos pequenos ao mudar de scripts ideográficos não Han e para eles geralmente melhoram a legibilidade.

O Chrome planeja começar a inserir espaçamento entre scripts por padrão. Esse recurso traz para a Web uma prática comum, amplamente utilizada em materiais impressos para melhorar a legibilidade.

O novo padrão aplica espaços pequenos para facilitar a leitura, que podem ser controlados com o espaço automático de texto.
O novo padrão aplica espaçamentos pequenos para facilitar a leitura, o que pode ser controlado com text-autospace.

Se você quiser desativar esse comportamento, use a propriedade text-autospace para controlar a inserção dos espaçamentos.

text-autospace: no-autospace;

kerning de pontuação CJK: text-spacing-trim

O recurso a seguir está em desenvolvimento e será ativado por padrão no Chrome.

Em chinês, japonês e coreano, aplicar kerning entre caracteres de pontuação melhora a legibilidade e produz uma tipografia visualmente mais agradável. A maioria dos materiais impressos e processadores de texto aplica esse kerning atualmente.

Por exemplo, os pontos CJK e os parênteses de fechamento CJK costumam ter espaçamento interno do glifo na metade direita desses espaços, de modo que cada caractere tenha um avanço constante.

Mas quando esses caracteres de pontuação aparecem em sequência, o espaçamento interno do glifo se torna excessivo. Nos dois exemplos a seguir, o segundo é a tipografia correta. A metade direita do período CJK deve ser removida.

Quando os caracteres de pontuação aparecem em uma linha, a metade direita do ponto CJK deve ser removida.
Quando caracteres de pontuação aparecem em uma linha, a metade direita do ponto CJK precisa ser removida.

O comportamento padrão fornece bons resultados em geral, mas os desenvolvedores podem usar a propriedade text-spacing-trim para escolher estilos diferentes ou desativá-la em alguns casos.

Tamanho de fonte mínimo consistente em todos os idiomas

Antes do Chrome 118, os tamanhos de fonte menores que 10 px não eram renderizados conforme especificado, mas eram arredondados para cima se o idioma fosse árabe, farsi, japonês, coreano, tailandês, chinês simplificado ou tradicional. Os desenvolvedores precisavam de soluções alternativas para renderizar textos pequenos, por exemplo, usando a propriedade transform.

A partir do Chrome 118, esse limite foi suspenso para todos os idiomas, fazendo com que os sete idiomas correspondam ao restante. Essa mudança melhora a interoperabilidade com outros navegadores.

No Chrome 118, a limitação de tamanhos de fonte menores que 10 px não são renderizados conforme especificado foi removida para árabe, farsi, japonês, coreano, tailandês, simplificado ou tradicional chinês.
No Chrome 118, a limitação de tamanhos de fonte menores que 10 px não são renderizados conforme especificado foi removida para árabe, farsi, japonês, coreano, tailandês, simplificado ou tradicional chinês.

Interaja e compartilhe feedback

Se você tiver algum feedback sobre esses recursos, registre um problema em crbug.com.