Re: [css3-writing-modes] a third option for implementing logical properties

Håkon Wium Lie <howcome@opera.com> wrote on 2010/10/25 22:03:40
> Also sprach John Daggett:
> 
>  >  1. Use a subset of Murakami-san's proposed additional 'logical' keyword [1]
>  >     proposal for margin-*, padding-*, border-*, top, bottom, left, right
>  >     (physical would be implied by a lack of 'logical'):
>  > 
>  >     p { 
>  >       margin: 1em 0px;
>  >       margin: logical 1em 0px;
>  >     }
> 
> It's a reasonable proposal, especially it can save us from a property
> explosion. Some comments follow.
> 
> First, I don't like the "logical" keyword. What we are indicating is
> the reference. And there's nothing particularly logical about using
> the writing-mode as the referece. So, I suggest one of these instead:
> 
>   margin: script 1em 0px;         /* my favorite */
>   margin: writing-mode 1em 0px;
>   margin: beas 1em 0px;           /* before-end-after-start */
> 
> Second, we should also think of how this can be expanded to the
> inside/outside use case. There we could say:
> 
>   margin: spread 1em 0px;
>   margin: tobi 1em 0px;           /* top-outside-bottom-inside */
> 
> ('before' and 'bottom' both start with a 'b', unfortunately)
> 

I think "beas" and "tobi" are good because easy to remember the 
order of values (like "rgba" for color notation).

This shorthand notation will be really useful to write stylesheets 
for multiple layouts with a fallback layout. e.g.:

#foo {
  margin: 1mm 2mm 3mm 4mm;      /* fallback for old browsers */
  margin: 1mm 2mm 3mm 4mm beas; /* just duplicated the above line and added 'beas' */
}

The "beas" and "tobi" notations are shorthand and will be resolved 
to individual properties.

The shorthand syntax will be:

    margin: [beas|tobi]? && <margin-width>{1,4}
        | [before|end|after|start|outside|inside] <margin-width>

The question is the timing of the logical (BEAS) to physical (TRBL)
mapping using the computed values of writing mode properties.

One idea is to define the "beas" notation as "direction dependent shorthand"
 (similar to "direction dependent aliases" the current editor's draft's
logical properties are) and the mapping occur when shorthand resolving.

I like very much this and I think this is not very difficult to 
implement compared to the current editor's draft's logical properties 
that are already implemented by at least three UAs (AH Formatter, 
WebKit, CopperPDF).



Another idea is described in my 'logical' keyword proposal[1].
[1] http://lists.w3.org/Archives/Public/www-style/2010Sep/0784.html

('logical' is called as 'beas' now)

    margin: beas 1mm 2mm 3mm 4mm;

This shorthand will set the individual properties as follows:

    margin-top:    before 1mm;
    margin-right:  end    2mm;
    margin-bottom: after  3mm;
    margin-left:   start  4mm;

(here 'before','end', 'after', 'start' keywords have same meaning
as 'logical' keyword in [1])

Seems weird? But no problem, we don't have to write directly this 
notation because we should use the shorthand "beas" notation instead.

In this example, when writing mode is vertical-rl, the computed values 
will be as follows:

    margin-top:    4mm; /* from 'margin-left:  start  4mm' */
    margin-right:  1mm; /* from 'margin-top:   before 1mm' */
    margin-bottom: 2mm; /* from 'margin-right:  end   2mm' */
    margin-left:   3mm; /* from 'margin-bottom: after 3mm' */

There is no cascading problem; the cascading can be completed without 
the computed value of 'writing-mode'.
The logical to physical mapping occur when the computed values 
are resolved from the specified values and the writing mode.

And there is no memory problem since the computed values are simply
physical values. No property explosion; it reuse existing properties.


The "tobi" case is similar but a bit different.

    margin: tobi 1mm 2mm 3mm 4mm;

This shorthand will set the individual properties as follows:

    margin-top:    1mm;
    margin-right:  outside 2mm;
    margin-bottom: 3mm;
    margin-left:   inside  4mm;

The outside/inside flag cannot be removed from the computed values
because the outside/inside to left/right mapping cannot be resolved
on a per-element basis. (as Håkon noted)

The syntax of margin properties will be as follows:

    margin-top:    before? <margin-width>
    margin-right:  [end|outside]? <margin-width>
    margin-bottom: after? <margin-width>
    margin-left:   [start|inside]? <margin-width>

I know this syntax is not very good and the behavior is also 
not very good in the following case:

    /* in RTL mode, */
    margin-right: 3em;
    margin: start 2em; /* = 'margin-left: start 2em', resolved to margin-right */

If physical and logical specifications are in conflict, 
the physical one should win because logical specifications 
will be used in UA stylesheets and author and user can 
override the UA default styles.

So 'margin-right: 3em' (physical) wins over 'margin: start 2em' (logical).

But,
    /* in RTL mode, */
    margin-right: 3em;
    margin: start 2em; /* = 'margin-left: start 2em', resolved to margin-right */
    margin: end 0;     /* = 'margin-right: end 0', resolved to margin-left */

In this case, 'margin-right: 3em' disappears in cascading process
('margin-right: end 0' wins) and the 'margin: start 2em' survives.
I think this behavior is hard to understand and will make problems.

I want more idea.


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

Received on Tuesday, 26 October 2010 23:11:22 UTC