Aguarde...

18 de março de 2019

Tudo o que você precisa saber sobre a hifenização em CSS

Tudo o que você precisa saber sobre a hifenização em CSS

A hifenização automática na Web é possível desde 2011 e agora é amplamente suportada . O Safari, o Firefox e o Internet Explorer 9 suportam a hifenização automática, assim como o Chrome no Android e o MacOS (mas ainda não no Windows ou no Linux ).

Como ativar a hifenização automática

Há duas etapas necessárias para ativar a hifenização automática. A primeira é definir a linguagem do texto. Isso dirá ao navegador qual dicionário de hifenização usar – a hifenização automática correta requer um dicionário de hifenização apropriado à linguagem do texto. Se o navegador não souber o idioma do texto, as diretrizes do CSS informam que ele não precisa ser hifenizado automaticamente, mesmo se você ativar a hifenização em uma folha de estilos.

A hifenização é um assunto complexo. Os pontos de hifenização baseiam-se principalmente em sílabas usando uma combinação de etimologia e fonologia, mas os estilos de casas também têm regras diferentes sobre palavras divisórias.

1. Definir o idioma

O idioma de uma página da Web deve ser definido usando o atributo HTMLlang :

<html lang="en">

Definir o idioma dessa maneira é a melhor prática para todas as páginas da Web, independentemente de você estar hifenizando ou não. Conhecer a linguagem do texto ajudará as ferramentas de tradução automática, os leitores de tela e outros softwares de assistência.

lang="en"atributo usa uma tag de idioma ISO para informar ao navegador que o texto está em inglês. Nesse caso, o navegador escolherá o dicionário de hifenização em inglês padrão, que geralmente significa hifenização para o inglês americano. Embora existam diferenças importantes na ortografia e pronúncia (e, portanto, na hifenização) entre o inglês americano e outros países, pode haver diferenças ainda maiores em idiomas como o português. A solução é adicionar uma ‘região’ à linguagem para que o navegador saiba qual é o dicionário de hifenização mais apropriado. Por exemplo, para especificar o português do Brasil ou o inglês britânico:

<html lang="pt-BR">
<html lang="en-GB">

2. Ligue os hífens

Agora que você definiu seu idioma, está pronto para ativar a hifenização automática em CSS . Isso não poderia ser muito mais fácil:

hyphens: auto;

Atualmente, o Safari e o IE / Edge exigem prefixos, então é exatamente isso que você precisa agora:

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Controles de hifenização

Há mais para definir a hifenização do que apenas ligar os hífens. O Módulo de Texto CSS Nível 4 introduziu o mesmo tipo de controles de hifenização fornecidos no software de layout (por exemplo, InDesign) e alguns processadores de texto (incluindo o Word). Esses controles fornecem maneiras diferentes de definir a quantidade de hifenização que ocorre no texto.

Limitando o tamanho da palavra e o número de caracteres antes e depois de um hífen

Se você hifenar palavras curtas, elas podem ser mais difíceis de ler. Da mesma forma, você não quer muito poucos caracteres deixados em uma linha antes do hífen, ou é empurrado para a próxima linha após o hífen. Uma regra comum é permitir que as palavras com pelo menos seis letras sejam hifenizadas, deixando pelo menos três caracteres antes da quebra da palavra e levando no mínimo dois para a próxima linha.

O Oxford Style Manualrecomenda que três seja o número mínimo de letras após um hífen em uma quebra de linha, embora exceções possam ser feitas em medidas muito curtas.

Você pode definir esses limites com a hyphenate-limit-charspropriedade. Leva três valores separados por espaço. O primeiro é o limite mínimo de caracteres para uma palavra ser hifenizada; o segundo é o número mínimo de caracteres antes da quebra da hifenização; e o último é o mínimo de caracteres após a quebra da hifenização. Para definir a regra de ouro acima mencionada, com um limite de seis caracteres, três caracteres antes da quebra de hifenização e dois depois, use:

hyphenate-limit-chars: 6 3 2;
Tudo o que você precisa saber sobre a hifenização em CSS

O valor padrão para hyphenate-limit-charsé autopara todas as três configurações. Isso significa que o navegador deve escolher as melhores configurações com base no idioma e no layout atuais. O Módulo de Texto CSSNível 4 sugere que os navegadores usam 5 2 2como ponto de partida (o que eu acho que resulta em muita hifenização), mas os navegadores estão livres para variar o que quiserem.

