Re: [css3-text-layout] New editor's draft - margin-before/after/start/end etc.

Also sprach MURATA Makoto:

 > > Idea is pretty easy. This
 > > 
 > > <body dir="ttb">  ... </body>
 > 
 > I do not understand.  Are you proposing to change HTML so that "ttb" is
 > allowed as a permissible value?

That's certainly an option.

 > HTML4.01 does not allow dir="ttb"
 > http://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.2
 > 
 > HTML5 does not either.
 > http://dev.w3.org/html5/spec/Overview.html#the-dir-attribute
 > 
 > I think that the design of HTML4.01 and HTML5 is sensible.  
 > "ttb" is a style issue, while "rtl" is a content issue.

Perhaps. The distinction between the two is sometimes more blurry than
we like to admit. However, in this case, I see your point; layout can
much more easily change from vertical to horizontal than from lrt to
rtl.

Still, even without adding 'ttb' to HTML, the :ttb pseudo-class could
serve us well. It could mean:

 (a) if vertical layout is supported, or
 (b) if vertical layout is supported and the value of 'block-flow' is lr/rl

For example, in (a) you could write:

  p { margin: 20px 10px }

  p:ttb {
    writing-mode: tb-rl;
    margin: 10px 22px;
    font-family: foo;
  }  

So, only UAs that support vertical writing will see the margin
declaration meant for vertical writing. As such, graceful degradation
is supported. 

In (b), you could write:

  * { writing-mode: tb-rl }

  p { margin: 20px 10px }

  p:ttb {
    margin: 10px 22px;
    font-family: foo;
  }  

This model is a bit tricky in the sense that it introduces a selector
(:ttb) that depends on the value of a property (writing-mode) of that
element. I think I prefer (a).

In both (a) and (b) you could use alternate style sheets to let users
select between vertical and horizontal presentations. For example, the
default style sheet could be vertical:

  p { margin: 20px 10px }

  p:ttb {
    writing-mode: tb-rl;
    margin: 10px 22px;
    font-family: foo;
  }  

And the alternate style sheet could be horizontal

  p {
    writing-mode: lr-tb'
    margin: 20px 10px;
  }  

UAs that do not support vertical writing would apply these rules in
both cases:

  p { margin: 20px 10px }

As such, we have graceful degradation.

So, the pseudo-class selectors would mean:

  :lrt   horizontal writing is supported and @dir has been set to 'lrt'
  :rtl   horizontal writing is supported and @dir has been set to 'rtl'
  :ttb   vertial writing is supported

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

Received on Friday, 4 June 2010 08:39:50 UTC