Banner propaganda da DevMedia - Cursos de desenvolvimento web

A propriedade hyphens das CSS3

Publicado em: 06/09/2012

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo