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

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

From: MURATA Makoto (FAMILY Given) <eb2m-mrt@asahi-net.or.jp>
Date: Mon, 25 Oct 2010 15:24:25 +0900
To: www-style@w3.org
Message-Id: <20101025152424.6DC0.B794FC04@asahi-net.or.jp>
In my understanding, if we use media queries, the stylesheet will become 
as follows.  It takes 93 lines. 

 html {
   font-size: 12pt;
   line-height: 1.75;
 }
 div.header {
   line-height: 1.5;
 }
 h1.title {
   font-size: 3em;
   margin: 0;
 }
 h2.author {
   text-align: right;
   font-size: 2em;
   margin: 0;
 }
 div.article {
   text-align: justify;
 }
 div.aside {
   float: right;
   background-color: #cdf;
 }
 p {
   text-indent: 1em;
 }
 blockquote {
   padding: .25em;
   background-color: #fd8;
 }

@media vertical-writing {
 html {
   writing-mode: tb-rl; /* IE compat */
   writing-mode: vertical-rl;
 }
 div.header {
   border-right: thick solid;
   border-left: thick solid;
   margin-left: 2em;
 }
 h1.title {
   padding-top: 1em;
 }
 h2.author {
   padding-bottom: 1em;
 }
 div.article {
   height: 70%;
   padding-bottom: .5em;
   border-bottom: solid thin;
 }
 div.aside {
   height: 26%;
   padding-top: .25em;
   padding-bottom: .25em;
 }
 blockquote {
   margin-top: 2.75em;
   margin-bottom: 2.75em;
   margin-right: .25em;
   margin-left: .25em;
 }
}
@media horizontal-writing {
 div.header {
   border-top: thick solid;
   border-bottom: thick solid;
   margin-bottom: 2em;
 }
 h1.title {
   padding-left: 1em;
 }
 h2.author {
   padding-right: 1em;
 }
 div.article {
   width: 70%;
   padding-right: .5em;
   border-right: solid thin;
 }
 div.aside {
   width: 26%;
   padding-left: .25em;
   padding-right: .25em;
 }
 blockquote {
   margin-left: 2.75em;
   margin-right: 2.75em;
   margin-top: .25em;
   margin-bottom: .25em;
 }
}

Cheers,
Makoto
Received on Monday, 25 October 2010 06:25:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:33 GMT