Sustitución de texto por Flash en CSS |

Las soluciones basadas en CSS para sustituir el texto por imágenes presentan problemas técnicos no resueltos: los lectores de páginas pueden no leer el texto y los navegadores normales tienen problemas cuando no se pueden cargar las imágenes.

Además, estas soluciones basadas en CSS siempre tienen el inconveniente de que se deben crear todas las imágenes que sustituyen al texto. Si las imágenes se crean a mano, el proceso es tedioso y poco flexible. Si las imágenes se generan dinámicamente, la aplicación web puede sufrir una penalización apreciable en su rendimiento.

La solución definitiva de todos los problemas de las soluciones basadas en CSS es la técnica sIFR (Scalable Inman Flash Replacement), que combina CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquier tipografía deseada.

La versión de sIFR recomendada para su uso en sitios web es la versión sIFR 2, ya que la versión sIFR 3 todavía se encuentra en período de pruebas.

A continuación se muestran los pasos que hay que seguir para sustituir el texto con la técnica sIFR:

1) Descarga la última versión disponible de los archivos de sIFR. Actualmente, la versión estable es 2.0.7 y se puede descargar mediante el archivo comprimido sIFR2.0.7.zip. Descomprime este archivo en cualquier carpeta del sistema.

2) El segundo paso consiste en crear un archivo Flash que incluya la fuente que se va a utilizar en la sustitución. Abre el archivo sifr.fla con un editor de archivos de tipo Flash (como por ejemplo el programa Flash Professional). Si no dispones de ningún editor de archivos Flash, más adelante se muestran varias herramientas y utilidades alternativas.

Cuando se abre el archivo sifr.fla, sólo se ve un rectángulo blanco. Pincha dos veces sobre ese rectángulo de forma que se muestre un texto. Selecciona el texto, modifica su fuente por la tipografía que quieres utilizar en el diseño de tu página y guarda los cambios.

Si el texto que vas a sustituir contiene caracteres especiales o caracteres propios de algunos idiomas, debes añadir todos esos caracteres mediante la paleta de Propiedades del texto.

3) Exporta el archivo Flash mediante la opción File > Export > Export Movie (o Archivo > Exportar). Una buena recomendación consiste en guardar el archivo con el mismo nombre del tipo de letra que incluye (arial.swf, verdana.swf, etc.). Una vez creado el archivo, guárdalo en un directorio del servidor en el que guardes todas las fuentes de sIFR (puedes llamar a este directorio fuentes/ por ejemplo).

4) sIFR necesita varios archivos CSS y JavaScript para funcionar. Copia el archivo sifr.js en la carpeta de archivos JavaScript de tu servidor web (normalmente este directorio se llama js/). Copia los archivos CSS sIFR-screen.css y sIFR-print.css en la carpeta de archivos CSS de tu servidor web (normalmente este directorio se llama css/).

5) Todas las páginas en las que se sustituye el texto por Flash deben incluir los archivos JavaScript y CSS. Para ello, añade lo siguiente dentro de la sección <head> de la página:

<head>
  ...
  <script src="js/sifr.js" type="text/javascript"></script>
  ...
  <link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
  ...
</head>

El valor de los atributos src y href debe contener la ruta completa (absoluta o relativa) hasta los archivos JavaScript y CSS respectivamente.

También es posible añadir las reglas de los archivos CSS de sIFR en los archivos CSS propios de la página y así no tener que enlazar otros dos archivos CSS en cada página.

6) A partir de este momento ya es posible sustituir cualquier texto por Flash utilizando instrucciones JavaScript sencillas. A continuación se muestra el código JavaScript necesario para mostrar todos los titulares de la página con una tipografía propia:

if(typeof sIFR == "function"){
  sIFR.replaceElement("h1", named({sFlashSrc: "../fuentes/mifuente.swf"}));
};

El código JavaSript anterior lo puedes colocar en cualquier parte de la página. Algunos diseñadores prefieren colocarlo en la sección <head> donde se encuentran el resto de elementos de sIFR y otros diseñadores prefieren colocarlo justo antes de la etiqueta </body> de cierre de la página.

La sustitución requiere que en la función replaceElement() se indique el selector CSS de los elementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en la sustitución. La única opción obligatoria se denomina sFlashSrc e indica la ruta completa hasta el archivo .swf que contiene la tipografía deseada.

