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

On Sat, Mar 20, 2010 at 8:25 AM, MURAKAMI Shinyu <murakami@antenna.co.jp> wrote:
> 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/

I don't think Media Queries is correct here; you're just wanting to
apply a set of rules only if another rule is supported.  There have
been suggestions on how to do that.  For example:

@requires {
  body {
    writing-mode: tb-rl !required;
  }

  blockquote {
    margin: 3em 0 0 0;
  }
}

Under this suggested syntax, the rules in the @required block would
only be used if all the !required rules within the block are fully
supported (both property and value are recognized by the browser).
This would fulfill your use-case, along with a bunch of others which
also have a bad fallback story.

~TJ

Received on Saturday, 20 March 2010 17:51:28 UTC