2012-06-10 46 views
5

Soy un estudiante de informática (teórico) y, como tal, la investigación de la semántica de los lenguajes de programación es uno de los temas de mi estudio (wikipedia).Semántica formal del posicionamiento de caja CSS

He jugado mucho con CSS y tengo una comprensión razonable de las reglas de posicionamiento de las cajas. (Si me dices que cree una página con cierto diseño, a menudo puedo pensar en el enfoque de recuadro correcto y las reglas de CSS aplicables.)

Sería genial tener algún tipo de semántica formal para las reglas de posicionamiento de CSS, pero después de buscar en la red por un tiempo, no pude encontrar nada útil.

En su mayoría simplemente termino en las especificaciones de CSS, que están formateadas como textos largos con pseudo-algoritmos (no es la mejor lectura --- No he leído ninguna de estas especificaciones con mucho esfuerzo todavía).

ha intentado nadie para formalizar esta teoría “ ” en algún modelo matemático, más riguroso de lo que las especificaciones tienen que ofrecer? No estoy buscando algo completo o definitivo, pero seguro sería bueno (¡y útil!) Si, al menos, la forma en que se colocan las cajas se pudiera modelar de manera formal.

¿Alguien sabe de tal investigación?

+0

hay un buen artículo: http://www.brainjar.com/css/positioning/ – gandil

+0

No estoy seguro de lo que quiere decir con "formal", pero la especificación en sí es ** la ** definición formal de estas cosas. Es la * especificación *, después de todo. Aquí está la [tabla de contenidos] (http://www.w3.org/TR/CSS21/cover.html#toc). Deberá enfocarse en las secciones 8, 9 y 10 que cubren en profundidad el modelo de formateo. – BoltClock

+0

@Bolt formal en el sentido matemático; las especificaciones W3C no son formales en este sentido. –

Respuesta

2

¡Ninguna respuesta!Este es un ejemplo de una posible formalización de un caso muy simplificado (ver mi comentario anterior).

Digamos, por ejemplo, estamos trabajando en un mundo que ofrece (1) ancho de una pantalla conocido enter image description here, (2) una lista ordenada de enter image description here cajas enter image description here que no están anidados, no tienen márgenes/relleno/de las fronteras , flotan a la izquierda y de los cuales conocemos su (2.1) altura y (2.2) ancho a través de las funciones matemáticas w y h.

Vamos a definir las funciones enter image description here y enter image description here, que indican las coordenadas de la esquina superior izquierda de cada cuadro.

Vamos a estar definiendo/usuarios de las relaciones "enter image description here inicia alinear enter image description here" y "enter image description here tiene una altura enter image description here".

En primer lugar, se inicia la línea 0. enter image description here

Entonces, si se inicia enter image description here alinean l, y además si por cierta m in N

enter image description here

...llegamos a la conclusión de que:

  1. box heights in certain line
  2. box widths in certain line
  3. l tiene una altura lineheight
  4. bm+1 inicia alinean l 1 si y sólo si m le N

Estas reglas definen las posiciones de las cajas dadas de manera formal manera. Es solo una forma de hacerlo, por supuesto, y probablemente no la más inteligente (lo pensé rápido), pero formaliza correctamente el funcionamiento de las carrozas (tipográficos de módulo, no lo he revisado lo suficiente).

Cuando se trata de lenguajes de programación, se puede elegir entre muchos de estos formalismos, cada uno inventado para fines particulares (ver wikipedia).

Estoy interesado si alguien alguna vez ha tratado de presentar formalizaciones para el posicionamiento de cajas CSS. Por supuesto, las especificaciones recorren un largo camino, pero no son tan rigurosas como la forma matemática te obliga a ser.

Cuestiones relacionadas