Día 26: Usar tamaños de fuentes relativos

Los sitios de Internet, con unas pocas excepciones, se centran palabras. Noticias, opiniones, pensamientos, ideas, historias, escritura original, e-commerce: todo en palabras. El diseño visual es importante, sin duda, pero si la gente no puede leer sus palabras, cual es el punto?

En el otoño del 2000, Jeffrey Zeldman afirmó notoriamente que aplicar tamaño relativo a las fuentes era imposible ("pixels, cariño... o nada") debido a una cantidad gigantesca de errores de los navegadores, comenzando con Netscape 4 y terminando en los navegadores mas modernos. Desde entonces, Netscape 4 todavía no ha mejorado, y todavía no se ha ido, pero al menos hemos aprendido uno o dos cosas acerca de amaestrar a los navegadores y hacer una realidad que se pueda aplicar tamaño relativo a las fuentes (Zeldman también; su reencarnado Web Standards Project usa la misma técnica descrita mas abajo).)

Use tamaños de fuente relativos en navegadores que puedan manejarlos, y tamaños absolutos en Netscape 4 que no soporta de manera eficiente los tamaños relativos. Puede hacer esto aun sin el uso de hojas de estilo múltiple. En instantes, les daré soluciones de copiar y pegar para la plantilla por defecto de Movable Type y para todos los temas por defecto de Radio. Y una larga explicación de la técnica en si para ayudarlo a implementarla en otras plantillas.

Quién se beneficia?

  1. Lillian se beneficia. se beneficia. Lillian tiene dificultad para ver las páginas de Internet claramente, debido a nada más que a su edad. Como el 80% de la población de Internet, ella usa Internet Explorer para Windows, que no soporta el cambio de tamaño del texto a menos que el diseñador especifique exclusivamente tamaños de fuentes relativas. Lillian ha cambiado el tamaño de texto por defecto en su navegador (bajo el menú "Ver", "Tamaño de texto"), pero esto no funciona en sitios que usan tamaños absolutos de fuentes. Esto incluye a prácticamente todas las plantillas de registros de apuntes en existencia. Por ejemplo, esta es la forma en que luce la plantilla por defecto de Movable Type para Lillian:

    Impresión de pantalla de la plantilla por defecto de Movable Type de la forma en que la ve Lillian; el text está completamente borroso

    Si la plantilla usara tamaños relativos de fuentes, se vería exactamente igual para la mayoría de los lectores que no necesitan (o les importa) cambiar su tamaño de texto. Pero así se vería para Lillian:

    Impresión de pantalla de la misma plantilla usando tamaño de fuentes relativo; el texto aun se ve borroso pero es lo suficientemente grande como para leerlo

    De nuevo: si la gente no puede leer sus palabras, cual es el punto?

Como hacerlo: Radio

En si Plantilla de Página de Inicio (Home Page Template), busca en la sección <style> cerca al tope por una regla de CSS que se vea como esta:

body, td, th, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

Déjela como está, pero añada esto inmediatamente después:

/*/*/a{}
body,
body td,
body th,
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body,
html>body td,
html>body th
html>body p {
  font-size: small;
}  
/* */

Asegúrese de incluir los comentarios al principio y al final. Son la clave de todo el asunto, como se explica más abajo.

Como hacerlo: Movable Type

La plantilla por defecto de Movable Type es más complicada que las plantillas de Radio, pero vamos a hacer justamente los mismo, pero con mas código. En su plantilla Stylesheet (styles-site.css), añada esto al final:

/*/*/a{}
body,
body a,
body .calendar,
body .calendarhead,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-post,
body .posted {
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small;
}
html>body,
html>body a,
html>body .calendar,
html>body .calendarhead,
html>body .title,
html>body .sidetitle,
html>body .syndicate,
html>body .powered,
html>body .comments-post,
html>body .posted {
  font-size: x-small;
}

body .date {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body .date {
  font-size: small;
}

body #banner {
  font-size: 200%;
}

body .description {
  font-size: 60%;
}

body .blogbody {
  font-size: 110%;
}

body .blogbody,
body .calendar,
body .calendarhead,
body .side,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-body {
  line-height: 128%;
}
/* */

De nuevo asegúrese de incluir los comentarios al principio y al final.

Como hacerlo: explicación detallada

