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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 20 Mar 2010 10:43:21 -0700
Message-ID: <dd0fbad1003201043x67b00c0bod5f96e1258814eab@mail.gmail.com>
To: MURAKAMI Shinyu <murakami@antenna.co.jp>
Cc: www-style@w3.org
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 GMT

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