Rendering order without positioning

Something I feel missing from CSS is that there is no way to swap the positions of content without using positioning, and positioning is limited in that it removes the elements from their natural places in the normal document flow. I would like to propose a property that allows for changing the rendering order within the normal document flow.

'rendering-order'
    Value:  	<integer> | <integer> [relative | absolute] | auto
    Initial:  	auto
    Applies to:  	all elements
    Inherited:  	no
    Percentages:  	N/A
    Media:  	all
    Computed value:  	<positiveinteger> absolute

The property would change the rendering order for the flow within a given containing block. For block level elements it would change the rendering order as related to other block boxes (including anonymous block boxes) within the same containing block, for inline elements it would change the rendering order relative to inline boxes (including anonymous such) within the same box, or move the inline box between anonymous block boxes if there are block level elements in between. Numbers may be negative, and in the case of absolute ordering then counts from the end instead of from the beginning. If only a number is given, relative is assumed. If the specified order of several elements is the same, any element with !important will take precedence when calculating the computed value. For other cases source order in the document will set the computed order. 


To give some examples:

<div>Some <em>inline boxes</em> and <p>some block level boxes</p> and another inline box.</div>

With anonymous boxes inserted, in the normal rendering order:
<div>
  <anonymousblock>
    <anonymousinline>Some </anonymousinline>
    <em id="itest">inline boxes</em>
    <anonymousinline> and </anonymousinline>
  </anonymousblock>
  <p id="btest">
    <anonymousinline>some block level boxes</anonymousinline>
  </p>
  <anonymousblock>
    <anonymousinline>and another inline box.</anonymousinline>
  </anonymousblock>
</div>


Some examples
- Inline absolute

#itest {
    rendering-order: 0 absolute;
}

Gives the order:
<div>
  <anonymousblock>
    <#itest/>
    <anonymousinline/>
    <anonymousinline/>
  </anonymousblock>
  <p/>
  <anonymousblock/>
</div>

If you instead use:
#itest {
    rendering-order: -0 absolute;
}

The order becomes:
<div>
  <anonymousblock/>
  <p/>
  <anonymousblock>
    <anonymousinline>and another inline box.</anonymousinline>
    <#itest>
  </anonymousblock>
</div>
 
- Inline relative

#itest {
    rendering-order: 1;
}

Gives the order:
<div>
  <anonymousblock>
    <anonymousinline/>
    <anonymousinline/>
    <#itest/>
  </anonymousblock>
  <p/>
  <anonymousblock/>
</div>


While:
#itest{
    rendering-order: 2;
}

Gives:
<div>
  <anonymousblock/>
  <p/>
  <anonymousblock>
    <#itest/>
    <anonymousinline/>
  </anonymousblock>
</div>

- Block absolute

#btest {
    rendering-order: 2 absolute;
}

Gives the order:
<div>
  <anonymousblock/>
  <anonymousblock/>
  <#btest/>
</div>


While:
#itest{
    rendering-order: -1 absolute;
}

Gives:
<div>
  <anonymousblock/>
  <#btest/>
  <anonymousblock/>
</div>

- Block relative

#btest {
    rendering-order: -1;
}

Gives the order:
<div>
  <#btest/>
  <anonymousblock/>
  <anonymousblock/>
</div>


While:
#itest{
    rendering-order: 47;
}

Gives:
<div>
  <anonymousblock/>
  <anonymousblock/>
  <#btest/>
</div>



There, now tell me what obvious holes I have missed...

-- 
David "liorean" Andersson

ViewStyles, ViewScripts, SwitchStyles and GraphicsInfo bookmarklets:
<http://liorean.web-graphics.com/>
Hangouts:
<http://codingforums.com/> <http://yourmusicforums.com/>

Received on Sunday, 23 May 2004 14:49:20 UTC