Voltar para o site

Autor: Russ Weakley
URL do original:https://www.maxdesign.com.au/presentation/abbreviations/
Título original: Styling abbreviations and acronyms
Traduzido com autorização expressa do autor.

Estilizando abreviaturas e acrônimos

Publicado em: 18/02/2007

Índice

Por que usar os elementos <abbr> ou <acronym>?

Estes elementos são usados para dar significado adicional a um conteúdo web. Marca-se o conteúdo com um destes dois elementos e acresenta-se o atributo title contendo a informação adicional sobre o conteúdo.
Por exemplo:

<abbr title="associação">assoc.</abbr>

Em tese dois grupos de usuários serão beneficiados com o uso de marcação com os elementos <abbr> ou <acronym>:

  • Usuários com tecnologias assistivas tais como leitores de tela e dispositivos Braille - embora tenha sido demonstrado que vários usuários destas tecnologias não tenham acesso ao atributo title.
  • Usuários com visão normal que não sabem qual o significado de uma abreviação ou de um acrônimo.

Tipos de abreviação

A palavra "abreviação" (NT: ou seu sinônimo abreviatura) vem do latim abbreviare (encurtar) que é relacionado a brevi (pequeno). Embora algumas pessoas discordem, todos os métodos de encurtar palavras ou frases são subconjuntos de abreviação.

Alguns destes subconjuntos:

  • Inicialismos
  • Contrações
  • Acrônimos

Abreviações

Define-se assim: Uma forma encurtada de escrever uma palavra ou frase, usada com o objetivo de abreviar um todo e que consiste no uso da primeira letra ou de umas poucas letras iniciais seguida por um ponto.

Exemplos:

  • assoc. é uma abreviação para associação

Exemplo de marcação:

<abbr title="associação">assoc.</abbr>

Inicialismos

Define-se assim: Uma abreviação formada pelas letras iniciais das palavras constituintes e lida pronunciando-se o nome das letras individualmente. Esta definição consta de muitos dicionários, mas não é unânime. O primeiro registro de definição para a palavra inicialismo é encontrado no Oxford English Dictionary (OED) datado de 1899.

Exemplos:

  • EUA é um inicialismo para Estados Unidos da América
  • IE é um inicialismo para Internet Explorer
  • CSS é um inicialismo para Cascading Style Sheets
  • IRS é um inicialismo para Internal Revenue Service

Uma vez que não existe um elemento (X)HTML "inicialismo", para estes casos devemos usar o elemento abbr.
Exemplo de marcação:

<abbr title="Cascading Style Sheets">CSS</abbr>

Contrações

Existem duas formas de contração.

  1. Forma encurtada de uma palavra terminando com a última letra da palavra.
  2. Maneira encurtada de escrever duas palavras juntando-as em uma só separadas por sinal de apóstrofe (') e omitindo-se algumas letras das palavras constituintes.

Exemplos:

  • Ave é uma contração para Avenue (tipo 1)
  • can't é uma contração para cannot (tipo 2)
  • won't é uma contração para will not (tipo 2)

Não existe um elemento (X)HTML "contração". Contudo é muito pouco provável que alguém queira marcar uma contração em um documento.

Acrônimos

Acrônimos, uma vez que são palavras encurtadas constituem um sub conjunto de abreviação. Contudo eles são mais específicos que as abreviações. Define-se acrônimo como: Uma PALAVRA formada pelas letras iniciais das palavras constituintes. O importante aqui é destacar que um acrônimo deve ser uma PALAVRA - isto significa que a junção das letras iniciais deve ser tal que se possa pronunciar.

Exemplos:

  • OTAN é um acrônimo para Organização do Tratado Atlântico Norte
  • PAM é um acrônimo para Posto de Assistência Médica
  • Modem é um acrônimo para Modulator-Demodulator

Exemplo de marcação:

<acronym title="Radio Detecting And Ranging">radar</acronym>

Não confudir o elemento <abbr> com o atributo abbr

Pode haver confusão no uso de ABBR uma vez que é tanto um elemento HTML como um atributo. O mais importante é que eles têm finalidades completamente diferentes.

O elemento abbr é usado juntamente com o atributo title para fornecer informação adicional sobre abreviações, inicialismos e contrações
Por exemplo:

<abbr title="associação">assoc.</abbr>

O atributo abbr é usado para fornecer uma breve informação para tecnologias assistivas tais como leitores de tela quando estiverem "lendo" conteúdos tabulares.
Por exemplo:

<th abbr="caminhão">Caminhão para transporte pesado</th>

Estilizando os elementos <abbr> e <acronym>

Os elementos <abbr> e <acronym> em geral são estilizados por padrão com um sublinhado pontilhado ao contrário do sublinhado sólido usado para hiperlinks. Este sublinhado alerta o usuário que ali há uma informação motivando-o a interagir com a marcação e também que não se trata de um hiperlink.

O efeito de sublinhado pontilhado pode ser obtido com regras de estilo conforme mostrado abaixo:

abbr, acronym
{
border-bottom: .1em dotted;
}

Por que usar ems no lugar de pixels para a espessura da borda?

Especificar um valor usando ems faz com que a espessura da borda acompanhe o tamanho da fonte não importando quão grande ou pequena a fonte seja.

Por que não foi definida uma cor para a borda?

A propriedade border-bottom permite definir três valores de uma só vez. Estes valores referem-se a:

  • border-width
  • border-style
  • border-color

Cada um dos três tem um "valor inicial" - um valor que será aplicado pelo navegador caso não tenha sido definido pelo autor. Os valores iniciais são:

  • border-width tem um valor inicial igual a "medium"
  • border-style tem um valor inicial igual a "none"
  • border-color tem um valor inicial igual ao valor da propriedade 'color'

Se não for definida uma cor para a borda, o valor inicial será usado. Para border-color o valor inicial é "o mesmo valor da propriedade 'color'". Isto significa que se não for especificada a cor da borda ela terá a mesma cor do texto.

Se a cor do texto mudar em algumas áreas do site ou mesmo em toda uma página, deixando a cor de border-bottom sem definição, fará a cor da borda variar juntamente com a cor do texto evitando de se ter que alterar as regras de estilo sempre que a cor do conteúdo mude.

Alterando o cursor

Você pode facilitar as coisas para os usuários, mudando o estilo do cursor quando o ponteiro do mouse passar sobre uma abreviação ou acrônimo usando a seguinte regra de estilo:

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

Suporte para <abbr> nos Internet Explorer 5 e 6

Internet Explorer 5 e 6 para Windows não oferece suporte para o elemento <abbr>. Isto deixa os desenvolvedores com as seguintes escolhas:

Conheça os livros do Maujor®

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

topo