uso de las unidades de medida en las pe

8/18/2019 Uso de Las Unidades de Medida en Las Pe

1/6

USO DE LAS UNIDADES DE MEDIDA EN LAS PE.

Los libros electrónicos en formato EPUB usan, como las páginas web

en HTML, estilos CSS. Es esta hoja de estilos CSS la responsable deaplicar un tamaño de letra a los diferentes párrafos, titulares, etc. asícomo determinar la medida de las imágenes, los márgenes, etc.

Ahora bien, existen multitud de varas de medir en CSS. Hay unidadesque son absolutas (como el centímetro, el píxel) y otras que sonrelativas al tamaño de la pantalla o al tamaño de la tipografía. Si aesto le sumamos que hay multitud de tamaños de pantalla o visor, junto con otra disparidad de resoluciones de los diferentes

dispositivos, el barullo con el que se enfrenta el diseñador a la horade maquetar un libro electrónico o una página web puede llegar a serconsiderable.

Para intentar arrojar algo de luz sobre este asunto, vamos a ver unpequeño experimento sobre medidas en diferentes unidadesaplicadas a una hoja de estilos de un eBook . Pero antes, un breverepaso a las principales unidades de medida que se emplean en CSS:

Centímetros (cm), pulgadas (in) y milímetros (mm): seemplean para maquetaciones en papel y quizá también paralectores de tinta electrónica

Puntos (pt): es por definición un píxel en una pantalla deresolucón 72 dpi, o sea, 1/72 de una pulgada. Las pantallastienen una resolución aproximada a esta, pero difieren entre sí.

Píxels (px): un punto en una pantalla, sea cual sea suresolución

Eme (em): tradicionalmente en tipografía es la anchura de lacaja de la letra EME, que es la más ancha de todas (entipografías de ancho de caja variable). Es una unidad relativaentonces al tamaño de la tipografía, sea cual sea ésta.

Porcentaje (%): es una unidad relativa al tamaño del visor del

documento. En una página web, es relativa la anchura (oaltura) de la ventana del navegador. En un eBook, será relativala anchura de la pantalla de visualización.

Para este experimento, vamos a modificar la hoja de estilos CSSde un libro electrónico en formato EPUB. Concretamente,variaremos el margen interior del libro (el "padding") y le pondremosvarios valores en diferentes unidades, en concreto: 3 em, 20%, 50px,20 pt y 3 cm.

http://www.publicarendigital.com/2010/01/el-formato-epub-en-que-consiste.htmlhttp://www.publicarendigital.com/2010/01/el-formato-epub-en-que-consiste.htmlhttp://www.publicarendigital.com/2010/01/el-formato-epub-en-que-consiste.htmlhttp://www.publicarendigital.com/2010/01/el-formato-epub-en-que-consiste.html


2/6

A continuación, mediremos literalmente sobre la pantalla de nuestroordenador y sobre la pantalla de nuestro lector de eBooks paracomprobar sobre el terreno si los cambios que hemos introducido secorrespondían con la realidad.

CASO DE 3 em

Debido a que en la hoja de estilos, el tamaño de la tipografía estabaestablecido a 1em, lo que vamos a hacer literalmente es colocar"emes" en el margen y contarlas, tanto en la pantalla del ordenador(usando Adobe Digital Editions, ADE) como en la pantalla del lectorCool-er; y variando el tamaño de la tipografía con los controles a talefecto en ambos dispositivos.

En el caso de la combinación ordenador/ADE al 100% y 200% de

tamaño de la tipo:

(tamaño natural)

(primer aumento)

podemos ver como efectivamente el margen mide 3em.

http://2.bp.blogspot.com/_28HQCeHdKfU/S1juwLanNcI/AAAAAAAAAGk/ldvO86dYVJ4/s1600-h/ADE_3eme_200.jpghttp://2.bp.blogspot.com/_28HQCeHdKfU/S1jukcqC7LI/AAAAAAAAAGc/GFMxsSt3n_E/s1600-h/ADE_3eme_100.jpghttp://2.bp.blogspot.com/_28HQCeHdKfU/S1juwLanNcI/AAAAAAAAAGk/ldvO86dYVJ4/s1600-h/ADE_3eme_200.jpghttp://2.bp.blogspot.com/_28HQCeHdKfU/S1jukcqC7LI/AAAAAAAAAGc/GFMxsSt3n_E/s1600-h/ADE_3eme_100.jpg


3/6

En el caso del eReader la cosa cambió:

(tamaño natural)

(primer aumento)

aunque parece que el tamaño del margen se mantiene proporcional(1 cm vs. 1,5 cm medido directamente en pantalla), no esexactamente el tamaño de tres cajas de eme mayúscula.

CASO DE 20%

En el caso de un margen del 20%, es preciso tanto aumentar ydisminuir el tamaño de la tipografía como el de la ventana del visor.Claro, esto no es posible para el eReader, ya que el tamaño de lapantalla es el que es y no se puede cambiar físicamente. En el casodel ADE, es el tamaño de la ventana de la aplicación, así que essencillo.

Cool-er: el margen se mantiene idéntico para cualquier

aumento de la tipografía. Midiendo la proporción con una reglaentre el margen y la anchura de la pantalla, obtengo el cociente1,8/9 cm = 20%. Perfecto. El porcentaje es la solución óptima

