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

John Daggett <jdaggett@mozilla.com> wrote on 2010/10/24 23:16:14
> To do the same thing with logical properties you need to write out
> all the individual properties because the shorthand is physical-only:
> 
>   p { 
>     margin: 1em 0px;
>     margin-before: 1em;
>     margin-after: 1em;
>     margin-start: 0px;
>     margin-end: 0px;
>   }
>   
> How is this making life easier?

  p { 
    margin: 1em 0px;
    margin: 1em 0px logical;
  }

The 'logical' keyword will make the shorthand logical.
fantasai suggested this idea: http://lists.w3.org/Archives/Public/www-style/2006Jun/0084.html

This is not difficult: just duplicate the line and add 'logical' keyword.

> 
> Another interesting thing to point out is that the defaults for
> Western text don't really make sense as defaults for Japanese vertical
> text.  The margin settings above are the Webkit user agent stylesheet
> values.  With logical margins, the 1em top/bottom margins for
> horizontal layout become 1em left/right margins for vertical text
> layout. But vertical text layout in Japanese generally doesn't include
> spaces between paragraphs.  With this model there's no way for user
> agent stylesheets to use different defaults for different writing modes.

Generally, Western text style and Japanese horizontal style are different,
but Japanese horizontal style and Japanese vertical style are not so different.
Of course we have some layout rules only for vertical text but basic things
such as indentation and space between paragraphs/headings are similar.
So we want logical abstraction.

I don't think web browsers should have default UA style for Japanese 
such as
p { margin: 0; text-indent: 1em }
It should be specified by author if needed. Some people will want space
between paragraphs even in vertical text. (Books and web will be different)

I made a Japanese horizontal text sample and vertical text sample 
with same style except the writing direction:

Horizontal text:
http://nadita.com/murakami/test-logical/test-horiz.html

Vertical text (test with IE8):
http://nadita.com/murakami/test-logical/test-vert.html

These uses physical properties, vert.css is the copy of horiz.css with
s/top/right/, s/right/bottom/, s/bottom/left/, s/width/height/, etc.
Maintaining such two style sheets is painful.
If logical properties can be used, our life becomes easier.

-- 
MURAKAMI Shinyu
http://twitter.com/MurakamiShinyu
Antenna House Formatter:
http://www.antennahouse.com

Received on Sunday, 24 October 2010 20:25:44 UTC