Mi espacio

Desde hace algún tiempo vengo observando que Chrome renderiza la tipografía básica de la web ligeramente más grande que Firefox cuando el tamaño de especifica con medidas relativas em. Tengo que reconocer que estoy usando Chrome como navegador por defecto desde comienzos año, y ha sido entonces cuando he podido comprobar que ciertas páginas rompían su layout a consecuencia de este problema.

A continuación podéis ver dos capturas de pantalla de una misma página web, realizadas con UploadScreenshot en Chrome 10.0.648.205 y Firefox 3.6.16, ambos sobre Ubuntu 9.

Captura de pantalla realizada en Chrome

Captura de pantalla realizada en Firefox

Las propiedades CSS de la hoja de estilos aplicada al párrafo en cuestión son:

1
2

font-size: 0.9em; /* aplicada explícitamente al párrafo */
font: 10pt Arial,Helvetica,sans-serif /* heredada desde body */

Usando la herramienta para desarrolladores que incorpora Chrome podemos ver los estilos que realmente se están aplicando al párrafo. Se han eliminado algunas propiedades que nada tienen que ver:

1
2
3
4
5
6
7
8
9

color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
text-align: left;
vertical-align: baseline;

Usando el plugin Firebug en Firefox se comprueba que las propiedades que se aplican realmente son:

1
2
3
4
5
6
7
8
9
10
11
12
13

font-family: Arial,Helvetica,sans-serif
font-size: 12px
font-weight: 400
font-style: normal
color: #555555
text-transform: none
text-decoration: none
letter-spacing: normal
word-spacing: 0
line-height: 16px
text-align: left
vertical-align: baseline
white-space: normal

Está claro que algo se me tiene que estar pasando, pero parece que a otros también porque cuando Javier Cañada me dio a conocer filmin pude comprobar como el layout tenía problemas en Chrome. Y digo problemas porque había textos que dejaban de leerse al quedar ocultados por otros elementos.

¿Alguna idea? Yo mientras tanto prometo seguir investigando.

JSONView es una extensión de Firefox que he conocido hoy. Cuando uno trabaja con JSON, resulta de mucha utilidad poder visualizarlos en el navegador tabulados y coloreados, especialmente si se está desarrollando. Hasta ahora usaba SOAPUI, pero nunca viene mal tener a mano una extensión como esta.

Os animo a que visitéis el sitio web de Benjamin Hollis, el autor de esta extensión. Desde luego este chaval no pierde el tiempo, pero es que sus padres tampoco.