http://4.bp.blogspot.com/_28HQCeHdKfU/S1jvInbnnHI/AAAAAAAAAG0/ziL5EMAxssQ/s1600-h/eReader_3eme_200.jpghttp://4.bp.blogspot.com/_28HQCeHdKfU/S1jvAvXHZmI/AAAAAAAAAGs/dilZCOZ1AUg/s1600-h/eReader_3eme_100.jpghttp://4.bp.blogspot.com/_28HQCeHdKfU/S1jvInbnnHI/AAAAAAAAAG0/ziL5EMAxssQ/s1600-h/eReader_3eme_200.jpghttp://4.bp.blogspot.com/_28HQCeHdKfU/S1jvAvXHZmI/AAAAAAAAAGs/dilZCOZ1AUg/s1600-h/eReader_3eme_100.jpg


4/6

para mantener siempre la misma anchura de margen para unlibro dentro de un eReader.

ADE: Para el tamaño natural de tipografía y un tamañoarbitrario de la ventana, y midiendo en píxels, obtengo elcociente 118/600 (19,7%). Cambio el tamaño de la tipografía

así como el tamaño de la ventana y obtengo el cociente 86/432(19,9%). Perfecto nuevamente. El margen se mantuvoproporcional.

CASO de 50 píxeles

Aquí hay un pequeño problema: no sabemos cómo medir píxeles enel eReader , ya que las medidas las hemos hecho con una reglanormal y corriente, que va bien para hacer medidas relativas, pero nocontar puntitos. En el caso del ordenador tenemos una pequeña

utilidad que es una regla virtual, que me deja medir en pulgadas,píxels y centímetros:

(midiento el tamaño de una EME) en píxels

Los resultados fueron los siguientes:

Ordenador/ADE: diferentes tamaños de ventana, diferentesaumentos, y siempre estaba ahí el margen de 50 píxels,clavado. Perfecto.

Cool-er: el margen se escala de manera proporcional a medidaque aumento el tamaño de la tipografía. Esto no es obviamentelo que uno espera para una medida fijada en concreto. Además,

las medidas que hemos tomado sobre la pantalla (en cm.) noparecían guardar correlación con los 50 píxeles dados. Porejemplo, para el tamaño natural, el margen fue de 1centímetro. Teniendo en cuenta que la resolución de la pantalla

http://2.bp.blogspot.com/_28HQCeHdKfU/S1jxk5OMCQI/AAAAAAAAAG8/wG_yg7vaCXw/s1600-h/midiendo.jpg


5/6

del Cool-er es de 170 ppp (píxels por pulgada), un margen de 1centímetro debería corresponder a un tamaño de 67 píxels, node 50. Así que, de momento, misterio...

CASO de 20 PUNTOS

En este caso hay que tener en cuenta la resolución exacta deldispositivo. En el caso del Cool-er, como ya se mencionamos antes,es de 170 ppp ( píxels por pulgada). En el caso del MacBook de 13,3"es de 96 ppp.

Aquí nos encontramos con un caso similar al de los 50 px, es decir,midiendo píxeles en la pantalla del ordenador (nuevamentecambiando tamaños de tipo y ventana) nos daba siempre 27 píxels.

Teniendo en cuenta la resolución de nuestra pantalla, salen unos 20,3puntos (el cálculo lo dejamos como ejercicio al lector) bastanteaproximado a los 20 puntos del estilo.

En el caso del Cool-er, nos salen nuevamente medidasproporcionales, que cambian con el tamaño de la tipografía, pero queal intentar hacer el cálculo equivalente con la resolución de 170 ppnos salen valores lejanos a los 20 puntos (40, 54, etc.)

CASO de 3 CENTÍMETROS

En un nuevo intento de fijar el margen del libro en un valor fijo yahora además en una unidad "de papel", propusimos a la hoja deestilos CSS un valor del padding de 3 cm. El resultado es el siguiente:

Ordenador / ADE: tamaño invariable medido de 113 píxels. Ala resolución de pantalla dada, esto da efectivamente 3 cm(nuevamente dejamos el cálculo como ejercicio). Perfecto.

Cool-er: nuevamente nos encontramos con tamaños demargen variables y proporcionales al tamaño de la letra. Para el

tamaño natural, medimos 1,9 cm, para el primer aumento 3,3cm, etc. Aquí está la prueba:

http://1.bp.blogspot.com/_28HQCeHdKfU/S1j0xQ5ZDXI/AAAAAAAAAHE/i0JY4xqKbtY/s1600-h/eReader_3cm.jpg


6/6

Conclusiones

Después de medir y medir, podemos sacar algunasconclusiones:

1. La única manera de mantener un margen del libro fijo en el

eReader es usar la unidad porcentaje (%). Casualmente, unaopción que en el Adobe Digital Editions dependerá del tamañode la ventana.

2. El lector Cool-er (almenos) escala proporcionalmente otras

medidas del documento además del tamaño de letra, cuando

se pulsa el botón de cambiar ésta y parece que no respeta unamedida fija, sea cual sea ésta. Esto concuerda con elcomportamiento de las imágenes, que se escalanproporcionalmente aunque en la hoja de estilos tengan untamaño fijo (cosa que no sucede en el ADE).

3. Emplear la unidad EME (em) puede ser lo más óptimo ya quese adapta a cambios en el diseño que incluyan el uso de otratipografía, aunque ésta no sea occidental.

Esperamos que este estudio os haya ayudado a entender un poco las

unidades de medida en el mundo de la publicación de documentosdigitales.

uso de las unidades de medida en las pe

Documents