Logical Shorthand Properties (proposal for CSS3 Writing Modes)

Edited by MURAKAMI Shinyu <murakami@antenna.co.jp>
Last revised 2010-11-01
Contents
  1. Margin/padding/border shorthand properties
  2. 'offset' shorthand property
  3. 'box-size' shorthand property
  4. 'border-radius' shorthand property
  5. Issues
  6. References

1. Margin/padding/border shorthand properties

The 'margin', 'padding', 'border-style', 'border-color' and 'border-width' shorthand properties are redefined as follows.

Syntax:
Value: [ logical | spread ]? <value>{1,4} 
     | 
       [ before <value> || end <value> || 
         after <value> || start <value> ]
     |
       [ top <value> || bottom <value> ||
         [ [ right <value> || left <value> ] |
           [ outside <value> || inside <value> ] ] 
       ]

The keyword "logical" indicates the values are for logical directions: before, end, after, start.

The keyword "spread" indicates the values are for two-page spread aware directions: top, outside, bottom, inside.

The keywords "before", "end", "after", "start", "top", "right", "bottom", "left", "outside" and "inside" are for setting individual values. Unlike other shorthand notations, the shorthand notation with these keywords sets only explicitly specified values and does not affect the omitted settings.

Examples:
    margin: logical 1em 2em 3em 4em;
is equivalent to 
    margin: before 1em end 2em after 3em start 4em;

    margin: logical 1em 2em;
is equivalent to 
    margin: before 1em end 2em after 1em start 2em;

    margin: spread 1em 2em 3em 4em;
is equivalent to 
    margin: top 1em outside 2em bottom 3em inside 4em;

    margin: before 1em start 2em;
sets the before margin to 1em and the start margin to 2em, but does not set the end and after margins.

2. 'offset' shorthand property

The 'offset' shorthand property sets the box offsets ('top', 'right', 'bottom' and 'left' properties in CSS2.1). The shorthand syntax is same as the margin/padding/border shorthand properties.

Examples:
    offset: logical 1em 2em 3em 4em;
is equivalent to 
    offset: before 1em end 2em after 3em start 4em;

    offset: top 1em;
is equivalent to 
    top: 1em;

3. 'box-size' shorthand property

The 'box-size' shorthand property sets the box size ('width', 'min-width', 'max-width', 'height', 'min-height' and 'max-height' properties in CSS2.1).

Syntax:
Value: logical?
       <'width'> [<'min-width'> <'max-width'>? ]?
       [ / <'height'> [<'min-height'> <'max-height'>? ]? ]?
Examples:
    box-size: logical 50px / auto 100px 200px;
sets the logical width to 50px, logical min-width to 0 (initial value), logical max-width to none (initial value), logical height to auto, logical min-height to 100px, and logical max-height to 200px; 
    box-size: 100px / 50px;
sets the width to 100px, height to 50px, min-width, max-width, min-height and max-height to their initial values. 
    box-size: 100px 50px;
sets the width to 100px, min-width to 50px, max-width, height, min-height and max-height to their initial values.

4. 'border-radius' shorthand property

The 'border-radius' shorthand property is redefined as follows.

Syntax:
Value: [ logical | spread ]?
       [ <length> | <percentage> ]{1,4}
       [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
    border-radius: logical 2em 1em 4em / 0.5em 3em;

    border-radius: spread 0 1em 1em 0;
The outside (the right side in the right page) border is rounded.

5. Issues

6. References

Discussions in the W3C www-style mailing list: