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:
|
1 2 3 4 5 |
.hyphenate { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
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.
|
1 2 3 4 5 6 7 |
.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
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.
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:
|
1 |
hyphenate-limit-chars: 10 4 4; |
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.