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

John Daggett <jdaggett@mozilla.com> wrote on 2010/10/25 14:10:21
> 
> Makoto Murata wrote:
> 
> > 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.
> 
> But to support fallback in older browsers, the version of this
> stylesheet used if the proposed logical properties are introduced isn't
> much better, all asymmetric property values need to have a fallback form
> and a logical form:
> 
>   html {
>     font-size: 12pt;
>     line-height: 1.75;
>   }
>   div.header {
>     border-top: thick solid;
>     border-before: thick solid;
>     border-bottom: thick solid;
>     border-after: thick solid;
>     margin-bottom: 2em;
>     margin-after: 2em;
>     line-height: 1.5;
>   }
...

As I and Koji mentioned already, shorthand logical properties
(shorthand properties with 'logical' keyword) will make it easier
and shorter:

  html {
    font-size: 12pt;
    line-height: 1.75;
  }
  div.header {
    border-width: thick;
    border-style: solid none;
    border-style: solid none logical;
    margin: 0 0 2em 0;
    margin: 0 0 2em 0 logical;
    line-height: 1.5;
  }
  h1.title {
    font-size: 3em;
    padding: 0 0 0 1em;
    padding: 0 0 0 1em logical;
    margin: 0;
  }
  h2.author {
    text-align: right;
    text-align: end;
    font-size: 2em;
    padding: 0 1em 0 0;
    padding: 0 1em 0 0 logical;
    margin: 0;
  }
  div.article {
    width: 70%;
    logical-width: 70%;
    logical-height: auto;
    padding: 0 .5em 0 0;
    padding: 0 .5em 0 0 logical;
    border-width: thin;
    border-style: none solid none none;
    border-style: none solid none none logical;
    text-align: justify;
  }
  div.aside {
    width: 26%;
    logical-width: 26%;
    logical-height: auto;
    float: right;
    float: end;
    padding: 0 .25em;
    padding: 0 .25em logical;
    background-color: #cdf;
  }
  p {
    margin: 0;
    text-indent: 1em;
  }
  blockquote {
    margin: 2.75em .25em;
    margin: 2.75em .25em logical;
    padding: .25em;
    background-color: #fd8;
  }

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

Received on Monday, 25 October 2010 05:51:42 UTC