Atualmente, apenas o IE / Edge suporta essa propriedade (com um prefixo), no entanto, o Safari suporta os limites de caracteres de hifenização usando algumas propriedades herdadas especificadas em um rascunho anterior do Módulo de Texto CSS3 . Isso significa que você pode obter o mesmo controle no Edge e no Safari (com algum planejamento futuro para o Firefox) assim:

/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;

Limitando o número de linhas hifenizadas consecutivas

Por razões principalmente estéticas, você pode limitar o número de linhas em uma linha que são hifenizadas. Linhas hifenizadas consecutivamente, particularmente três ou mais, são pejorativamente chamadas de escada . A regra geral para o inglês é que duas linhas consecutivas são o máximo ideal (em contraste, os leitores do alemão podem enfrentar muitas escadas). Por padrão, o CSS não define nenhum limite para o número de hifens consecutivos, mas você pode usar a hyphenate-limit-linespropriedade para especificar um máximo. Atualmente, isso é suportado apenas pelo IE / Edge e pelo Safari (com prefixos).

-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
Tudo o que você precisa saber sobre a hifenização em CSS

Você pode remover o limite usando um valor de no-limit.

Evitar palavras hifenizadas na última linha de um parágrafo

A menos que você diga o contrário, um navegador terá prazer em hifenizar a última palavra de um parágrafo, de modo que o fim da palavra quebrada permaneça sozinho na linha final, um órfão solitário de um órfão. Geralmente é preferível ter uma grande lacuna no final da penúltima linha do que ter meia palavra na linha final. Você pode conseguir isso ativando a hyphenate-limit-lastpropriedade com um valor de always.

hyphenate-limit-last: always;

Atualmente, isso é suportado apenas no IE / Edge (com um prefixo).

Reduzindo a hifenização configurando uma zona de hifenização

Por padrão, a hifenização irá ocorrer tão frequentemente como o navegador pode dividir uma palavra em duas linhas, dentro de qualquer hyphenate-limit-charshyphenate-limit-linesvalores definidos. Mesmo ao aplicar essas propriedades para controlar quando a hifenização ocorre, você ainda pode acabar com parágrafos fortemente hifenizados.

Considere um parágrafo alinhado à esquerda. A borda direita está esfarrapada, o que a hifenização pode reduzir. Por padrão, todas as palavras que podem ser hifenizadas serão. Isso lhe dará a quantidade máxima de hifenização e, portanto, a redução máxima para o pano. Se você estiver preparado para tolerar um pouco mais de desigualdade até a borda do parágrafo, poderá reduzir a quantidade de hifenização.

Você pode fazer isso especificando a quantidade máxima de espaços em branco permitidos entre a última palavra da linha e a borda da caixa de texto. Se uma nova palavra começar dentro deste espaço em branco, ela não será hifenizada. Esse espaço em branco é conhecido como a zona de hifenização . Quanto maior a zona de hifenização, maior o trapo e menor a hifenização. Ao ajustar a zona de hifenização, você está equilibrando a proporção entre o melhor espaçamento e menos hífens.

Tudo o que você precisa saber sobre a hifenização em CSS

Para fazer isso, você usa a hyphenation-limit-zonepropriedade, que leva um comprimento ou um valor percentual (em termos da largura da caixa de texto). No contexto do design responsivo, faz mais sentido definir sua zona de hifenização como uma porcentagem. Fazer isso significa que você obteria uma zona de hifenização menor em telas menores, levando a mais hifenização e menos trapo. Inversamente, em telas mais amplas, você obteria uma zona de hifenização mais ampla, portanto menos hifenização e mais trapo, que uma medida mais ampla seria mais adequada para acomodar. Com base nos padrões típicos do software de layout de página, 8% é um bom começo:

hyphenate-limit-zone: 8%

Atualmente, isso é suportado apenas no IE / Edge (com um prefixo).

Colocando tudo junto

Para aplicar os mesmos tipos de controles de hifenização disponíveis no software de layout convencional (pelo menos em uma linha por linha) ao parágrafo usando as propriedades do Nível 4 do Módulo de Texto CSS :

p {
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;   
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

E com os prefixos e fallbacks apropriados do navegador:

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

A hifenização é um exemplo perfeito de aprimoramento progressivo, portanto, você pode começar a aplicar as informações acima agora se achar que seus leitores se beneficiarão dela – o suporte entre os navegadores só aumentará. Se você está projetando para um site escrito em um idioma com palavras longas, como o alemão, seus leitores vão definitivamente agradecer por isso.

Postado em BlogTags:
Escreva um comentário