Dave Ruiz blog

Se trata de un código no intrusivo y accesible que símplemente sustituye el contenido de una selección por una imagen a base de tocar la hoja de estilos.

Para que funcione corréctamente necesitaremos la ayuda de jQuery y, evidentemente, tener instalada la fuente que queremos representar (solo en tu equipo). La técnica consta de los siguientes pasos:

1. Incluir en la cabecera el script en cuestión:

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.replacefonts.js"></script>

2. Llamar a la función con el selector que nosotros deseemos. Para este ejemplo tomaremos todos los contenedores con la clase “titulo”:

   <script type="text/javascript"><!--
      $(".titulo").replacefonts();
   --></script>

Ya tenemos el script funcionando, pero nos falta crear las imágenes que contienen los textos. Para ello emplearemos cualquier editor de imágenes sencillo (creo que vale hasta el mismísimo paint) y la función de capturar pantalla del sistema. Continuamos con los siguientes pasos:

3. Abrimos la página que estamos modificando con el explorador, pero añadiéndole al final de la URL lo siguiente: #dev. Esto hará que se muestre un recuadro rojo alrededor de los elementos de la clase “titulo” que no han cargado imagen, facilitando así la tarea de recorte.

   

4. Una vez hechas todas las capturas las guardamos. Por defecto el script va a buscar las imagenes a la carpeta img/titles/ y con extensión .gif. Esto se puede modificar en las primeras lineas del script. Y respecto al nombre que se ha de poner, si el elemento tiene el atríbuto ID lo empleará para generar el nombre, de lo contrario generará un nombre a partir del texto del contenido empleando solo las letras en minúsculas. Por ejemplo:

   HOTEL RESERVATION / Registration Deadline: 31/12/2010

   pasaría a ser:

   hotelreservationregistrationdeadline31122010.gif

Y esto es todo. Ventajas veo al usar este método:

• Si no esta habilitado javascript simplemente te deja el texto con la siguiente fuente disponible.
• La edición de imagenes se limita a capturar y recortar el area señalada en rojo, sin tener que reescribir todos los textos.
• Vemos realmente cómo va a quedar en la página antes de crear la imagen.
• Usando los nombres generados automáticamente, al cambiar el contenido del texto cambia la imagen. Así prevenimos que el texto real no coincida con el de la imagen.

Actualización: Más tarde encuentro este enlace: http://www.disenorama.com/articulos/reemplazo-de-textos-una-comparacion, donde explican varios métodos, pros y contras para realizar esto mismo. Como siempre, es muy difícil innovar en estas cosas.

Actualización: He actualizado el código. Ahora detecta si la fuente está instalada (gracias al código de Lalit) y no hace nada en caso afirmativo. Además, si el elemento a sustituir es un contenedor de enlace <A> para el evento mouseover establece la imagen con el mismo nombre acabado en ‘_hover’, simulando la pseudoclase :hover.

[Descarga: http://lab.daveruiz.net/jquery.replacefonts/jquery.replacefonts.js]