[Ovillo] Uso de ems en anchos, rellenos y márg enes
Hola a todos.
Quería consultarles el tema de las unidades de medidas* para utilizar en las
cajas *(width, padding, margin).
Siempre he establecido los anchos, rellenos y márgenes con pixeles lo cual
hasta ahora me ha servido, pues casi siempre maqueto diseños con anchos
fijos, sin embargo, la duda con respecto al uso de los pixel surgió al darme
cuenta que en el tamaño de la tipografía estoy utilizando ems,
estableciendo como base el tamaño relativo de 62.5% (10px), así:
body {
font-size: 62.5%; /* 16px × 62.5% = 10px */
}
*Referencia:
http://www.maratz.com/blog/archives/2005/10/21/typetesters-base-font-size/
*
y cuando quiero establecer, por ejemplo el tamaño de un titular de primer,
lo haría así:
h1 {
font-size: 2em; /* 10px × 2em = 20px */
}
Bueno, eso con las tipografías, pero ¿qué pasaría si quisiera establecer el
margen inferior de un titular de primer nivel en ems? Expongo un ejemplo
para tratar de explicar mi duda:
h1 {
margin-bottom: 1em;
}
Según la teoría:
*em, relativa respecto del tamaño de letra empleado. Aunque no es una
definición exacta, el valor de 1 em se puede aproximar por la anchura de la
letra M (eme mayúscula) del tipo de letra que se esté utilizando.
http://www.librosweb.es/css/capitulo3/unidades_de_medida.html
*
Ahora, yo supongo que el margen inferior que estoy estableciendo es de 10px,
pues es el tamaño base que he definio en el body.
¿Qué opinan al respecto? ¿Estoy en lo cierto?
Saludos
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] [OT] innerHTML
Hola. On Dec 19, 2008, at 10:38 AM, Joseba wrote: Como idea mola. No hay una frikin funcion que haga eso en algun Framework del que se pueda extraer sin complicaciones? Teniendo una necesidad parecida, mi editor ha parido esto: http://github.com/choan/js_dom_serializer/tree/master Salud. -- Choan -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org ] En nombre de Choan Gálvez Enviado el: viernes, 19 de diciembre de 2008 10:27 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] [OT] innerHTML Hola. On Dec 18, 2008, at 7:19 PM, Joseba wrote: Igual si explico un poco xq quiero obtener el HTML actual me dais alternativas. Simplemente lo quiero para redibujarlo en otra pantalla a modo de instantánea, osea, guardar ese HTML y mostrarlo cuando sea necesario. Ya sabemos que se pueden guardar los valores y tal y rehacer la maketa con ellos. Pero a mi se me ha ocurrido guardar todo el HTML ya que es la ostra de complejo con infinidad de radio/checks/inputs/textareas/selects y etc. Con mogollón de controles dependientes de lo que pongas en otros, bla bla. Esta claro que IE es el campeón de hago lo que quiero Algunas veces viene bien como es el caso, ya que el innerHTML obtiene ese querido HTML actual. El resto de navegadores, surfeadores, exploradores y demás, sólo obtiene el HTML original, cosa que en este caso me viene malo malísimo. En fin... que quería darle otro aire al modo de almacenar formularios personalizados. Si te estoy entendiendo bien, pretendes almacenar (como texto, en un fichero o una base de datos o un...) el árbol generado en el navegador. En tal caso, el uso de innerHTML es problemático. Cada navegador genera la cadena a su bola (IE usa mayúsculas para los nombres de los elementos, no entrecomilla los atributos, etc. Y el resto, cada uno sus detallicos). Así que, hasta donde yo sé, si quieres obtener una cadena HTML **limpia** la mejor y única solución es hacer la serialización por cuenta propia, esto es... te montas una función serializeHTML (o como le quieras llamar) que reciba un nodo (la raíz de lo que quieras guardar) y vaya recorriendo recursivamente todos los descendientes y generando la cadena de salida. Esta es la técnica utilizada por TinyMCE y cualquier otro editor RTE decente. Un saludo. -- Choan Gálvez choan.gal...@gmail.com http://choangalvez.nom.es/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Uso de ems en anchos, rellenos y márg enes
Hola, Javier.
La respuesta la tienes en la especificación CSS2.1 del W3C. La tienes en
formato pdf en http://www.w3.org/TR/CSS/css2.pdf. Esto es lo que dice en su
apartado *4.3.2 Lengths*:
*The 'em' unit is equal to the computed value of the 'font-size' property of
the element on which it is used. The exception is when 'em' occurs in the
value of the 'font-size' property itself, in which case it refers to the
font size of the parent element. It may be used for vertical or horizontal
measurement. (This unit is also sometimes called the quad-width in
typographic texts.)*
[Traducción]
*La unidad 'em' es igual al valor calculado de la propiedad
http://www.sidar.org/recur/desdi/traduc/es/css/fonts.html#propdef-font-size'font-size'
del elemento en el que se usa. La excepción sucede cuando 'em' aparece en el
valor de la propia propiedad 'font-size', en cuyo caso se refiere al tamaño
de la fuente del elemento padre. Puede usarse para longitudes verticales u
horizontales. (Esta unidad a veces se denomina cuadratín en los textos sobre
tipografía.)*
Por lo tanto, en el ejemplo que has puesto, el valor equivalente de
*margin-bottom:
1em* es 20px.
Saludos.
El 21 de diciembre de 2008 13:59, Javier Guerrero demix...@gmail.comescribió:
Hola a todos.
Quería consultarles el tema de las unidades de medidas* para utilizar en
las
cajas *(width, padding, margin).
Siempre he establecido los anchos, rellenos y márgenes con pixeles lo cual
hasta ahora me ha servido, pues casi siempre maqueto diseños con anchos
fijos, sin embargo, la duda con respecto al uso de los pixel surgió al
darme
cuenta que en el tamaño de la tipografía estoy utilizando ems,
estableciendo como base el tamaño relativo de 62.5% (10px), así:
body {
font-size: 62.5%; /* 16px × 62.5% = 10px */
}
*Referencia:
http://www.maratz.com/blog/archives/2005/10/21/typetesters-base-font-size/
*
y cuando quiero establecer, por ejemplo el tamaño de un titular de primer,
lo haría así:
h1 {
font-size: 2em; /* 10px × 2em = 20px */
}
Bueno, eso con las tipografías, pero ¿qué pasaría si quisiera establecer el
margen inferior de un titular de primer nivel en ems? Expongo un ejemplo
para tratar de explicar mi duda:
h1 {
margin-bottom: 1em;
}
Según la teoría:
*em, relativa respecto del tamaño de letra empleado. Aunque no es una
definición exacta, el valor de 1 em se puede aproximar por la anchura de
la
letra M (eme mayúscula) del tipo de letra que se esté utilizando.
http://www.librosweb.es/css/capitulo3/unidades_de_medida.html
*
Ahora, yo supongo que el margen inferior que estoy estableciendo es de
10px,
pues es el tamaño base que he definio en el body.
¿Qué opinan al respecto? ¿Estoy en lo cierto?
Saludos
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
