Em Calculator

DanielRGB · #1 (**permalink**) 12/03/2012, 04:15

Buenas,
Para algunos no os hará falta... pero para otros les vendrá de lujo.

Em Calculator
http://riddle.pl/emcalc/

furoya · #2 (**permalink**) 12/03/2012, 10:26

Esa herramienta no es nueva. En verdad aquí no la recomendamos mucho porque da la falsa idea de que se pueden ajustar las medidas en em desde el código fuente como si fueran absolutas. Y no es así.
Las medidas relativas dependen de la configuración del documento. En algún caso podemos (y sería lógico) asignar nuestras medidas en el estilo del body y así arrastrar todas las medidas heredadas; pero acá se juegan otros temas, como la accesibilidad y la interpretación que le hagan los navegadores.

Por otro lado, creo que esa herramienta no toma en cuenta las familias de fuentes. La medida en pixeles de una no tiene que mostrar necesariamente el mismo tamaño en la otra.
Además de tener un bug del cual también se habló por aquí, cuando se le buscaba un uso práctico a la medición de caracteres.

Dejo un ejemplo comparando serif con monospace, y usando los mismos códigos, por supuesto.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
bo/dy {font-size: 100%; }
</style>
</head>
<body>

<h2><span style="color:yellow">█</span> : serif. 
<span style="color:lime">█</span> : monospace.</h2>

<table>
<tbody>
<tr><td style="font-family:serif; font-size: 3em; background-color:yellow; 
line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td><td style="font-family:monospace; font-size: 3em; 
background-color:lime; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td></tr>
<tr><td style="font-family:monospace; font-size: 3em; 
background-color:lime; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td><td style="font-family:serif; font-size: 3em; 
background-color:yellow; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td></tr>
</tbody></table></body>
</html>

Aprovecho el mensaje y pongo algún enlace hacia las decenas de temas donde tratamos el asunto.

Saludos
furoya.

Sobre la medida em

Confimación de fuente instalada.