La idea general es que vamos a utilizar palabras claves de tamaño de fuente (font-size). Estas se usan muy poco (debido a errores en navegadores antiguos), pero tienen propiedades interesantes:

  1. No se multiplican. Si tiene una sección "principal" con tamaño de 90%, y dentro tiene una sección "apuntes" con tamaño de 90%, algunos navegadores mostrarán el apunte a 81% (90% x 90%), pero algunos los mostraran a 90%. Con más de un nivel anidado (común en las plantillas que usan tablas para la disposición), el texto se vuelve rápidamente ilegible a medida que los tamaños se combinan. Sin embargo, si su sección "main" tiene un tamaño de small, y la sección de "apuntes" dentro de esta tiene un tamaño de small, todos los navegadores mostraran el texto de la sección "apuntes" en tamaño small.
  2. Pueden aumentar o reducir su tamaño apropiadamente en Internet Explorer para Windows. Esto es extraño, ya que small suena como un valor absoluto (especialmente en luz de que small anidado dentro de otro small aun es small, vea arriba), pero funciona. Que puedo decirle? IE/Win cambia de tamaño con palabras claves para fuentes. Lo juro.
  3. Nunca se ponen demasiado pequeñas. Esa opción de "Tamaño de texto" que usa Lillian en Internet Explorer puede usarse para hacer que el texto se ponga más pequeño así como más grande. Mucha gente con buena visión prefiere que todo se vea una, y hasta dos veces, menores que lo normal. El texto con tamaño establecido en porcentajes tiende a volverse microscópico y borroso cuando se combina con el tamaño más pequeño por defecto. Sin embargo, el texto cuyo tamaño es establecido por medio de palabras claves siempre se mantiene al menos en 9px lo que es legible en cualquier fuente (asumiendo que se tiene buena visión).

Así que vamos a usar palabras claves para especificar nuestros tamaños básicos. Y si necesitásemos controles mas precisos que esos, usaremos porcentajes, pero solamente en clases de páginas que contengan texto (por lo tanto sí en "apuntes", pero no en "principal") para evitar la combinación de porcentajes, no demasiado pequeños, para evitar que se vuelvan microscópicos al combinarse con los tamaños pequeños que usan los usuarios por defecto.

He aquí la idea general de las palabras clave de tamaño de fuentes:

p {
  font-size: 12px;
}

/*/*/a{}
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
  font-size: small;
}
/* */

