W3C home > Mailing lists > Public > public-html-ig-jp@w3.org > July 2010

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

From: Ishii Koji <kojiishi@gluesoft.co.jp>
Date: Sun, 11 Jul 2010 09:52:29 -0400
To: Takayuki Akimoto <akimoto.takayuki@gmail.com>, MURAKAMI Shinyu <murakami@antenna.co.jp>
CC: "public-html-ig-jp@w3.org" <public-html-ig-jp@w3.org>
Message-ID: <A592E245B36A8949BDB0A302B375FB4E09EA72C114@MAILR001.mail.lan>
> 実用上は下記のような4つのプリセット座標系から選択できるようにするだけでOKでしょうか。
> enum writing_coordinate_system = { "European", "RightToLeft", "CJK-Vertical", "Mongolian-Vertical"};

現実として利用するかどうかは別として、論理的には縦書きの中に横書き言語を引用として入れることは可能になっています。このため、East Asian縦書きにRTL言語を引用する、というのは可能性としてあるのではないでしょうか? そういう想定をすると、もう少し複雑になります。

詳細は少しおいておいて、全体像を俯瞰すると、私が推察するに、秋元さんのご提案は、文字フローとは独立して、left/right/top/bottom/width/heightの解釈を変更したい、ということと理解してよろしいですか?

私や村上さんの提案では、座標軸の変更という大きな意味では秋元さんのお話と類似はしているものの、文字フローに連動するモードを追加しよう、というものだと理解しています。私が頭の中に描いている利用場面では、この二つは連動している方が便利であり、独立させた場合のデメリットとして
* フローと切り離されるため、フローを切り替えるたびに指定しなければならない
* フローとの関係を製作者が覚えなければならない(縦書きは90度、bi-diは左右反転、など)
の二つを挙げさせていただきましたが、逆に文字フローと座標系を独立させるメリットは私にはあまり思いつきませんでした。

秋元さんが考える、メリットなり、便利な利用場面などがもしありましたら、教えていただけますか?


-----Original Message-----
From: Takayuki Akimoto [mailto:akimoto.takayuki@gmail.com] 
Sent: Sunday, July 11, 2010 10:31 PM
To: MURAKAMI Shinyu
Cc: Ishii Koji; public-html-ig-jp@w3.org
Subject: 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

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

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,38000834
>> 23,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:53:05 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Sunday, 11 July 2010 13:53:06 GMT