A continuación se muestra una tabla con todas las propiedades de sFIR:

Opción	Descripción
`sSelector`	El selector del elemento o elementos que se quieren reemplazar. Se puede indicar mediante esta opción o como primer argumento de la función `replaceElement()`. Se pueden indicar varios selectores separándolos por comas. Los selectores soportados son los de etiqueta, clase, id y el selector de hijos.
`sFlashSrc`	Ruta completa hasta el archivo `.swf` que contiene la fuente utilizada. Si indicas la ruta de forma relativa, el origen es la propia página HTML.
`sColor`	Color del texto indicado en formato hexadecimal, como por ejemplo `#000000` o `#CC0000`
`sLinkColor`	Color de los enlaces que puede contener el texto
`sHoverColor`	Color del estado `:hover` de los enlaces que puede contener el texto
`sBgColor`	Color de fondo del texto indicado en formato hexadecimal
`nPaddingTop` `nPaddingRight` `nPaddingBottom` `nPaddingLeft`	Relleno superior, izquierdo, inferior e izquierdo del texto
`sCase`	Transformación del texto. El valor `upper` transforma el texto a mayúsculas; el valor `lower` lo transforma a minúsculas
`sWmode`	Esta opción causa problemas en algunas versiones de algunos navegadores, por lo que no se recomienda su uso. Si se le asigna el valor `transparent`, el Flash que sustituye al texto tiene un fondo transparente. Si se emplea el valor `opaque`, el Flash tiene un color de fondo sólido.
`sFlashVars`	Variables adicionales que pueden modificar el aspecto del texto sustituido. `textalign=center` centra el texto de forma horizontal `offsetleft=5` desplaza el texto hacia la derecha los píxeles indicados por el número `offsetTop=5` desplaza el texto hacia abajo los píxeles indicados por el número `underline=true` muestra los enlaces subrayados en el estado `:hover`

El siguiente ejemplo muestra los titulares de sección <h1>, <h2> y <h3> con el mismo tipo de letra y color negro, mientras que sus posibles enlaces se muestran de color azul que cambia a rojo cuando se pasa el ratón por encima del texto:

if(typeof sIFR == "function"){
  sIFR.replaceElement("h1, h2, h3", named({sFlashSrc: "./sifr/vandenkeere.swf", sColor: "#000", sLinkColor: "#336699", sHoverColor: "#CC0000"}));
};

Crear el archivo .swf con la fuente que se quiere mostrar es lo más costoso de la técnica sIFR. Además de ser un proceso manual, es necesario disponer de un editor de archivos Flash. Afortunadamente, debido a la popularidad de sIFR, se han publicado numerosas herramientas para crear los archivos .swf necesarios:

sIFR Generator: aplicación web que genera de forma rápida y sencilla el archivo .swf a partir de una fuente de tipo TrueType (extensión .ttf).
sIFR Font Embedder: aplicación de escritorio que genera el archivo .swf a partir de la fuente seleccionada. Permite añadir fácilmente todos los caracteres especiales deseados. Requiere el uso de un programa externo llamado swfmill y del framework .NET versión 2.0.
Extensión para integrar sIFR en DreamWeaver: extensión para el conocido entorno de desarrollo de sitios web Dreamweaver. Permite configurar todas las opciones de sIFR de forma visual y crea automáticamente los enlaces a los archivos CSS y JavaScript necesarios.

El principal problema de sIFR 2 es que emplea un algoritmo demasiado simple para determinar el tamaño con el que debe mostrar la letra del texto que sustituye. El algoritmo consiste en obtener la anchura y altura del elemento sustituido y después probar diferentes tamaños de texto hasta que se encuentra el que mejor encaja en el sitio disponible.

Debido a este algoritmo tan simple, las fuentes sustituidas por sIFR 2 pueden ser demasiado anchas o demasiado pequeñas comparadas con las originales. Como no existe ninguna opción para establecer de forma explícita el tamaño de letra del texto sustituido, los autores de sIFR 2 sugieren modificar las propiedades letter-spacing y font-size del texto sustituido. La futura versión sIFR 3 utiliza un algoritmo mucho más avanzado que permitirá un control preciso del tamaño de letra