Hay muchas cosas en acción aquí, y todas son importantes, así que preste atención.

  1. Primero, estamos definiendo un tamaño absoluto (12px) para cada <p>. Todos los navegadores aplican este estilo, incluyendo Netscape 4.
  2. Luego incluimos el extraño comentario "/*/*/". Debido a errores en el Netscape 4, todo lo que está entre este comentario y el siguiente será ignorado. Así es, todos los siguientes estilos se aplicaran solamente a los navegadores que no son Netscape 4.
  3. Inmediatamente después del comentario extraño, incluimos una regla vacía "a {}". Opera 5 para Mac también tiene errores e ignora esta regla (solamente esta regla). Todo lo demás le aplica.
  4. Hemos hecho un reino en el cual podemos definir reglas que aplican a todos los navegadores a excepción del Netscape 4. Ahora podemos comenzar a definir tamaños de fuentes relativos (que Netscape 4 no puede manejar). Lo primero que hay que hacer es usar un selector "body p" para redefinir la conducta de la etiqueta p. Debido a la forma en que funcionan las CSS, esto anulará a nuestro selector p previo. (En términos técnicos, "body p" es un selector más específico que "p".)
  5. Redefinimos el tamaño de fuente para todas las etiquetas <p> al valor de x-small. Esta es una palabra clave cuyo tamaño, de acuerdo a sus ajustes por defecto, Internet Explorer 5 para Windows traducirá a 12px. Sin embargo, si el usuario cambia su "Tamaño de texto" (bajo el menú Ver), este texto aumentará o reducirá su escala, dependiendo en el ajuste del usuario. Esto es lo que queremos (Nota: hemos definido dos veces for un valor para el tamaño de la fuente (font-size) para IE5/Win, pero está bien, porque el selector más específico prevalece siempre, y el selector previo es simplemente ignorado).
  6. Desafortunadamente, IE5/Win tiene las palabras claves desequilibradas por un valor; todos los demás navegadores del mundo (IE5/Mac, Netscape 6, Mozilla, IE6/Win) traducirán x-small a 10px, y no 12px. Afortunadamente, IE5/Win tiene su propio error de análisis gramatical que podemos explotar: cuando analiza ese extraño argumento de voice-family, piensa de manera errónea que el selector "body p" se terminó, y por esto ignora todas las líneas hasta la "}".
  7. Ahora hemos fabricado un reino más pequeño en el cual podemos definir reglas que aplican a todos los navegadores a excepción del IE5/Win (y el Netscape 4, que todavía ignora todo esto). Así que redefinimos el tamaño de la fuente (font-size) a small, que los navegadores modernos que no son IE5/Win (los únicos que siguen escuchando) interpretan correctamente como 12px (de acuerdo a los ajustes por defecto). Otra vez, si el usuario ajusta su "tamaño de texto" a un tamaño mayor, este texto aumentará su escala, que es lo que queremos.
  8. Pero espere! Opera 5 tiene el mismo error de análisis gramatical que tiene IE5/Win, así que también se confundió con el artificio del voice-family, pero interpreta correctamente los tamaños de las palabras clave, así que ahora nuestro texto se verá demasiado pequeño en Opera 5. Afortunadamente, Opera 5 soporta un tercer tipo de selector, "html>body p". (Nuevamente, este es "mas especifico" que "body p", así que toma precedencia sobre el selector previo). IE5/Win no soporta este tipo de selector, así que simplemente lo ignorará, que es lo que queremos (ya que hemos compensado por su error de menos uno al tamaño de las fuentes y no queremos echar eso a perder ahora). IE6/Win tampoco lo soporta, pero eso esta bien, porque lo atrapamos con el "font-size: small" luego del artificio "voice-family: inherit" en el selector "body p". todos los otros navegadores soportan "html>body" selectors, así que para ellos terminaremos definiendo el tamaño de fuente (font-size) cuatro veces. Nuevamente, esto no es un problema, porque el selector más especifico prevalece siempre, y el resto es simplemente ignorado.
  9. Finalmente, hemos puesto un conjunto de comentarios vacíos: /* */. Esto hace que el analizador gramatical del Netscape 4 vuelva a escuchar por nueva vez. Si definiéramos cualquier otra regla después de estos comentarios vacíos, todos los navegadores (incluyendo Netscape 4) la aplicarían.

Para recapitular:

  1. Netscape 4 muestra el texto de <p> con tamaño de 12px, sin importar los ajustes del usuario.
  2. Internet Explorer 5 para Windows muestra el texto de <p> con tamaño x-small, lo que es equivalente a 12px con los ajustes por defecto, pero aumentaría la escala si el usuario ajustara su "Tamaño de texto" a un tamaño mayor en el menú Ver.
  3. Internet Explorer 6 para Windows muestra el texto de <p> con tamaño small, debido a la regla "font-size: small" en el selector "body p". Esto equivale a 12px con los ajustes por defecto, pero aumentaría la escala si el usuario ajustara su "Tamaño de texto" a un tamaño mayor.
  4. Internet Explorer 5 para Mac, Opera, Netscape 6, Mozilla, y (con optimismo) todos los navegadores futuros mostraran el texto de <p> con tamaño small, debido a la regla "font-size: small" en el selector "html>body p". Esto equivale a 12px con los ajustes por defecto, pero aumentaría la escala si el usuario ajustara su función de "Text Zoom".

Lectura añadida

  • Todd Fahrner: El Tamaño Importa: Hacer que Funcionen los Tamaños de Fuentes Relativas, artículo en inglés.
  • Tantek Çelik: Box Model Hack. Como esconder CSS del Internet Explorer 5 para Windows, artículo en inglés.
  • The Web Standards Project también usa palabras clave con el artificio para IE5/Win, aunque usan una solución basada JavaScript (en lugar del artificio de los comentarios) para lidiar con Netscape 4, artículo en inglés.
  • Owen Briggs: Text Sizing. Imágenes de varias técnicas de cambio de tamaño de fuentes relativas a través de diversos navegadores, plataformas, y ajustes de tamaño de texto por defecto, artículo en inglés.

 
<< Día 25: Usar reglas horizontales reales (o simularlas de manera correcta) | Contenido | Día 27: Usar encabezados reales >>