Lo hice y lo entendí

El blog de Vicente Navarro
28 oct

Los DPI en los navegadores web de Windows y Linux

En la entrada anterior, Los DPI en pantalla en Windows y Linux, hemos visto cómo gestionan los sistemas operativos los DPI de la pantalla. Sin embargo, tanto en Windows como en Linux podemos encontrarnos con que tras modificar la configuración de los DPI, las fuentes de los textos del navegador no sean escaladas proporcionalmente al valor de DPI del sistema operativo. Es importante aclarar que no estamos hablando de las fuentes del menú, barra de aplicacione, iconos, etc. que esas sí que se escalan correctamente, sino a las fuentes del texto de las páginas a las que se accede.

Para intentar aclarar el problema, primero nos tenemos que fijar en las unidades de medidas que define el estándar CSS 2.1. Por un lado tenemos las unidades de medidas relativas a otra unidad:

  • em: the ‘font-size’ of the relevant font
  • ex: the ‘x-height’ of the relevant font
  • px: pixels, relative to the viewing device

Podemos pensar que un número de pixels px no es una unidad de medida relativa, pero sí que lo es si pensamos que la página se puede mostrar en papel si la imprimimos o en monitores muy grandes, muy pequeños, en un proyector. Tú pones px cuando diseñas la página web pero luego ese pixel puede medir físicamente un centímetro si se muestra en un proyector. De ahí la relatividad de dicha medida.

Para una pantalla, el estándar indica como referencia que estando los ojos a una distancia de un brazo (28″) de la pantalla, un pixel ha de verse con un tamaño de 0.26mm (1/96 in) o, lo que es lo mismo, 96 DPI:

CSS 2.1 pixel

Por otro lado, tenemos las unidades de medida absolutas para las que es necesario conocer las dimensiones físicas del dispositivo de salida:

  • in: inches — 1 inch is equal to 2.54 centimeters.
  • cm: centimeters
  • mm: millimeters
  • pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
  • pc: picas — 1 pica is equal to 12 points.

Vemos que pt se define como puntos de 72 DPI.

El tamaño original de las fuentes se mide en puntos de 72 DPI, por lo que si especificamos en nuestra hoja de estilo que:

font-size: 16px

como 16px de 96 DPI son 12pt de 72 DPI (16/96=12/72), en realidad dicha fuente será renderizada en pantalla con “12 pixels reales”, no con 16. Para verificarlo, podemos usar el siguiente documento HTML:

<html>
   <head>
   </head>
   <body style="font-family: sans-serif; font-size: 16px">
      Lhyle
   </body>
</html>

Lo abrimos con el navegador (Iceweasel en el ejemplo, pero es lo mismo en otros como IE o Konqueror), capturamos la ventana, la ampliamos y vemos que la fuente tiene 12 pixels de alto en realidad (los he marcado con pixels rojos y negros):

Iceweasel 16px Lhyle

Las unidades más útiles para un desarrollador web a la hora de definir los tamaños de las fuentes son px y pt.

Si el diseñador de la página usa px para elegir el tamaño de las fuentes de su página, independientemente de los DPI de la pantalla o del sistema operativo, las fuentes deberían de ser mostradas siempre usando el mismo número de pixels, lo que causará que se vean muy pequeñas en pantallas de muchos DPI y grandes en pantallas de pocos DPI. A cambio, tendrá la seguridad de que el diseño de su página no se echará a perder si el usuario decide aumentar o reducir los DPI de su sistema.

Si, en cambio, el diseñador de la página decide usar pt, la situación es la inversa. Su página se adaptará perfectamente a las necesidades de visión del usuario, dándole una gran accesibilidad, pero ha de diseñar la página muy cuidadosamente para que un aumento del tamaño de las fuentes no rompa la estética.

Veamos algunos ejemplos para ilustrar lo anterior usando el siguiente documento HTML en el que usamos una fuente de 16px y otra de 12pt:

<html>
   <head>
   </head>
   <body style="font-family: sans-serif;">
      <div style="font-size: 16px;">Lhyle 16px</div>
      <div style="font-size: 12pt;">Lhyle 12pt</div>
   </body>
</html>

Probamos en Windows. A 96 DPI, vemos que ambas fuentes son iguales, tanto en Internet Explorer como en Firefox:

IE FF 96 DPI

A 120 DPI, la fuente de 12pt es más grande que la de 16px, que permanece igual:

IE FF 120 DPI

A 72DPI, la fuente de 12pt es más pequeña que la de 16px, que de nuevo permanece igual:

IE FF 72 DPI

Por tanto, ya vemos que la página web sólo se adapta bien a nuestras necesidades de visión cuando el desarrollador de la misma ha decidido usar una métrica absoluta y no una relativa. Parece una contradicción, ¿verdad? Intuitivamente parece que “una fuente con métrica relativa” sería la que se ajustaría dinámicamente. Al final todo depende de las definiciones.

