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 5.4, uma funcionalidade CSS denominada Hyphenation. Esse Módulo encontra-se na fase de Rascunho de Trabalho Candidata a Recomendaçãodo W3C e é bem suportada pelos navegadores atuais. , 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 subtração ( hífen — ).

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

A codificação 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 ( no final da 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 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%;
    font-size: 20px;
    padding: 0.3em 1em;
    text-align: justify;
    border:1px solid #ccc;
    margin:1em 0;
}
span {
    color:blue;
}
p {
    margin:0;
}
.p1 {
    hyphens: none;
}
.p2 {
    hyphens: manual;
}
.p3 {
    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. Hifenação é um recurso gráfico presente em determinadas linguas, tal como português. É necessário obrigatoriamente declarar-se o atibuto lang para que essa funcionalidade tenha efeito.
2. Justificar texto com uso da declaração CSS text-align: justify; é uma prática 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.

VER PÁGINA EXEMPLO

Compartilhe essa matéria com seus amigos