Fixing the Layout Algorithm (Not %%)

Something I sent earlier that seemed to just get ignored probably because of 
a bad title that I think deserves another crack.

Relative and Absolute positioning are tricky and I think there's a good way
to handling it. First when I'm trying to position an element relative to
another element I want to make it relative to one of 36 points which can be
described by 3 properties (vertical, horizontal, box).

Also I don't always want to attach cordinates (0,0) to that position, so
instead I can use similar versions of those same 3 properties to set what
part of the box is attached to its relative element. (Confusing I know,
though really quite simple with some examples).

You have the 4 boxes that make up the box model (content, padding, border,
margin) and 3 positions each for the horizontal (left, center, right) and
vertical (top, middle, bottom).

So I have an element (X) that I'm trying to make relative to another element
(Y). No I can make any point on Y relative to any point on X. Some examples.

X and Y flush, left to right.
Y (left, top, margin) would be set relative to X (right, top, margin).

Y below X, both centered with respect to each other.
Y (center, top, margin) relatve to X (center, bottom, margin).

Y showing up inside X's top, right border (at the edge of the padding), as a
series of buttons.
Y (right, top, margin) relative to X (right, top, padding).

If I'm going to attach something then basically I want to attach it to
either the viewport, the body, the parent or some id-based element. This can
be covered with 4 different values (one of them being id(foo)).

One of the beauty's that I see in this is that it covers pretty much all
cases. The calcuations are simple. There are only two properties involved.
It's also very easy to see exactly where Y is going to end up relative to X
and there's very little ambiguity as to where it can end up. Oh and it gets
rid of 90% of cases where I wanted to do math on different types of lengths
(in a simpler way to boot).

The above two properties also eliminate the need for the seperate absolute
and relative values of display. Absolute is just relative to the html
element. Fixed is really a relative value that doesn't scroll and probably
should be defined that way. So we've gone from 4 values of display to 2
(static and relative).

Float is a combination of an positioning property and a content flow
property. Flow should allow a positioned element to control the flow of
content around it. The values as far as I can see it should be: left, right,
both (or around), neither and none (or behind). This would allow an author
to style the text around any element however they chose. This would only
apply to block elements. The values inside and outside could equate to left
and right given a page-based setting.

So taking a quick perusal of this we see the new property set:

position: (static | relative)

relative: (parent | viewport | body | id(foo)) (content | padding | border |
margin) (left | center | right) (top | middle | bottom)

attach: (content | padding | border | margin) (left | center | right) (top |
middle | bottom)

flow: (left | right | both | neither | none | inside | outside)

There's more, but I think that's more than enough for now.

Orion Adrian

Received on Sunday, 23 May 2004 11:07:02 UTC