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

みなさん、こんにちわ。

thotonの秋元です。

拙論について意見を下さり、大変感謝します。

1.用語

確かに混乱を招き易いので、よりシンプルで明快なものがよいでしょうね。

plus-x＝character-forward（字送り順方向:+x)＝logical right
minus-x＝character-backward（字送り逆方向:-x）＝logical left
plus-y＝line-forward（行送り順方向:+y）＝logical bottom
minus-y＝line-backward（行送り逆方向:-y）＝logical top

みたいな感じでは、どうでしょうか。

2. 座標系

'writing-mode'と'directional-mode'は、さらに整理できるような気もします。

前回、「回転角度の違いが問題の本質」と愚考しましたが、
皆さんの書き込み内容やTraditional Mongolian、Arabic, Hebrew
なども併せて考えると、そうではなくて、そもそも"書字座標系"自体が
各言語毎に異なっているというわけですね。

自分で図を描いてみました。

http://www.thoton.co.jp/wordpress/wp-content/uploads/CSS3-Coordinate-systems.jpg

実用上は下記のような４つのプリセット座標系から選択できるようにするだけでＯＫでしょうか。

enum writing_coordinate_system = { "European", "RightToLeft",
"CJK-Vertical", "Mongolian-Vertical"};

+x,-x,+y,-yがそれぞれ具体的に上下左右のどっちを示すかは、採用している座標系writing-coordinate-system
の値に依存するということです。

こちらも結局、新しい概念というより、用語を多少、変えただけかも知れませんが。

ソトン・グローバル・コンピューティング（株）　秋元貴之
taka-akimoto@thoton.co.jp

2010年7月11日14:06 MURAKAMI Shinyu <murakami@antenna.co.jp>:
> 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 13:31:54 UTC