A propriedade hyphens das CSS3

Introdução

O Módulo CSS Text Level 3 da especificações para as CSS3 prevê, em seu item 6, uma funcionalidade CSS denominada Hyphenation. Esse Módulo encontra-se na fase de Rascunho de Trabalho do W3C, contudo a funcionalidade para hifenação foi implementada pelos navegadores Firefox 6+, Safari 5.1+, IE10, iOS Safari 4.2+, Firefox 15/Android com uso dos prefixos proprietários -moz-, -webkit- e -ms-.
O Chrome 23 suporta os valores none e manual e não suporta o valor auto para a propriedade dessa funcionalidade.

Para consulta a uma tabela atualizada do suporte para essa funcionalidade visite essa página do site caniuse.

Hifenação

Hifenação consiste em se quebrar a palavra de um texto localizada no final de uma linha (ou da largura do seu container) dividindo-a silabicamente com o sinal de menos: –.

Divisão silábica é adotada na escrita ocidental, contudo outras escritas adotam outro tipo de divisão de palavras e o navegador deve ser capaz de tratar a divisão de forma apropriada com a linguagem do documento.

Com uso da CSS2.1 e anteriores a única maneira de obter hifenação em um texto é forçando a quebra da palavra com o elemento <br> e usando o sinal de menos.
Essa solução é extremamente limitada e seu emprego eventual seria em casos muito específicos.

A proposta da hifenação com uso das CSS3 é a de fornecer um mecanismo capaz de realizar a hifenação tanto manual como automática.

Entidades para hífen

O algorítimo Unicode para quebra de linha prevê os caracteres U+2010 e U+00AD.
U+2010 é denominado HYPHEN e a norma Unicode prevê que esse caractere será sempre vísivel quando renderizado
U+00AD é denominado SOFT HYPHEN (shy) e ao contrário do anterior esse caractere não será vísivel quando renderizado. Ele se destina a indicar a posição preferencial para quebra da linha (ou palavra)

Em HTML os caracteres para HYPHEN e SOFT HYPHEN são: &ndash; ou &#8211; e &shy; ou &#173; respectivamente.

Usamos os caracteres para SOFT HYPHEN &shy; ou &#173; na marcação HTML para definir a posição do hífen na palavra. Observe a marcação a seguir:

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mor&shy;bi
eleifend, purus quis faucibus, ante augue ma&shy;lesuada mi, id rhoncus.
</p>

Na marcação mostrada as palavras Morbi (no final da primeira linha) e malesuada (na segunda linha) receberam o caractere &shy; indicando que, se necessário, ali será colocado o hífen de uma possível quebra de linha.
Convém ressaltar que a presença do caractere &shy; na marcação não implica em que ali haverá obrigatoriamente uma quebra de linha com hifenação ainda que a declaração CSS hyphens, como veremos a seguir, assim determine.

Propriedade hyphens

A propriedade CSS hyphens aplica-se o todos elementos da HTML e admite os valores none | manual | auto, sendo manual o valor padrão.

Esses valores causam os seguintes efeitos:

• Valor none: Nenhum hífen será aplicado, mesmo em marcações contendo o caractere &shy;
• Valor manual: Serão aplicados hífens, quando necessário, nos locais da marcação onde houver o caractere &shy;
Valor auto: Serão aplicados hífens, quando necessário, independentemente da marcação conter ou não o caractere &shy;

Página exemplo

Desenvolvi uma página para demonstrar o efeito da declaração dessa propriedade. A página deverá ser visualizada em um navegador que suporte a propriedade como descrito anteriormente.

Na página existem três elementos DIV, cada um deles contendo um parágrafro com texto idêntico. Os DIVs receberam uma borda e algum padding e as palavras do texto na cor AZUL, foram marcadas com o caractere &shy;.

As regras de estilo para os elementos da página são mostradas a seguir:

body {
  margin:20px;
  font: 100% sans-serif;
}
div {
  width: 90%;
  padding: 0.3em 1em;
  text-align: justify;
  border:1px solid #ccc;
  margin:1em 0;
}
span {color:blue;}
p { margin:0; }
.p1 {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.p2 {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
.p3 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Notar que para o parágrafo do primeiro DIV declaramos hyphens: none;, do segundo DIV hyphens: manual; e do terceiro DIV hyphens: auto;.

Abra a página e redimensione contínua e lentamente a largura da janela do navegador, observando as quebras de linha nos três DIV. Constate o seguinte: no primeiro DIV nunca haverá hifenação, no segundo haverá hifenação, quando necessário, nas palavras na cor AZUL e no terceiro DIV sempre que necessário haverá hifenação.

Notas:

1. Justificar texto com uso da declaração CSS text-align: justify; é uma prática muito pouca usada, pois cria um indesejado efeito denominado de "caminhos de espaços em branco", no corpo do texto. O uso da hifenação ameniza esse efeito, como pode-se comprovar na página exemplo onde todos os textos tiveram seu alinhamento justificado.
2. A especificação do W3C recomenda que a presença do caractere &shy; tem precedência sobre a hifenação automática. Testando no navegador Firefox 15 constatei que essa recomendação não foi honrada. Observe nos segundo e terceiro DIVs a renderização para um redimensionamento que provoque a hifenação das palavras malesuada e sollicitudin que receberam na marcação o caractere &shy; após a primeira sílaba.

VER PÁGINA EXEMPLO