[css3-text-layout][css3-mediaqueries] Proposal: writing-mode media feature

CSS3 Text Layout[1] defines writing mode properties that enable
vertical text layout, but there is a serious problem to use that
functionality.

See the following example:

<!DOCTYPE html>
<html>
<style>
  body {
    writing-mode: tb-rl;  /* vertical text layout */
  }
  blockquote {
    margin-top:    3em;   /* indent the blockquote */
    margin-bottom: 0;
    margin-right:  0;
    margin-left:   0;
  }
</style>
<body>
  <p>次は引用ブロックです。</p>
  <blockquote>ここは引用ブロックです。</blockquote>
</body>
</html>

Note that the "indent" corresponds to the "margin-top" in vertical text
layout.

It works well with UAs supporting vertical text but when this page is
viewed with other UAs the result is miserable -- the indent of the
blockquote disappears and unexpected large space before the blockquote
appears.

It is obvious that the fallback stylesheet for UAs not supporting
vertical text is needed. But I could not find the standard way to
specify such fallback stylesheets.

Media Queries[2] seems to be a solution. I want a media feature
describes supporting writing modes. The following is my proposal:

Media feature name: writing-mode
Value: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

The value tb-rl means the UA supports the tb-rl writing mode.

Example:

<!DOCTYPE html>
<html>
<style>
  /* fallback for UAs not supporting vertical text */
  blockquote {
    margin-left:    3em;   /* indent the blockquote */
    margin-right:   0;
    margin-top:     0;
    margin-bottom:  0;
  }
@media (writing-mode: tb-rl) {
  /* stylesheet for UAs supporting vertical text */
  body {
    writing-mode: tb-rl;  /* vertical text layout */
  }
  blockquote {
    margin-top:    3em;   /* indent the blockquote */
    margin-bottom: 0;
    margin-right:  0;
    margin-left:   0;
  }
}
</style>
<body>
  <p>次は引用ブロックです。</p>
  <blockquote>ここは引用ブロックです。</blockquote>
</body>
</html>


[1] http://dev.w3.org/csswg/css3-text-layout/
[2] http://www.w3.org/TR/css3-mediaqueries/


Best regards,

-- 
村上 真雄 (MURAKAMI Shinyu)
http://twitter.com/MurakamiShinyu
Antenna House Formatter:
http://www.antenna.co.jp/AHF/
http://www.antennahouse.com

Received on Saturday, 20 March 2010 15:25:59 UTC