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

> Hifenização (hyphenation) em CSS para textos justificados e responsivos. Use hyphens para quebras de linha naturais e legibilidade aprimorada. Melhore textos!

URL: https://dpw.dev/css/hifenizacao-hyphenation-css-2019/  
Publicado em: 2019-02-04  
Categoria: css  
Tags: tipografia  
Autor: Tárcio Zemel

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.

> Artigo baseado em [A look at CSS hyphenation in 2019](https://justmarkup.com/log/2019/01/a-look-at-css-hyphenation-in-2019/).

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

[O suporte para hifenização de CSS](https://caniuse.com/#feat=css-hyphens) 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:

```scss
.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.

```scss
.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.

> **Dica:** Para um assunto correlato, leia nosso artigo sobre [URLs longas apresentadas corretamente com CSS](/css/urls-longas-apresentadas-corretamente-com-css/).

## 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](/images/blog/hifenizacao-hyphenation-css-2019/hifenizacao-hyphenation-css-2019-exemplo.webp)

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`](https://www.w3.org/TR/css-text-4/#hyphenate-char-limits), 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:

```
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...

> **Nota:** Navegadores baseados em Webkit suportam as [propriedades](https://github.com/WebKit/webkit/blob/master/LayoutTests/fast/text/hyphenate-limit-before-after.html) -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after e -webkit-hyphenate-limit-lines, que também permitem definir o tamanho mínimo e os caracteres mínimos antes/depois de um intervalo.

## 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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml