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:

HTML
<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:

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:

CSS
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

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.