Abreviaciones en los artículos

Una de las etiquetas HTML que más me gustan es precisamente la de las abreviaciones, que se usa principalmente para cuando uno escribe unas siglas añadir el significado de estas, que se puede visualizar con solo situar el ratón encima de la palabra; el ejemplo es la propia palabra HTML escrita varias líneas más arriba.

El problema de esto es que como bien sabemos, y si no lo sabes ya te lo digo ahora, no todos los navegadores interpretan todo el código HTML de igual forma, el W3C ha creado unos estándares web que todo webmaster debería respetar para mejorar la accesibilidad a las páginas independientemente del navegador que se use y de las condiciones físicas propias del navegante, algo que no siempre se hace por lo tedioso que puede resultar; el problema se agrava además cuando es el propio navegador el que no interpreta correctamente algunas etiquetas, impidiendo que se muestre el contenido como se debería, caso del Internet Explorer, que ese seguro que lo conocemos todos.

Otro uso que se le da a la etiqueta en cuestión es el de añadir una descripción sobre la palabra, supongo que de ahí le viene lo de abreviación, aunque personalmente a veces la uso simplemente para poner un pequeño comentario o apunte sobre una o varias palabras, simplemente porque me gusta.

El caso es que hace unos días mi amigo Edo del Redestopista en Japón me comentaba, muy acertadamente, que ésta etiqueta no se visualiza en el Internet Explorer, ya que el navegador por excelencia la etiqueta que reconoce es acronym y me pasó una web donde explican como incorporar un código en el blog para que se muestre correctamente en IE con sólo escribir un poquito más a la hora de redactar el texto.

Así que después de pedirle que me lo explicara detalladamente por mi falta de inglés paso a explicar como hacerlo por si a alguien más le interesa.

Lo primero es ir a editar plantilla y buscar el body, dentro de éste y antes de div id="main" copiamos y pegamos lo siguiente:

<script type="text/javascript">
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, '$2');
document.body.innerHTML = newBodyText;
}
}

window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;
</script>



Lo siguiente es localizar el /* Sidebar Content y al final de éste, justo encima de /* Profile pegamos lo siguiente:

#sidebar abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}

Como se muestra en la siguiente imágen:



Guardamos los cambios y publicamos de nuevo para que sean efectivos, ya sólo nos falta ver el código a incluir cuando redactemos una entrada.

El código normal sería <abbr title="Descripción">palabra</abbr>.

Para que se muestre el símbolo de interrogación al lado del cursor además del punteado inferior de la palabra añadiríamos lo siguiente: <span class="abbr" title""></span>

Quedando de la siguiente manera: <abbr title=""><span class="abbr" title=""></span></abbr>

Suerte!

Corrección:

Gracias a Posavasos por la explicación y de paso recomiendo leer ésta entrada de gigo donde se habla de las diferencias entre abreviaciones (mejor dicho abreviaturas) y acrónimos.

Guardado en: Informática.