Re: CSS の left/right/top/bottom と縦書きの関係について

Ishii Koji <kojiishi@gluesoft.co.jp> wrote on 2010/07/10 17:35:06
> 秋元さん、ご意見ありがとうございます。
> 
> 実は英語MLでそのような可能性の提示もありました。文字のフローとの関係を切り離し、CSS Transform
> http://www.w3.org/TR/css3-2d-transforms/
> http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20388352,00.htm
> と類似の考えを持ちこんでも、秋元さんご指摘のように、元の問題を解決できると思います。

縦書きとTransformの回転は、実現方法は通じるものがあるとしても、明確に
分けるべきだと思います。

縦書きと横書きは単純に方向が違うだけではありません。グリフに関することは
もちろんですが、それ以外でも、たとえば横書きでは欧文のベースライン位置を
基準にして文字を揃えるが、縦書きでは文字の中心のベースライン位置を使って
文字を揃えるというような、縦書き・横書きのそれぞれで最適になるような規定
が CSS3 module: line ドラフトにあります：
参考：http://dev.w3.org/csswg/css3-linebox/#baseline
(dominant-baseline プロパティの初期値の auto の記述を参照)

また、CSS3 Ruby Module では、縦書き・横書きに関わらず常に右側に配置する
bopomofoルビについて書かれています：
http://dev.w3.org/csswg/css3-ruby/#rubypos

このような縦書き・横書きが関係する CSS3 の規定は、writing-mode プロパティ
の仕様を前提としています。
CSS3 Text Layout の writing-mode (direction と block-flow プロパティ)
によって書字方向を指定するというのが、W3C CSSWG で合意されていることで
あり、これとは別の方法を CSS に持ち込もうとしたら、CSS3縦書きの標準化
は失敗してしまいます。

CSS3 Text Layout 仕様が目指しているのは、次の文書に示されている
Robust Vertical Text Layout ということで、モンゴル語、アラビア語、
日本語といった書字方向の違うものが混在できる強力な縦書きです：

Unicode Technical Note #22: Robust Vertical Text Layout
by Elika J. Etemad (fantasai)
http://unicode.org/notes/tn22/
http://unicode.org/notes/tn22/RobustVerticalLayout.pdf
（これを書いた Elika J. Etemad (fantasai) が CSS3 Text Layout や
CSS3 Text のメインのエディターです）

directional-mode: logical をCSS仕様に入れることは、CSS3縦書きを
使いやすいものにすることと、現在登場しつつある縦書きEPUBビューア
などのHTML/CSSの縦書き実装（縦書きでmargin-leftが上を指す）と、
CSS3縦書きとが互換性のあるものにするために意味があります。

'margin-start', 'margin-end' など論理的プロパティを標準化する
考えもありますが、その標準化には時間がかかり、EPUB縦書き仕様に
それを使うというのは断念してます。
directional-mode: logical によって、将来のCSS3縦書き標準でも
縦書きでmargin-leftが上を指すように出来るということになれば、
そのような縦書きを実装している今のEPUBビューアのやりかたを
EPUB縦書きの標準にしても将来的にCSS3縦書きと互換性が保てます。


英語の www-style ML の方に、若干のコメントを追加してます：
http://lists.w3.org/Archives/Public/www-style/2010Jul/0151.html

（以下、その内容）

私は書きました：
| 石井さんの 'directional-mode' の提案を受け入れたい。
| 
|   Name:           directional-mode
|   Value:          physical | logical
|   Initial:        physical
|   Applies to:     all elements
|   Inherited:      yes
| 
| 'directional-mode: logical' が指定されたときは方向を示す語
| left/right/top/bottom/width/height を次のように論理的に解釈：
| 
|   left   = start  (インライン方向での先頭側)
|   right  = end    (startの反対側)
|   top    = before (ブロック方向での先頭側)
|   bottom = after  (beforeの反対側)
|   width  = logical-width  (インライン方向の寸法)
|   height = logical-height (ブロック方向の寸法)

この定義について考えなおしてます。'top' と 'bottom' はたぶんOKだけど
'left' と 'right' は右から左(RTL)の書字方向のとき、混乱しそう。
次のようにしたほうがよさそうです：

    left   = LTRテキストの start 側、
             RTLテキストの end 側
    right  = LTRテキストの end 側、
             RTLテキストの start 側

まとめると、論理(logical)座標と物理(physical)座標の対応関係は次のように
なります：

block-flow: tb (横書き)
=======================
logical left   = physical left
logical right  = physical right
logical top    = physical top
logical bottom = physical bottom
logical width  = physical width
logical height = physical height

block-flow: rl (右縦書き：日本語など)
=====================================
logical left   = physical top
logical right  = physical bottom
logical top    = physical right
logical bottom = physical left
logical width  = physical height
logical height = physical width

block-flow: lr (左縦書き：モンゴル語など)
=========================================
logical left   = physical top
logical right  = physical bottom
logical top    = physical left
logical bottom = physical right
logical width  = physical height
logical height = physical width


使用例：

  :root {
    block-flow: rl;
    directional-mode: logical;
  }
  blockquote {
    margin-left: 2em; /* logical left = physical top in vertical writing */
  }
  img.one {
    /* 画像については物理座標を使いたい */
    directional-mode: physical;
    width: 30px;
    height: 20px;
  }


この 'directional-mode' スイッチは縦書きを使いたいスタイルシート作成者に
とって便利なものです。
しかし、fantasaiが指摘してるように、UAのデフォルトスタイルシートで、
例えば<ul>のデフォルトマージン（bulletと同じ側にしなくてはいけない）
をセットするのには使えません。'margin-start' など論理的プロパティ
（あるいは何か別のしくみ）が、まだ必要です。

（以上、www-style ML に書いたことです）

UA（Webブラウザなど）のデフォルトスタイルシートで使えない理由を補足する
と、次のことです：

・ブラウザのデフォルトでCSSの標準のモード（directional-mode: physical）
  を変えるべきではない。（縦書きビューアなど特別なUAは別ですが）

・directional-mode: logical でもRTLの書字方向のとき margin-left は左側
  のまま（そうしないと混乱しそう）。


Twitterで教えてもらったことですが、TeXの縦書きでも left が上、
top が右ということです。モンゴル語の左縦書きでは top が左に
なるのかどうかが気になります。Twitter でつぶやいてますが：
http://twitter.com/MurakamiShinyu/status/18178155586
左縦書きで、logical top = physical left とするのがよいのか、
若干の迷いがあり、TeXでのモンゴル語の左縦書きがどうであるかを
参考にしたいです。
分かる人いましたらよろしくお願いします。

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

Received on Sunday, 11 July 2010 05:07:15 UTC