Typeface.js: generando texto con Javascript, canvas y VML
Un problema habitual en el diseño web es conseguir que las fuentes se dibujen de la misma manera en cada navegador, ya que, a pesar de que CSS es un estándar, la implementación de CSS que hace cada navegador dista bastante de ser uniforme (¿alguien ha dicho Internet Explorer?).
La solución tradicional a este problema solía ser la de crear los textos necesario mediante imágenes. La ventaja de esto es que el aspecto en cada navegador sería exactamente el esperado, y no hay límites en cuanto a los efectos o fuentes que se quieran usar... Pero es muy poco flexible, ya que para cada texto hay que crear la imagen correspondiente.
La siguiente solución es la creación las imágenes mediante flash. Esta solución es bastante versátil, pero tiene el problema de la accesibilidad del texto de cara a su indexación por los motores de búsqueda (aunque mitigada con las últimas actualizaciones de Google, esto sigue siendo un problema de cara a la optimización del contenido para los buscadores).
Aquí es donde entra typeface.js: nos permite de una manera sencilla (ver el código a continuación), multiplataforma (no importa el navegador) y flexible (permite aplicar diversos efectos que los navegadores no implementan de una manera uniforme) dar estilo a los textos de la página. Con algo como esto ya se dibujarían los textos...
<script type="text/javascript" src="typeface-0.10.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> <div class="myclass typeface-js" style="font-family: Helvetiker"> Text here in Helvetiker font... </div> |
Y uno de los resultados de uso podría ser el siguiente, sacado de su web...
Aunque evidentemente, esto no es tan maravilloso. El renderizado aún no es del todo eficiente, y aunque funciona bien para títulos y apartados concretos, dibujar toda la web mediante typeface.js es muy costoso. En cualquier caso, si os interesa no dudeis en echar un ojo a los ejemplos y a la explicación de su uso...
Más información | Typeface.js
Vía | Delicious Popular.
Cambiar la Hoja de Estilos (CSS) mediante JavaScript
Uno de los objetivos del blog es la publicación de aquellos fragmentos de código que sean útiles en el día a día, y eso es precisamente con lo que lo voy a inaugurar. Con la siguiente función javascript se puede cambiar la hoja de estilos de la página web (el CSS) a cualquiera de las incluídas en la página.
La función en cuestión es la siguiente:
function cambiarHojaDeEstilos(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
} |
Para usarla, basta tener varias hojas de estilos cargadas en la página...
<link title="hoja1" href="ejemplo1.css" rel="stylesheet" type="text/css"> <link title="hoja2" href="ejemplo2.css" rel="stylesheet" type="text/css"> <link title="hoja3" href="ejemplo3.css" rel="stylesheet" type="text/css"> |
... e invocar a la función. Por ejemplo, para cambiar al hacer click en un enlace:
<a href="#" onclick="cambiarHojaDeEstilos('hoja1');">Cambia el CSS</a> |
A continuación podéis descargar un pequeño ejemplo con una demostración simple: Cambiar Hoja de Estilos con JS
Vía | A List Apart.