CSS3 Directions

CSS3 uses two independent directional models: absolute (top,
right, bottom, left) and relative (before, end, after, start).
Only some properties use both; most only use the absolute
model. The entire box model--including positioning and box
dimensions--is defined in terms of absolute directions.
Considering that CSS3 allows three different flows and six
different writing directions, this dangerous. It leaves styles
unstable, their integrity depending on the value of a single
property.

CSS *needs* to be able to specify the entire box model with
relative directions. To me, this is the most important issue
in CSS3. Here's why:

   Here is a document:
     http://fantasai.tripod.com/www-style/2003/directions/lr.html

   As you can see, it's a regular text, formatted like a weblog.
   Nothing fancy. It's in English, but let's pretend I wrote the
   text in Chinese.

   I decide to lay out the document with vertical text, as this
   is the traditional format, so I add "writing-mode: tb-rl" to
   the :root rule set. Then I specify appropriate borders, padding,
   positioning, margins, etc. for various elements on the page.

   In browser X, it would look something like this:
     http://fantasai.tripod.com/www-style/2003/directions/tb-x.gif
   Browser X, we imagine, supports vertical text quite well.

   Unfortunately, browser Y does not. The same page in browser
   Y looks like this:
     http://fantasai.tripod.com/www-style/2003/directions/tb-y.gif
   (Rendering courtesy of Mozilla, but it breaks wonderfully
    in Opera and IE, too, of course.)

   The coolest feature in CSS3 was letting me write Chinese as
   it was meant to be written--vertically. However, the result
   looks horrendous--unreadable, even--without full vertical
   text support, which many browsers do not have. So, as a
   compromise, I resort to client-sniffing, serving vertical-
   text stylesheets to those that I know support it and
   horizontal-text stylesheets to those that don't and hope
   readers using browser X don't use the "disable vertical text"
   pref.


One argument against relatively defined properties goes that
stylesheets written for one text direction don't work for
another anyway, so it's not worth the complication. But I
think most stylesheets on the web are not so convoluted as
to break on a writing mode switch, should they be written to
use relative directions. The vertical text stylesheet in the
example I just gave was created by merely swapping a few
direction keywords and shortcut value orders--effectively
what would happen if I had used relative directions in the
code. CSS3 can, and should, be designed to make styling
for multiple languages effortless.

I know that relative directions add many properties and
values to CSS, something the WG wants to avoid. However,
without it, stylesheets are extremely fragile. They must be
written based on an assumption of text direction, and if
that assumtion fails for whatever reason--lack of browser
support, user stylesheet, automatic translation--the style's
entire design collapses.

~fantasai

Received on Saturday, 15 February 2003 11:48:08 UTC