W3C home > Mailing lists > Public > www-style@w3.org > May 2004

Re: Rendering order without positioning

From: Justin Wood <jw6057@bacon.qcc.mass.edu>
Date: Sun, 23 May 2004 20:27:06 -0400
Message-ID: <40B1415A.1080806@bacon.qcc.mass.edu>
To: liorean <liorean@f2o.org>
Cc: www-style@w3.org

To me it seems that the presentation level spec could/may accomplish 
this, though I cannot be too sure for speach-based browsers.

http://www.w3.org/TR/2003/WD-css3-preslev-20030813/

Keeping in mind I have not fully read that spec, barely skimmed it.

If not, I thank you for the suggestion.

~Justin Wood

liorean wrote:

>
> 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...
>
Received on Sunday, 23 May 2004 20:28:21 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:30 GMT