Valores decimales en CSS

He hecho una página para que experimentes este fenómeno con tu navegador: → Probador interactivo de medidas decimales en CSS.

En cada navegador he empezado con una línea de 0px y he ido aumentando el grosor muy poco a poco, cada vez añadiendo más decimales, hasta encontrar el punto en que sumando un poquito más al último decimal ya pasa a verse con 1px (aunque sea 0 coma algo). Por ejemplo, un Firefox que probé tenía ese límite en 0.03333333320915699352px, pues cambiando el último 2 por un 3, la línea ya se veía con 1px en vez de con 0px.

También he medido el límite entre 1px y 2px, y eso es la segunda columna.

Navegador	Límite entre 0px y 1px	Límite entre 1px y 2px
Firefox 2 en Windows	0.03333333320915699352	1.63333338499069202764
Iceweasel 3.0 en Debian	0.0083333323709666720299	1.991666615009307972404637571
Firefox 3 en Windows	0.00833333330228924838017912080090	1.9916666150093079723504274625156540
Epiphany 2.22.3 (basado en Gecko 1.9) en Debian	0.00833333237096667202	1.991666615009307972404
Internet Explorer 6 y 7 en Windows	0.9999999999999999999	1.9999999999999999999999
Konqueror 3.5.9 y 4.0.3 en Debian	0.02499999944120645696	1.9999999403953551135870
Opera 9.51 en Windows	0.99499997496604913882478	1.9949999451637269176629
Midori 0.1.0 en Debian GNU/Linux	0.9900000000000000466293670342565746977925	1.9900000000000001021405182655144017189741134643554
Chrome 1.0 en Windows XP	0.989999979734420720879999999999	1.98999994993209827775990999999

Puede parecer una pérdida de tiempo preocuparse por los medios píxeles, y de hecho lo es. Lo malo es que este tema es el causante de problemas que pueden ocurrir en el «mundo real»; pondré un ejemplo:

Tenemos un espacio de 450px como éste

Hay que dividirlo en 10 bloques. Fácil: 450/10 = 45px por bloque:

          

Ahora hay que poner una segunda fila pero con 11 cuadros en vez de 10. 450/11= 40'9090909 px. ¡Vaya! Bueno, pues pondremos width:40.90909px en el CSS:

           

No sé cómo lo va a mostrar tu navegador; quizás muestra las 3 filas igual de largas; si lo hace es que es muy inteligente, y lo hace bien. Pero si opina que 40.90909px es igual que 40px, entonces la tercera fila (la de 11) medirá 11*40px=440px. Y tenía que ser de 450px. 10px menos se notan mucho, así que este problema no es despreciable.

Ahora pondré un espacio de 200px, luego 2 de 100px, luego 3 de 66.66px, … así hasta 10 de 30px. Le estoy cambiando el width por CSS. Debajo (en el 2º cuadro) hago algo parecido pero cambiando el border-right-width (primero 200px, luego 100, luego 66.66, …).

Ahí puedes ver cuán bueno es tu navegador; lo ideal sería que el borde derecho no se viera escalonado. Firefox, como ya dije, es muy listo y aplica una corrección al width para rectificar y compensar los errores de redondeo, de manera que los errores se anulan poco a poco y al final todo mide lo mismo. Esto sólo lo hace cuando encuentra decimales en width (ej. primer cuadro), pero no en otras propiedades como border-width (ej. segundo cuadro).

Pongo 3 capturas de pantalla para que veas cómo se han comportado otros navegadores. Son Iceweasel (es otro nombre de Firefox), Konqueror (el de KDE), Midori:

Habría que mirar el código fuente de cada programa para saber si está haciendo algo especial para detectar decimales en medidas pixelares.

Pero el hecho de que todos tengan problemas lleva a pensar en un problema más básico, y es el cómo los ordenadores graban los números decimales. Usan el formato llamado coma flotante y está lleno de sorpresas, por ejemplo: el ordenador cree que 0'1 sumado diez veces es un resultado distinto a 0'1 multiplicado por diez. Éste es el motivo de los cálculos hechos por el ordenador nos parezcan tan extraños.

Recomiendo leer esta sencilla introducción a los errores de precisión en coma flotante, de la documentación de Python.

Puedes encontrar más sobre este problema buscando palabras como css subpixel rendering. He encontrado otras explicaciones y juegos de pruebas, por ejemplo:

• Sub-pixel problems in CSS (y traducido)
• CSS sub-pixel background misalignments
• qué hacer si dos elementos siempre están desalineados por 1px

¿Y si 0'5 px encendiera sólo medio píxel? Ya que la pantalla no puede hacerlo (pues el píxel es la unidad mínima), el trabajo de pintar los semi-píxeles lo tiene que hacer el navegador. Por ejemplo, encendiendo 1 pero a medias: usando opacity:0.5;. Sería como la tecnología de desglose en subpíxeles en un LCD pero hecha por el mismo navegador.

De esta forma, un párrafo con border: 1.5 px solid red; se vería rodeado de:

• una línea de un color rgb(255,0,0)
• y una externa de 1px pero con color rgba(255,0,0,0.5) (o sea, rojo semitransparente)

A través de esta segunda se podría ver un poco el fondo (debido a la transparencia), y eso es lo que tocaba pues el teórico „píxel pintado a medias“ también dejaría un 50% de píxel a través del cual se vería el fondo.

Además este truco funciona con cualquier porcentaje de píxel: 1.1px sería una línea de 1px más una de 1px con opacidad 0'1 (10%).

Incluyo estas tablas detalladas ya que este fenómeno no pasa sólo en un número concreto. Ej. si el punto límite es 0.024 (porque con 0.025 ya se ve 1px), el comportamiento extraño también se aprecia cuando se usan 2 decimales (ej. 0.02 vs 0.03) y cuando se usa uno (ej. 0.0 vs 0.1). Por eso he listado el punto límite para cada nivel de precisión. Hasta varios niveles (pero en muchos casos se podría seguir precisando y se obtendrían números más curiosos).

• Autor: Daniel Clemente Laboreo (web, correo).
• Investigación hecha en 2008 (aunque desde m10.2007 y actualizándolo por última vez el 21.m12.2011).
• Código fuente de esta página: abre index.org (aviso: contiene mucho Lisp). Y luego está el JavaScript raro de provu.html (ahí la coma flotante también dio pelea).
• Texto y código en dominio público; lo puedes usar como quieras sin pedirme permiso.

---