W3C home > Mailing lists > Public > www-style@w3.org > October 2010

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

From: Håkon Wium Lie <howcome@opera.com>
Date: Sun, 24 Oct 2010 19:14:51 +0200
Message-ID: <19652.27019.153583.845446@gargle.gargle.HOWL>
To: David Hyatt <hyatt@apple.com>
Cc: John Daggett <jdaggett@mozilla.com>, "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
Also sprach David Hyatt:

 > > My point here is that if there are some elements that don't rotate
 > > within vertical text layouts, then simply flipping box properties
 > > based on the writing mode isn't always going to give you a workable
 > > layout in both vertical and horizontal modes.
 > Sure. Obviously the logical properties don't cover everything. It's
 > a question of whether they are good enough for the kinds of dual
 > layouts people want to construct. We need to be thinking about use
 > cases, i.e., what content is it that people want to be dual, and
 > how complex is it going to be?

One use case for dual layout is inside and outside pages. For example,
in a textbook you may want to float figures towards the outside
margin, with a padding on the inside. For example, like this:


If we duplicate property names, we could write:

  .figure { 
     float: outside;
     margin-outside: -3em;
     paddding-inside: 1em;
     border-inside: thin solid black;
     border-bottom-inside-radius: 1em;
     border-bottom-outside-radius: 1em;


We'd end up with very many properties, though. And long discussions
about which properties/values to duplicate: background-position?
caption-side? clear? float? text-align? vertical-align? top? right?
bottom? left?

I would favor solution that doesn't incread the number of property in
the hundreds.

 > > Several ideas have been proposed but I think a pseudo-element that's
 > > dependent on the value of writing-mode seems interesting.
 > > 
 > >  p { margin: 1em 0px; }
 > >  p::writing-mode(vertical-rl) { margin: 0px 1em; }
 > > 
 > From an implementation perspective this is a really bad solution.
 > You'd be checking for pseudo-elements on every element in the
 > engine while you did your layout, and then for vertical pages in
 > particular, there would be extra pseudo-elements for many
 > elements. Pseudo-elements are also very poorly understood by
 > authors, so if we're talking about keeping things simple, then we
 > really shouldn't be using pseudo-elements.

It would probably be a pseudo class.

 > I'm not opposed to some way of writing style rules for different
 > writing modes. I hope it didn't sound like i was. I think nobody
 > has suggested a good way to do this though.

I tried to list some alternatives here:


The pseudo-class and media queries options are compelling to me as
they allow optimized values to be set, not just mirrored values. In
general, I don't think you can just mirrors values. For example, in
the textbook example above you may want to have different borders on
right and left pages. Using media queries, one could e.g. express this

  @media (page: right) {
    border: thin solid red;
  @media (page: left) {
    border: thin solid blue;

 > Conceptually a pseudo-element just isn't the right way to do this,
 > and from an implementation perspective, it will introduce a lot
 > more complexity into the code, since you'll have to ask for this
 > special pseudo element all over the place. The logical properties
 > by comparison have no impact on existing code.

I'm wondering how you represent the new properties internally -- are
they cascaded and inherited alongside the other properties? And
resolved when the computed value of 'writing-direction' is known?

 > Another idea: just specify writing-mode in HTML instead and don't
 > have it be in CSS at all (except as a pseudo class you match on in
 > order to provide rules for that writing mode). This is a little
 > weird in that we already have direction in CSS though.

I think it makes sense for this to be known in HTML. 

              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Sunday, 24 October 2010 17:15:41 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:40 UTC