W3C home > Mailing lists > Public > www-style@w3.org > June 2006

Re: [css3-box] padding-start/end

From: fantasai <fantasai.lists@inkedblade.net>
Date: Tue, 20 Jun 2006 07:50:39 -0400
Message-ID: <4497E10F.4070409@inkedblade.net>
To: www-style@w3.org

L. David Baron wrote:
> 
> Some old threads are
> 
> http://lists.w3.org/Archives/Public/www-style/2001Oct/thread.html#msg58
> http://lists.w3.org/Archives/Public/www-style/2002Jul/thread.html#msg83
> http://lists.w3.org/Archives/Public/www-style/2002Aug/thread.html#msg310
> http://lists.w3.org/Archives/Public/www-style/2002Sep/thread.html#msg17
> 
> but I can't find fantasai's more recent proposal.

I don't think I ever posted it.. Well, here goes. :)

   http://fantasai.inkedblade.net/style/discuss/directions/box-switch

---------------

According to Ian's post [1] David Baron has come up with a
scheme to let physical and logical directional properties
cascade together. It involves a lot of properties, however,
and although it would work perfectly for anyone using CSS,
it's a bit of a design hack.

I doubt the use of both physical and logical directions
together would be very common, so reducing things down to
a single switch may work well enough.


Define

    direction-model: physical | logical
    initial: pysical

    Switches precedence between physical and logical
    direction properties.

There are a lot of directional properties in CSS. We'll
use margin as an example.

Define

    margin-start, margin-end,
    margin-before, margin-after: <length> | <percentage> | defer
    initial: defer

    margin-left, margin-right,
    margin-top, margin-bottom: <length> | <percentage> | defer
    initial: defer

    Each property cascades and receives its specified value independently.
    Their computed values are calculated as follows:
    - each left/right/top/bottom property is paired with a start/end/before/after
      property according to the writing mode. (e.g. in 'tb-rl' mode, start goes
      with top, end goes with bottom, before goes with right, and after goes with
      left)
    - For each pair, the property with higher priority (as determined by
      'direction-model') is checked for a value first. If the value is 'defer',
      then the other property is checked for a value. If both are 'defer', the
      value is '0'.
    - For each pair, the margin width is calculated. The computed value of both
      properties in the pair is set to this calculated width.

For example, if I have
   box {
     writing-mode: tb-rl;
     direction-model: logical;
     margin-start: 1em;
     margin-end: 2em;
     margin-before: defer;
     margin-after: defer;
     margin-left: 3em;
     margin-right: defer;
     margin-top: 2.5em;
     margin-bottom: .5em;
   }

Properties are paired up:
    start  (1em)    top    (2.5em)
    end    (2em)    bottom (.5em)
    before (defer)  right  (defer)
    after  (defer)  left   (3em)

Values are assigned:

    start/top:    1em;
    end/bottom:   2em;
    before/right: 0;
    after/left:   3em;

Values are computed.


Shorthands:

    margin: [physical?|logical] <margin-width>{1,4}
            | <margin-width>{1,4} [physical?|logical]

    [physical?|logical] is a flag that determines whether the values should be
    assigned to top/right/bottom/left or before/start/after/end. Since 'physical'
    is the default interpretation, the flag may be omitted

    Examples:

    margin: 1em 5%;                   /* top & bottom = 1em, left & right = 5% */
    margin: defer physical;           /* top, bottom, left, & right = defer */
    margin: logical 1em 0em 1.5em 3em; /* before = 1em, end = 0em,
                                         after = 1.5em, start = 3em */


That should work well enough for the author level. The real test
is whether this holds up across cascade levels--and it only works
if the user stylesheets use 'defer' to set precedence instead of
'direction-model'. (Since both UAs and users will tend toward using
logical directions, and the initial values for physical values
are already 'defer', this should not be much of an inconvenience.)


Using the logical model can also make implementation easier.
If the property calculating code passes logical directions
to layout code written around logical directions, the
layout calculations for different writing modes won't be
analogous anymore--they'll be the same. Writing mode checks
could, for the most part, be be isolated to handling
interfaces between flows and to painting.

[1] http://lists.w3.org/Archives/Public/www-style/2002Aug/0396.html
Received on Tuesday, 20 June 2006 11:51:07 GMT

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