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

[css3-text-layout] directional-mode: logical; (... how vertical writing would work in CSS)

From: MURAKAMI Shinyu <murakami@antenna.co.jp>
Date: Sat, 10 Jul 2010 01:23:02 +0900
To: fantasai <fantasai.lists@inkedblade.net>
Cc: Ishii Koji <kojiishi@gluesoft.co.jp>, "www-style@w3.org" <www-style@w3.org>
Message-Id: <20100710012302.A662.C598BCD7@antenna.co.jp>
I'd like to accept Ishii-san's proposal about the 'directional-mode'

  Name:           directional-mode
  Value:          physical | logical
  Initial:        physical
  Applies to:     all elements
  Inherited:      yes

When 'directional-mode: logical' is specified, the directional 
terms left/right/top/bottom/width/height will be interpreted as
logical, i.e.:

  left   = start  (the side occurring first in the inline direction)
  right  = end    (the side opposite the start side)
  top    = before (the side occurring first in the block direction)
  bottom = after  (the side opposite the before side)
  width  = logical-width  (the dimension in the inline direction)
  height = logical-height (the dimension in the block direction)

fantasai <fantasai.lists@inkedblade.net> wrote on 2010/06/29 13:09:39
> Probably it would be easier, but perhaps not by as much as you think.
> For example, as I mentioned, in Mongolian layout the top of the line and
> the top of the paragraph do not coincide. What does 'vertical-align: top'
> mean in that case? I think the box model definitions would still need an
> update.

I think the value 'top' of the vertical-align property should not be
affected by the 'directional-mode' because in CSS3 Line [1], the values
of 'vertical-align' (shorthand) property are logically defined as

    Align the before edge of the extended inline box with the before-edge
    of the line box. 

[1] http://dev.w3.org/csswg/css3-linebox/#vertical-align-prop

I suppose the before edge of the line box in Mongolian layout is
the right side.

In Mongolian layout (tb-lr) with logical directional-mode, the
'border-top' of block boxes will appear in the left side, but the
'border-top' of inline boxes will appear in the right side(?)
(I'm not sure)

> It also means that for anyone not using an ltr horizontal writing mode,
> all directional keywords act wacky with respect to their standard
> definitions.

We have already such examples. The Unicode standard uses character names
such as LEFT PARENTHESIS. This LEFT character appears in the right side
in rtl writing and in the top side in ttb (vertical) writing, so the
LEFT of the unicode character names is logical direction, not physical.
Why CSS standard cannot do this?

The logical directional-mode is important for vertical text ebook
viewers. Now several EPUB viewers can display the content (XHTML+CSS2)
as vertical text and the 'margin-left' is treated as margin-"top".

One example of such implementation:
The documentation (Japanese):
English translation:
(see the 'Vertical style' section.)

This is a typical vertical text EPUB or HTML+CSS implementation.
I believe this should be compatible with the future CSS3 Text Layout 
standard, otherwise CSS vertical text standardization will fail.
So 'directional-mode: logical' mechanism must be defined in
the CSS3 Text Layout standard.

The typical vertical text style sheet will be as following:

  :root {
    block-flow: rl;
    directional-mode: logical;
  img { /* images have physical width and height */
    directional-mode: physical;

This can be the default style sheet of vertical text ebook viewers.

ζ‘δΈŠ ηœŸι›„ (MURAKAMI Shinyu)
Antenna House Formatter:
Received on Friday, 9 July 2010 16:23:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:48 UTC