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 – 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:
- 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. - 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.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.