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

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

From: MURAKAMI Shinyu <murakami@antenna.co.jp>
Date: Sun, 11 Jul 2010 04:19:09 +0900
To: www-style@w3.org
Cc: fantasai <fantasai.lists@inkedblade.net>, Ishii Koji <kojiishi@gluesoft.co.jp>
Message-Id: <20100711041909.A68A.C598BCD7@antenna.co.jp>
MURAKAMI Shinyu <murakami@antenna.co.jp> wrote on 2010/07/10 1:23:02
> I'd like to accept Ishii-san's proposal about the 'directional-mode'
> property.
>   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)

I am reconsidering these definitions. The 'top' and 'bottom' are
probably OK, but 'left' and 'right' are confusing in right-to-left
writing. The following will be better:

    left   = the start side for left-to-right text,
             the end side for right-to-left text.
    right  = the end side for left-to-right text,
             the start side for right-to-left text.

To summarize, the mappings of logical to physical coordinate system
will be the following:

block-flow: tb
logical left   = physical left
logical right  = physical right
logical top    = physical top
logical bottom = physical bottom
logical width  = physical width
logical height = physical height

block-flow: rl
logical left   = physical top
logical right  = physical bottom
logical top    = physical right
logical bottom = physical left
logical width  = physical height
logical height = physical width

block-flow: lr
logical left   = physical top
logical right  = physical bottom
logical top    = physical left
logical bottom = physical right
logical width  = physical height
logical height = physical width

Example usage:

  :root {
    block-flow: rl;
    directional-mode: logical;
  blockquote {
    margin-left: 2em; /* logical left = physical top in vertical writing */
  img.one {
    /* I'd like to use physical coordinate system for images */
    directional-mode: physical;
    width: 30px;
    height: 20px;

This 'directional-mode' switch will be useful for style sheet
authors who would like to use vertical writing mode,
but, as fantasai wrote, this cannot be used in UA's default style sheet
to set, e.g. the default margins on <ul>, which should be on the same
side as the bullets. The logical properties, 'margin-start' etc.
(or something other mechanism) are still needed.

Best regards,

ζ‘δΈŠ ηœŸι›„ (MURAKAMI Shinyu)
Antenna House Formatter:
Received on Saturday, 10 July 2010 19:19:51 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:48 UTC