Bueno, pues a partir de ahora nuestro objetivo es llevarle la contraria al diseñador web que ha diseñado su página poco accesible para ver las fuentes con el tamaño que nosotros queramos.

La alternativa más clásica es agrandar o empequeñecer las fuentes de la página actual. En Firefox y Konqueror lo podemos hacer con Control++ o Control+- (o Control+rueda del ratón). En Internet Explorer también hay un menú para cambiar el tamaño de la fuente, pero no parece que haga nada de nada.

Este es el documento HTML de antes en Firefox en 96 DPI tras hacer tres veces Control++:

FF 96 DPI Ampliado

Desafortunadamente, dicho valor no se almacena en ningún sitio, ya que se trata de una medida temporal y no pensada para dejarla así indefinidamente, ya que podría causar que muchas páginas se vieran mal.

Si estamos en Windows y queremos usar Internet Explorer 6 con un valor de DPI diferente a 96, tenemos la posibilidad de que las fuentes de la página también se rendericen con un tamaño proporcional a los DPI del sistema, como nos cuenta el documento de Microsoft: Windows XP and Windows 2000 do not natively support high-DPI screens. Para ello tenemos que crear la siguiente entrada en el registro:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main
UseHR= dword:00000001

Y el resultado es este a 120 DPI:

IE FF 120 DPI UseHR

Es una alternativa muy interesante para navegar con unas fuentes adecuadas para tu sistema si no quieres usar Firefox. La alternativa que ofrece Firefox de ampliar el texto de las páginas on-demand puede ser mejor o peor que la de Internet Explorer según las circunstancias, pero no estaría de más que Firefox permitiera hacer lo mismo con algún parámetro del about:config.

El parámetro layout.css.dpi, ¿un bug de Firefox/Iceweasel?

En sistemas UNIX (en Windows no existe), Firefox tiene un parámetro que podemos cambiar en el about:config llamado layout.css.dpi que permite sobreescribir la configuración de DPI del sistema:

  • -1 Use the host system’s logical resolution or 96, whichever is greater, for interpreting dimensions specified in absolute units. (Default)
  • 0 Use the host system’s logical resolution for interpreting dimensions specified in absolute units.
  • (any positive integer) Use this number for interpreting dimensions specified in absolute units.

Pero curiosamente funciona al revés. La fuente especificada con medidas absolutas no cambia y sí lo hace la fuente especificada con medidas relativas.

120 DPI:

Firefox Bug 120 DPI

72 DPI:

Firefox Bug 72 DPI

Yo estoy convencido de que se trata de un bug… ¿A alguien más le pasa? En el bugzilla no parece que esté reportado.

Actualización 28/10/07: He estado probando en otro sistema con Debian 4 con el Iceweasel de la distribución y con un Firefox 2.0.0.8 oficial bajado de la web y allí hace lo esperado en ambos casos. ¿Es un bug que sólo me pasa a mí y sólo en este PC?

El futuro está en el Zoom

En lo que llevamos de entrada hemos estado hablando sobre cómo ampliar y reducir las fuentes de una página web en nuestro navegador, y ya hemos dicho que dicha ampliación puede estropear el diseño de la página.

Pero, ¿no se podría hacer un Zoom de la página y mostrar todo igual que a 96 DPI pero más grande o más pequeño? Un Zoom que ampliara fuentes, imágenes y todo el diseño al unísono evitando el aliasing hasta donde fuera posible sería la solución perfecta.

Y es por ahí por donde van los tiros para el futuro: Internet Explorer 7 soporta hacer zooms de la página, no sin problemas (ver los comentarios del enlace anterior), Opera soporta el zoom desde hace muchos años y será precisamente el Zoom una de las grandes novedades de Firefox 3 tras el cierre del Bug 389628 – Implement UI for full page zoom.

Actualización 20/12/08: Relacionado: Making the Web Bigger: DPI Scaling and Internet Explorer 8

:wq

Entradas relacionadas

3 Comentarios a “Los DPI en los navegadores web de Windows y Linux”

  • Sagman dice:

    Yo con Compiz-Fusion si necesito ver una imagen más grande o algo pues hago Win+rueda del raton :P

  • @Sagman ¡Y lo que nos queda por ver del Compiz y similares! ¡Que el KDE 4 también está a la vuelta de la esquina! :)

  • Sagman dice:

    Pues si, KDE4 promete muchísimo, tengo ganas de verlo y tenerlo porque he visto fotos muy impresionantes. Y si unen elegancia y eficiencia pues aún mejor. Pero si además carga rapidamente es que se merecen no un 10, un 1000! :)

Tema LHYLE09, creado por Vicente Navarro