PXtoEM: para convertir unidades absolutas en relativas

Tal y como lo explica muy bien por cierto, en el blog de CarlosLeopoldo, cuando habla sobre las unidades de medida en CSS, es necesario tener en cuenta los siguientes conceptos:

Uno de los elementos más importantes del diseño web son las medidas porque tiene un gran efecto en la accesibilidad de un sitio web. En CSS el valor de una propiedad, tal cómo font-size, se puede expresar en unidades de longitud o en unidades de porcentaje. veamos las unidades que tenemos disponibles:

Unidades de longitud

Unidades absolutas [in (pulgadas), cm (centímetros), mm (milímetros), pt (puntos), pc (picas) y px (pixeles).

Unidades relativas (em y ex).

Unidades de porcentaje (%).

¿Por qué no debemos utilizar unidades absolutas? Las unidades absolutas como px (pixeles), cm (centímetros), pt (puntos), permiten un control exacto de la apariencia de la página, siempre y cuando, claro está, que esta se visualice en el entorno preciso para el que fue diseñada (lo cuál le quita accesibilidad a la página). Por ejemplo, la unidad px tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de computadora del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si utilizamos pt (puntos) en lugar de px (pixeles) el tamaño del punto depende de la resolución de la pantalla del usuario. Puedes ver un ejemplo de esto en el siguiente enlace. La mejor opción es em. De todas estas unidades la que yo les recomiendo son las relativas en especial em anteriormente la unidad em era el equivalente a la altura de la M mayúscula. Sin embargo actualmente es igual a la altura de la letra del elemento en el que se usa. Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página. Ademas la unidad em puede utilizarse para cualquier propiedad CSS que admita medidas (márgenes, sangrías…) lo que permite un diseño proporcionado al sistema del usuario.

En la página webstudio.cl, nos dan las siguientes razones:

pt (puntos) es una unidad de medida eminentemente tipográfica, sin embargo no es apropiada para la pantalla, por varias razones, entre ellas el hecho de que no es proporcional, pese a que browsers modernos realicen un escalamiento proporcional (Mozilla, Opera). Adicionalmente, un punto no siempre es exactamente equivalente a un píxel: en Windows un punto se traduce a 1.3 píxeles y en Mac el equivalente es uno a uno, por lo que los resultados en diversas plataformas son imprecisos. En conclusión, es mejor utilizar esta unidad de medida para especificar hojas de estilo especiales para impresión.

px (píxeles) es una unidad de medida absoluta y mapeada directamente a la resolución del monitor. Si bien es posible (y aconsejable) escalarla.

em es una medida inherentemente tipográfica y proporcional, y es la más apropiada para la pantalla.

% (porcentaje) es una unidad de medida relativa que se ajusta perfectamente al uso en monitor, pero que puede llevar a ciertas impresiciones conceptuales. Prefiero utilizar porcentajes para especificar bloques en lugar de textos.

Sobre este tema también podemos darle un vistazo al blog Vagabundia sobre el asunto de las unidades de medidas en CSS.

Aunque para realizar dichas conversiones podemos dar un vistazo a cualquier tabla que tengamos a mano, como por ejemplo la que podemos encontrar en Approximate Conversion from Points to Pixels (and Ems and %) de RedDesign. Una tabla que convierte los puntos en píxeles, en Ems y en %. Es una aproximación, que dependerá del tipo de letra, navegador y sistema operativo, pero es un buen punto de partida, aunque existen muchas más por la Red.

Pero tenemos otro sistema más sencillo y útil para realizar ese tipo de conversiones, que he localizado a través de Nettuts, donde hace referencia a la página PXtoEM, que nos proporcionan una forma muy rápida y sencilla de convertir las unidades de medida en CSS, de unidades absolutas en relativas (de PX a EM).

De ese modo no necesitamos el sacar la calculadora cada vez que deseas realizar esas conversiones o ir a las tablas. En muchas ocasiones seleccionamos simplemente los píxeles, por la razón de que es el método más rápido, y así no tenemos perdemos el tiempo en determinar el valor correcto. Afortunadamente, disponemos de un servicio en línea llamado PXtoEM , que hace que sea sencillo y rápido realizar dichos cálculos, y convierte las unidades absolutas en relativas ( los píxeles en EM), de una manera muy sencilla, todo lo que nosotros debemos tener muy claro es saber cual es el tamaño base del tipo de letra que deseamos emplear. El proceso lo realizamos en tres sencillos pasos, y nos muestra los resultados en las tres columnas que aparecen en la pantalla: 1. En la columna de la izquierda, seleccionamos el tamaño del cuerpo del tipo de letra en la tabla que nos proporciona. El tamaño por defecto para cualquier navegador es 16px, tal y como aparece en la tabla.

2. Si en dicha tabla pulsamos en cualquier tamaño del texto, como por ejemplo 15 px, nos da las conversiones que aparecen en la columna del centro, sobre la base del cuerpo del texto seleccionado, como puedes ver en la siguiente ilustración:

3. En la columna de la derecha nos muestra el resultado de los cálculos, como puedes ver en la siguiente ilustración:

En dicha columna cuado pulsamos sobre el botón de conversión que deseemos nos proporciona los resultado de la conversión. Pero una de las cosas que más me ha gustado son dos, de de los tres botones que tenemos en la parte superior, si pulsamos:

Si seleccionado "2. Get CSS", nos proporciona la creación del código CSS, que es todo lo que necesitamos para comenzar a trabajar con nuestra página, por supuesto lo podemos copiar y cambiarlo de acuerdo con nuestros gustos.
Si selecciomanos "3. Learn", nos proporciona una pequeña explicación con algunos enlaces sobre el tema que nos ocupa.

Escrito por Toni

Comparte este artículo:

Estas son las categorías a las que pertenece el artículo PXtoEM: para convertir unidades absolutas en relativas:

Curiosidades, Desarrollo web, CSS, HTML

Insertar un Comentario