Esto es un inconveniente que limita mucho nuestro trabajo, pero ha surgido una nueva forma de trabajar que sustituye el texto por imágenes.

El objetivo es sustituir el texto que deseamos mostrar por una imágen que lleva escrito nuestro mensaje con la tipografía deseada. Para lograr esto se han ido desarrollando diferentes métodos, cada uno con sus pros y sus contras.

Fahrner Image Replacement (FIR)

Todd Fahrner desarrolló esta metodología con la que se oculta el texto mediante una hoja de estilos y se añade de fondo de una etiqueta HTML la imagen que contiene el texte anterior con la fuente escogida.

Básicamente el “truco” consiste en el siguiente código:

h1 {
   background: url(titular-a-mostrar.jpg) no-repeat;
   width: 100px;
   height: 20px;
}

h1 span {
   display: none;
}

<h1>
   <span>Titular a mostrar</span>
</h1>

Esta es la forma más directa de conseguir nuestro objetivo, pero tiene sus inconvenientes:

• Problema de accesibilidad para programas lectores de pantalla.
• Si se desactivan los gráficos del navegador, se perderá la información del titular (si se mantiene el CSS).
• Pérdida de usabilidad respecto al comportamiento del texto (seleccionar, copiar, pegar, …)

Mike Rundle solventó el problema de la accesibilidad para programas lectores de pantalla utilizando una elevada y negativa text-indentation para el texto. De esta forma el texto es invisible para los lectores humanos pero visible para las aplicaciones.

[ falta el código ]

Acto seguido apareció un nuevo métido llamado “Método Gilder/Levin” que solventaba el problema de los navegadores configurados para no mostrar las imágenes. El método se basaba el el concepto de capas, implementando en la capa superior la imagen y en la inferior el texto. De esta forma, no se oculta el texto y los lectores de pantalla lo leerán siempre. Y a su vez, aunque en el navegador se desactive el CSS o el ver gráficos (o ambos); se sigue obteniendo la informació del titular.

h1 {
   position: relative;
   width: 100px;
   height: 20px;
}

h1 span {
   background: url(titular-a-mostrar.jpg) no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
}

<h1>
   <span></span>Titular a mostrar
</h1>

Este sería el método definitivo si no incluyera la complicación de tener que utilizar un programa de edición gráfica para alterar el contenido del titular…

(Scalable) Inman Flash Replacement (sIFR)

La diferencia de este método con todos los otros es que en vez de sustituir el texto por una imágen, se sustituirá por un Flash. Shaun Inman y Mike Davidson (juntamente con Mark Wubben a posteriori) desarrollaron una técnica que utilizando JavaScript y Flash conjuntamente con CSS, obtenían unos textos con las fuentes deseadas.

Básicamente el método funciona de la siguiente manera: mediante el JavaScript se envía el texto que se quiere “formatear” al Flash, que a su vez tiene incrustada la fuente que se quiere aplicar. De esta forma el proceso de realizar los titulares de una web se dinamiza enormemente, puesto que en vez de tener que hacer una imagen para cada uno, sólo hay que aplicar el método una vez. A partir de allí, cada vez que se utilice un <h1> (por ejemplo) ya incluirá la tipografía que se buscaba.

En un futuro artículo detallaré el paso a paso de este método, pero hasta entonces, podéis informaros del mismo en este enlace de Nettuts

El futuro: CSS3

Con la llegada del nuevo CSS3 y su posterior adaptación a todos los navegadores, el problema de las tipografías será história puesto que se podrá “incrustar” la tipografía en la misma web.

El código utilizado será algo parecido a esto:

@font-face { font-family: “Rockwell”; src: url(rockwell.otf) format(“opentype”); }
h2 { font-family: “Rockwell”, serif; }

Así que pondremos en un sitio de la web las tipografías que se quiere utilizar y el navegador las descargará cuando las necesite.

Conclusiones

Finalmente, de todo esto sólo se puede deducir que el desarrollador web …

Etiquetas: CSS, Maquetación

Esta entrada se publicó , el Lunes, 2 de Febrero de 2009 a las 19:14 horas y está guardada bajo CSS. Puedes seguir cualquier respuesta a esta entrada mediante el canal RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio.