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

Murakami-san,

Thank you for providing real examples.  Your horiz.css and vert.css
are very helpful.  I would recommend everybody to use Murakami-san's
example for demonstrating advantages of your favorite options.

http://nadita.com/murakami/test-logical/vert.css
http://nadita.com/murakami/test-logical/horiz.css

Here I give a unified diff result.  Obviously, maintaining these two
sets is too painful.  Note that automatic conversion is not always
possible since the stylesheet author might want to introduce some 
differences on purpose.

Cheers,
Makoto

bash-3.2$ diff -u horiz.css vert.css
--- horiz.css	Mon Oct 25 00:57:28 2010
+++ vert.css	Mon Oct 25 00:57:29 2010
@@ -1,35 +1,37 @@
 ・ソhtml {
+  writing-mode: tb-rl; /* IE compat */
+  writing-mode: vertical-rl;
   font-size: 12pt;
   line-height: 1.75;
 }
 div.header {
-  border-top: thick solid;
-  border-bottom: thick solid;
-  margin-bottom: 2em;
+  border-right: thick solid;
+  border-left: thick solid;
+  margin-left: 2em;
   line-height: 1.5;
 }
 h1.title {
   font-size: 3em;
-  padding-left: 1em;
+  padding-top: 1em;
   margin: 0;
 }
 h2.author {
   text-align: right;
   font-size: 2em;
-  padding-right: 1em;
+  padding-bottom: 1em;
   margin: 0;
 }
 div.article {
-  width: 70%;
-  padding-right: .5em;
-  border-right: solid thin;
+  height: 70%;
+  padding-bottom: .5em;
+  border-bottom: solid thin;
   text-align: justify;
 }
 div.aside {
-  width: 26%;
+  height: 26%;
   float: right;
-  padding-left: .25em;
-  padding-right: .25em;
+  padding-top: .25em;
+  padding-bottom: .25em;
   background-color: #cdf;
 }
 p {
@@ -37,10 +39,10 @@
   text-indent: 1em;
 }
 blockquote {
-  margin-left: 2.75em;
-  margin-right: 2.75em;
-  margin-top: .25em;
-  margin-bottom: .25em;
+  margin-top: 2.75em;
+  margin-bottom: 2.75em;
+  margin-right: .25em;
+  margin-left: .25em;
   padding: .25em;
   background-color: #fd8;
 }

Cheers,
Makoto

> 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 Monday, 25 October 2010 00:17:38 UTC