Hifenização de CSS (CSS hyphenation) em 2019

Saiba como está o suporte à hifenização de CSS (CSS hyphenation) nos principais browsers em 2019 e como é possível ter controle sobre hifens em textos.

Ir para o artigo

Muitos ainda desconhecem a possibilidade de ter certo controle sobre hifens em textos com a hifenização de CSS (CSS hyphenation). O hífen ajuda bastante em determinadas circunstância, e é justamente o estado desse controle de hifenização em CSS que tratamos.

Suporte dos navegadores à hifenização de CSS (CSS hyphenation)

O suporte para hifenização de CSS está relativamente razoável. Embora funcione em navegadores baseados no Chromium nas plataformas Mac e Android, CSS Hyphenation não funciona (na data de publicação deste artigo) em Windows e Linux — hifenização de CSS também não funciona no Opera Mini e em alguns outros navegadores móveis (navegador do Blackberry, IE mobile etc.).

Usando a hifenização CSS

Para controlar hifens com CSS hoje, ainda é preciso adicionar prefixos para o IE/Edge/Chromium, o que torna recomendado usar o seguinte para cada texto que deve usar hífen:

Como (na maioria dos casos) provavelmente o que se quer é quebrar palavras, e não o layout, em navegadores não compatíveis, existe aí uma recomendação para que todas as palavras serem hifenizadas em navegadores que suportam CSS Hyphenation e o texto ser quebrado em nova linha para os que não suportam.

Agora que foi explicada a maneira correta de se usar hifenização de CSS atualmente, procedamos a uma breve análise do que está faltando para torná-lo ainda melhor.

Muita hifenização…

O maior problema que tivemos com a hifenização foi que ela simplesmente hifenizava muito, com muita freqüência. Como mostrado no exemplo a seguir (em alemão, que tem palavras bem longas), aqui ele hifeniza a palavra “Josef”, que não fica muito bem. Também, torna o texto mais difícil de ler e, portanto, um pouco menos acessível.

Hifenização de CSS (CSS hyphenation): exemplo de hifenização

Isso ocorre porque, a menos que o UA (User Agent) seja capaz de calcular um valor melhor, hyphens: auto significa 2 para antes e depois e 5 para a palavra total. Isso significa que os hifens serão usados para cada palavra que tenha pelo menos 5 caracteres de comprimento e irá quebrar após/antes um mínimo de 2 palavras.

Independentemente do motivo pelo qual este é o valor padrão, é interessante a propriedade hyphenate-limit-chars, que especifica o número mínimo de caracteres em uma palavra hifenizada e, portanto, torna possível usá-la para substituir o valor padrão de 5 (comprimento da palavra) 2 (antes da quebra) 2 (após a pausa).

Então, em teoria, seria possível usar o seguinte para usar apenas hifens para palavras com 10 caracteres ou mais e só quebrar antes/depois de 4 caracteres:

Na verdade, essa propriedade ainda é suportada apenas no Internet Explorer 10+ e no Edge com o prefixo -ms, então seria muito bom um suporte melhor para hyphenate-limit-chars em um futuro não muito distante…

Considerações finais

O recurso de hifenização de CSS (CSS hyphenation) pode ser usado com relativa liberdade e possibilidade de uso (na data de publicação deste artigo).

Talvez um dos principais problemas seja a falta de suporte para a propriedade hyphenate-limit-chars, que, esperamos, seja aprimorado em um futuro não muito distante.