[css3-writing-modes] yet another logical property and writing mode proposal

I have yet another logical property and writing mode proposal.

Logical Properties
==================

Borrowing from fantasai's suggestion:
http://lists.w3.org/Archives/Public/www-style/2006Jun/0084.html
...
| 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: logical 1em 0em 1.5em 3em; /* before = 1em, end = 0em,
|                                          after = 1.5em, start = 3em */

If the [physical?|logical] flag can be specified also on non-shorthand 
properties, we can treat existing properties as logical properties
and can avoid adding new properties such as margin-start, margin-end etc.
and also can avoid the cascading problem.

Example:
    margin: logical 1em 0em 1.5em 3em;

is equivalent to

    margin-top:    logical 1em;   /* margin before */
    margin-right:  logical 0em;   /* margin end */
    margin-bottom: logical 1.5em; /* margin after */
    margin-left:   logical 3em;   /* margin start */

Another shorthand example:

    border-radius: logical 2em 1em 4em / 0.5em 3em;

is equivalent to

    border-top-left-radius:     logical 2em 0.5em; /* before-start */
    border-top-right-radius:    logical 1em 3em;   /* before-end */
    border-bottom-right-radius: logical 4em 0.5em; /* after-end */
    border-bottom-left-radius:  logical 1em 3em;   /* after-start */

Other examples:

    width: logical 100%;  /* logical width = physical height in vertical writing mode */

    top: logical 3cm;     /* physical right in vertical-rl mode */

    background-repeat: logical repeat-x; /* repeat vertically in vertical writing mode */

    text-align: logical left; /* = start = right in RTL mode */

    caption-side: logical top;

    border-spacing: logical 2px 5px;


If physical and logical specifications are in conflict, the physical one wins:

    /* in RTL mode, */
    margin-right: 3em;
    margin-left: logical 2em; /* = margin start = margin right in RTL mode */
    /* margin-right: 3em (physical) wins over 2em (logical) */

The UA default style for list indentation supporting all writing modes 
can be defined as:

    ol, ul, dd { margin-left: logical 40px }


Logical Writing Modes
=====================

    writing-mode: logical? &&
                  [horizontal-tb | vertical-rl | vertical-lr | horizontal-bt]

If the writing-mode value has the 'logical' flag, other properties 
that can have 'logical' flag are set to 'logical' implicitly unless 
'physical' flag is specified.

Examples:

    writing-mode: logical vertical-rl; /* left is physical top,
                                          top is physical right */

    writing-mode: logical vertical-lr; /* left is physical top,
                                          top is physical left */

    writing-mode: logical horizontal-tb; /* left is physical right
                                            in RTL mode */

-- 
MURAKAMI Shinyu
http://twitter.com/MurakamiShinyu
Antenna House Formatter:
http://www.antennahouse.com

Received on Monday, 27 September 2010 06:36:37 UTC