Internet Explorer (en adelante, IE) ha sido el primer navegador que ha empezado a incorporar algunas directivas del Css2. Desgraciadamente el nuevo Mozilla 5 (Netscape 6, en adelante N6) no ha seguido ese camino hasta el fondo y se da la paradoja de que algunas directivas funcionan en IE4 y no funcionan en N6.
El Css2 permite algo que quizá nunca hayamos pensado hacer y nunca desearemos hacer, modificar el cursor que el visitador ve cuando visita nuestra página o cuando lo pasa por encima de algún elemento de ésta. Esta directiva funciona ya a partir de IE4, pero sigue siendo 'buggy' (problemática) en IE5 según algunas fuentes, mientras que N la implementa a partir de N6 aunque no completamente.
Ejemplo:b {cursor: crosshair}
(Pasando el cursor por encima del ejemplo, los usuarios de IE4, IE5 y N6 verán una cruz como cursor)
La tabla en la imagen muestra los posibles valores de esta propiedad, a los que hay que añadir 'pointer' (sólo para el nuevo IE5 para Mac), 'auto', que pone el cursor de defecto y 'uri', previsto por el Css2 como "cursor para el download", pero todavía no implementado por ningún navegador.
El Css2 prevé también un nuevo tipo de fichero gráfico para personalizar cursores.
(Pasando el mouse por encima de la tabla, los usuarios de IE4, IE5 y N6 verán un cursor de ayuda).
Algo mucho más útil. Hasta ahora, si queríamos poner un texto con una fuente que no todos tienen en su ordenador, debíamos crear un gif.
Ahora el Css2 permite introducir una fuente en una página web, de forma que podemos utilizar cualquier fuente que queramos.
Se trata de una de las At-Rule (regla arroba) que formaliza el Css2.
@font-face
{
font-family: lepanto;
src: (fonts/chicho.eot)
}
H3 {font-family: lepanto, arial}
Es decir, la At-Rule da un nombre ("lepanto", por cierto no sé si existe) y un url relativo (fonts/chicho.eot) para la fuente que luego puede ser usada en cualquier tag. Si la fuente no puede ser descargada o visualizada, o si el navegador no comprende la regla arroba, el tag H3 se visualiza con la fuente arial.
Suena magnífico, pero a la hora de la verdad los problemas son muchos.
Para empezar, ¿de dónde se saca el fichero Embedded OpenType (.eot) ?
Lo razonable es que hubiera un programita freeware que chupara un ttf y devolviera un .eot. Pero la teoría de las fuentes bajables es que tienen que funcionar sólo para las páginas que las quieran. Es decir, la fuente no se instala en el sistema del visitador, sino que es utilizada por el navegador limitadamente a la página web de marras. Esto es así para garantizar los derechos de los creadores de fuentes. Y el espíritu original de Internet se va a tomar aire.
Entonces el programa que crea .eot analiza la/s página/s web en la/s que la fuente tiene que ser visualizada y escupe como resultado el fichero .eot, buscando él solito el arichivo ttf. Dicho programa es el Weft de Microsoft, gratuito, que por fin en su actual versión 5.3 (aunque Microsoft a veces la llame 3.2) puede dejar de ser considerado una beta y ha dejado de estrellarse nueve veces de cada diez. Ahora sólo lo hace cuatro de cada diez.
La fuente descargable podría estar también en formato TrueDoc (.pfr), que es el que utiliza N4 (que no entiende el .eot) y que IE entiende si el usuario tiene Windows 98 ó Windows NT. En el caso de Windows 95, hay que instalar el Microsoft Font Smoother. Para crear estos archivos se usaba el programa Bitstream WebFont Wizard, de pago aunque existía una versión de prueba para diez días o 10 fuentes. La relación con este programa era mucho más llevadera que con el de Microsoft y parecía que este estándar estaba más difundido en la red.
Este artículo, escrito a finales del año 2.000 tenía los tiempos de la frase precedente en presente. En 2.004 los he cambiado al pasado. La situación actual es la siguiente: El Bitstream WebFont Wizard está discontinued, es decir que la empresa Bitstream ha abandonado el proyecto. Así pues ya sólo queda el Weft de Microsoft, que no conoce nuevas versiones desde febrero de 2003. Su uso es algo complicado, pero finalmente el resultado qyue se obtiene suele ser satisfactorio.
¿Todas las fuentes pueden ser llevadas a .eot? No, sólo las TrueType, OpenType y PostScript Type 1 cuyos creadores hayan permitido su "bajabilidad" a navegadores (o sepan de la existencia de esta posibilidad) tienen esta opción.
Por último hay que señalar que el servidor en el que se albergue el archivo .eot tiene que tenerlo como tipo MIME.
En definitiva, hoy en día empaquetar una fuente en una página web resulta complicado, pero posible.
Independientemente de la esperanza de que todo esto un día funcione fluidamente, el Css2 pone agua en la boca de cualquier diseñador: prevé la posibilidad de especificar las características de la fuente a utilizar (peso, anchura, ángulos, número Panose-1) y que el navegador encuentre la que mejor se adapte a estas condiciones en el sistema del usuario o incluso cree una ad hoc.
También hay que decir que de 2.000 a 2.004 se ha hablado poquísimo de este tema y no se nota ningún debate en este sentido en el ambiente del diseño de las páginas web. Los grafistas parecen haber decidido que cuando se quiere una fuente especial se echa mano del Photoshop, y la teoría descrita en esta página es desconocida o ignorada por todos.
Llegamos al control de la impresión a través de las hojas de estilo. El Css2 permite estilos diferentes para cada medio, por ejemplo en pantalla y en impresión. Para ello, se utiliza otra regla arroba, @media.
Ejemplo:@media screen
{
body {background: black; color: white}
P {font-family: verdana, sans-serif}
}
@media print
{
body {background: white; color: black}
P {font-family: times, serif}
}
El ejemplo anterior da problemas en N4 y en IE4. Conviene entonces separar las hojas de estilo para cada medio.
Ejemplo:
<HEAD>
<LINK rel="stylesheet" media="screen" href="screen.css"type="text/css">
<LINK rel="stylesheet" media="print" href="print.css"type="text/css">
</HEAD>
Los medios pueden ser también otros:
handheld — para aparatos handheld como PalmPilots (¿?).
projection — para proyectores y para impresiones en transparencias.
tv — para televisión.
tty — para teletipos y terminales que usan rejas de caracteres de dimensión fija.
aural — para sintetizadores de voz.
braille — para aparatos que traducen en braille.
embossed — para impresoras en braille.
all — para todos los medios.
@media aural
{
/* aquí ponemos la "aural stylesheet" */
}
Para la "aural stylesheet" (hoja de estilo áulica) hay toda una serie de propiedades que controlan el volumen, adónde van las pausas y un montón de otras cosas divertidas.
La regla arroba @media ya funciona en IE4, IE5 y N6, aunque no todas las propiedades están todavía disponibles.
IE4 es el primero en soportar las propiedades page-break-after y page-break-before. La mala noticia es que N6 todavía no las implementa y que en los navegadores de Microsoft son de todas formas problemáticas.
Ejemplo:P.break {page-break-after: always}
Este código forzaría la interrupción de la impresión de la página después de cualquier bloque
<p class="break">...</p>Los valores para esta propiedad son 'auto', que deja la interrupción por defecto y que por lo tanto es el valor por defecto de esta propiedad, 'always', que fuerza la interrupción, 'left' y 'right', que fuerzan la interrupción de 1 o 2 páginas después del párrafo de clase "break", para que la siguiente sea una págia de izquierda o derecha respectivamente. Parece ser que la comprensión que IE 4 y 5 tienen de estos dos últimos valores resulta tan imprevisibles que su uso es imposible. La del valor 'always' tampoco es indolora para el diseñador.
Todo lo dicho se transfiere de forma obvia a la propiedad page-break-before: los valores se aplican antes del
<p class="break">...</p>También esta propiedad la implementan sólo IE4 e IE5.
El Css2 prevé otras propiedades (interrupción de página en el interior del párrafo, número de líneas de un párrafo que pueden quedar huérfanas al fondo de una página) para las hojas de estilo de impresión, pero al no estar implementadas no las comentamos.
Lo más interesante de esta cuestión es que estas propiedades están en el DOM, es decir, son modificables mediante Javascript, y por lo tanto viven en el reino del DHTML. La forma de referirse a estas propiedades en los navegadores de Microsoft es:
[window.]document.all.nombre_del_elemento.style.pageBreakAfterEjemplo:
[window.]document.all.nombre_del_elemento.style.pageBreakBefore
document.all.parrafo.style.pageBreakAfter = "always"
La presente página web tiene dos hojas de estilo, una para la pantalla (stscr.css) y otra para la impresión (stpr.css). Mientras en pantalla se ve caracteres sans-serif de 14px con una separación entre líneas de 25px, en la hoja salen impresos caracteres serif de 14 px con una separación entre líneas de 15px. De hecho, se supone que en pantalla es más fácil leer líneas muy separadas con caracteres sans-serif y lo inverso vale para lo impreso.
El estilo table-layout: fixed aumenta drásticamente la velocidad de rendering de las tablas. Parece ser que IE5 da problemas con esta propiedad, mientras que N6 se comporta bien.
Ejemplo:<table style="table-layout: fixed" width="600">
<tr weight="30">
<td width="150">xyz</td>
<td width="200">xyz</td>
<td width="250">xyz</td>
</tr>
Con este estilo, el navegador lee sólo lo aquí escrito y no espera que le llegue toda la tabla para empezar a visualizarla. Si luego el contenido de alguna celda es mayor de lo previsto, el navegador lo adapta a las dimensiones declaradas.
El resultado es una velocidad de rendering mucho mayor. Microsoft ofrece este ejemplo excelente. (El efecto del cursor al pasar sobre el link es deseado).
Lo pesado ya ha pasado. Queda uno fácil. ¿Qué pasa si quiero hacer una página en árabe o en hebreo, lenguas que se leen de derecha a izquierda? La propiedad direction trae al Internet estas lenguas.
Ejemplo:H3 {direction: rtl}
Los valores posibles son:
rtl — de derecha a izquierda (right to left).
ltr — de izquierda a derecha (left to right).
inherit — el valor heredado del elemento padre o pariente.