Re: [Ovillo] Uso de ems en anchos, rellenos y márg enes

[Daniel Navarro]

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
'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 escribió:

> 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

Re: [Ovillo] [OT] innerHTML

[Choan Gálvez]

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
> 
> 
> ___
> 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

[Ovillo] Uso de ems en anchos, rellenos y márg enes

[Javier Guerrero]

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