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

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)

Third, what are we keying off? That is, what does the UA consult when
trying to find out how to resolve these abstracted values? There are
several options:

  - the computed value of 'writing-mode' for the element

  - some document-wide setting that reflects the major writing
    direction of the document, e.g., the computed value of
    'writing-mode' for the root element

For inside/outside, the most natural value to key off from the which
page the content is on. This cannot be resolved on a per-element basis
(as elements can be paginated). 

 >  2. A new @writing-mode rule that would enclose style rules only used with
 >     user agents that fully support all writing-mode modes defined in
 >     CSS3 Writing Modes.
 > 
 >     /* styles used for fallback horizontal layout */
 >     .rounded { border-radius: 1em 2em; }
 >  
 >     @writing-mode {
 >       /* styles used when writing modes are supported */
 >       .rounded { border-radius: 2em 1em; }
 >     }

As others have suggested, I think we can use media queries for this. 

I'm slightly worried about having a binary switch for "full support"
or not. One can see clients that support ltr and rtl, but not vertical
layout. Or some other matrix. Why not use media queries and query the
dominant direction of the document, e.g.:

  body { border-radius: 1em 2em }
  @media (dir: vertical-lr) { 
    body { margin: border-radius: 2em 1em }
  }

 > No property other than these basic box model properties would be
 > "logicalized"

I support this. It's managable. It seems managable.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Monday, 25 October 2010 13:04:28 UTC