Re: CSS3縦書きの問題点と仕様改善の提案

村上さん

お疲れ様です。一條です。
取り急ぎご報告、ありがとうございます。

CSSWGで議論が進んでよかったです。
プロパティの呼称は残念（苦笑）ですが、他の仕様とも合わせてならば、
そのほうがいいですね。
ネット上で様々なプレゼンテーションを対応する時に頭の中で無駄な変換をしなくてすみます。

プロパティ名称と意味するところの認知は慣れの問題でもあるので、
提示していただいた仕様を読んで、方向の示し方について理解を進めておきます！

続きの回答を楽しみにお待ちしております。


2010年4月15日11:25 MURAKAMI Shinyu <murakami@antenna.co.jp>:
> 一條さん、コメントありがとうございます。
>
> まずそれぞれの項目にお返事する前に、昨日W3CのCSSWGの電話会議でこの問題が
> 議論されて決まったことを、取り急ぎ報告します。
>
> writing-mode相対プロパティ、margin-start, margin-end, margin-before,
> margin-after などを CSS3ドラフトに入れるということに、CSSWG 内での合意が
> 得られました。
>
> この start, end, before, after での方向の示し方というのは、W3C 内で前か
> ら議論されているもので[1]、すでに W3C の XSL-FO 仕様[2]で使われていたもの
> ます。それを CSS でも正式なものにしようということになりました。これにより、
> たとえば margin-start: 2em の指定で、縦書きでも横書きでも全角２字分の
> インデントということになります。
>
> のちほど、また詳しく疑問な点について回答したいと思います。
> よろしくお願いします。
>
> [1] http://lists.w3.org/Archives/Public/www-style/2008Feb/0294.html
> [2] http://www.w3.org/TR/xsl/
>
> --
> 村上 真雄 (MURAKAMI Shinyu)
> http://twitter.com/MurakamiShinyu
> Antenna House Formatter:
> http://www.antenna.co.jp/AHF/
> http://www.antennahouse.com
>
>
> Miwako Ichijo <usa132006@gmail.com> wrote on 2010/04/13 13:17:34
>> こんにちは、一條と申します。
>> CSS3のテキストレイアウトで投稿された内容、じっくり読ませていただきました。
>>
>> 私は仕様に関する議論等々に参加したことがなく、仕様を利用するマークアップ担当者の立場ですので、
>> レベルが低い内容になっていると思いますが、ご容赦ください。
>> （さらに、私はずっとWebサイト専門で、電子書籍に関する情報は最近勉強し始めた初心者なので、検討する視点が違っているかもしれません。）
>>
>> 1.　Media Queriesを利用した縦書き・横書き判断
>>
>> 実際に制作する立場から見ると、この提案内容は分かりやすいと考えます。
>> CSSでもHTML上でも物理的な環境（デバイス、アプリ）を区別して制作する設定としては現状、Media Queriesの部分のみだと考えています。
>> 物理的な環境を複数箇所で指定しなくてはいけないということは、制作上のトラブルを起こしやすくなるので、1ヶ所にまとまっているほうが
>> 利用しやすいです。
>>
>> 拡張するとしたら、指定できるメディア特性を増やす方向になるのかと個人的には思ったのですが、
>> そうなっても利用する側に特に問題はないと考えます。
>> Media Queriesで現在指定できる特性がデバイス由来ばかりが見えていますが、media typeで指定するタイプ自体が
>> デバイスだけなく、一般的にはアプリといってもいいタイプ（例：音声リーダー向けにspeech）を含めているので、
>> 「閲覧環境に応じた設定をまとめて行なえる」とういスタンスで理解できます。
>>
>> ところで、この拡張がされた場合、縦・横共に対応可能なUAであった場合の対応はどうのような想定をされているのでしょうか。
>>
>> 2.　block-progressionのプロパティ名の混乱について
>>
>> 提示されたEditor's Draftのドキュメントを読むと、”より理解しやすいように”用語を検討している最中なだけで、混乱して使っているようには見えませんでした。（他の文書に反映されていないのは検討中だからではないでしょうか？）
>>
>> block-flowに変更しようとした経緯は他のところにあるのでしょうか。どちらが分かりやすいかを判断する前にその経緯が分かれば、
>> 検討しやすいですね。（他の単語もvsで列挙しているようですが）
>>
>> 個人的な感想を言うと、プロパティで設定できる内容の「方向」を強調するなら、block-progressionがいいと思います。
>> （文字数を考えると　block-directionがさらにいいです。文字の少なさはCSSファイルの軽量への貢献のため。）
>> なお、列挙された単語で構成した時に、block-orientationも候補にあるようですが、
>> 今ではiPhoneのorientation関係の指定と紛らわしい感があります。
>>
>> 3.　writing-modeに関する相対プロパティ、擬似クラス
>>
>> 3.1.　相対プロパティ
>>
>> 相対プロパティのところででた論理プロパティが標準にすべき、という点は利用する側としては戸惑います。
>> （他のマークアップ担当の方はどうなのでしょうか。色々お伺いしたいところです。）
>>
>> margin、padding、widht、heightについては、自分がマークアップしているドキュメントが視覚的にどのように見せるか、を平面上で表示領域を「上下左右」を基にして把握し、設定内容をはじき出しています。表示領域をどのようにデザインするかがポイントなので、内部に含まれる要素の表示の流れで「上下左右」をstart等々に読み替えるのは分かりにくいと感じています。
>>
>> 提案内容だと、height、widthにはlogical-　を付けられています。
>> marginやpaddingなども　logical-margin-topとかではまずいのでしょうか。
>>
>> 3.2.　擬似プロパティ
>>
>> あると便利かな、というところなのですが、利用シーンはどんなもの内容のドキュメントがあるのでしょうか。
>> 自分自身が、テキストの出力方向が混在するような対応に迫られて事がないので、少々イメージがしにくいです。
>> 分かりやすい事例があれば、教えていただければ幸いです。
>>
>>
>> よろしくお願いします。
>>
>>
>> 2010年4月8日22:34 MURAKAMI Shinyu <murakami@antenna.co.jp>:
>> > 村上です。
>> >
>> > W3C www-style MLに、CSS3縦書きの問題点と仕様改善の提案の投稿をしました。
>> >
>> > [css3-text-layout] writing-mode issues and requests
>> > http://lists.w3.org/Archives/Public/www-style/2010Apr/0278.html
>> >
>> > 以下、その内容です。
>> >
>> > 日本電子出版協会（JEPA）が電子書籍フォーマットEPUB日本語レイアウト
>> > 要求仕様を公開しました。
>> > http://www.jepa.or.jp/press_release/epub_jp_pressrelease.html
>> >
>> > Minimal Requirements on EPUB for Japanese Text Layout:
>> > http://www.jepa.or.jp/press_release/reqEPUBJ.html
>> >
>> > 次期EPUB仕様を策定するIDPFの作業部会で、その検討がはじまってます。
>> >
>> > EPUB 2.1 Working Group Charter - DRAFT 0.8 4/6/10:
>> > http://idpf.org/idpf_groups/IDPF-EPUB-WG-Charter-4-6-2010.html
>> >
>> > 日本語の電子書籍にとって縦書きは重要です。現在のEPUB仕様はCSS2を
>> > 採用してますが、次期バージョンでは CSS3 Text Layoutドラフト仕様で
>> > 定義されている writing-mode プロパティが使われることになりそうです。
>> > すでにEPUB対応ビューワーで縦書きが実装されているものがあります
>> > （writing-mode: tb-rl で縦書きが指定可能）：
>> >
>> > ACCESS NetFront Book Viewer EPUB Edition
>> > http://www.access-company.com/news/press/ACCESS/2009/20091221_1_epub.html
>> >
>> > eBook Technologies EPUB Technology
>> > http://www.ebooktechnologies.com/press_2009111101.htm
>> >
>> >
>> > writing-modeプロパティを定義しているCSS3 Text Layout仕様がとても重要
>> > になるのですが、この仕様はWorking Draftになる前の段階の Editor's Draft
>> > しかありません：
>> > http://dev.w3.org/csswg/css3-text-layout/
>> >
>> > そして、writing-modeプロパティを使う上で、深刻な問題があります。
>> > この問題について、前に投稿しました：
>> >
>> > Feature queries (was Proposal: writing-mode media feature)
>> > ==========================================================
>> > http://lists.w3.org/Archives/Public/www-style/2010Mar/thread.html#msg279
>> >
>> > （CSS仕様ではmargin-topは、縦書きであろうと絶対的に上（横書きだと
>> > ページの先頭側だけど、縦書きでは行の先頭側）のアキを指定することに
>> > なっているので、縦書きでblockquoteのインデントはmargin-topで指定する
>> > 必要があるが、それが横書きにのみ対応するUAで表示すると、インデントが
>> > なくなりその代わりにブロックの前が空くということになるなど、レイアウト
>> > が崩れてまともに読めないものになってしまう。縦書き用と横書き用の
>> > ２つのスタイルシートを用意する必要があり、縦書き非対応UAで横書き用
>> > スタイルシートが適用されるようにするしくみも必要。
>> > そこで、デバイスや媒体についての問合せをするためのMedia Queries仕様を
>> > 拡張して、UAがサポートしている機能の問合せもできるようにすることで、
>> > UAが縦書きをサポートするかどうかで別のスタイルシートを適用させることが
>> > できるようにしようという提案）
>> >
>> > この問題はEPUB日本語レイアウト要求仕様（2.5節）でも説明されています：
>> >
>> > | R5: It should be possible to provide stylesheets for both principal
>> > | text directions. This requirement does not necessarily mean that the
>> > | same stylesheet can be used for both directions.
>> > |
>> > | Unfortunately, the design of CSS makes it difficult to meet this
>> > | requirement. This is because "top", "bottom", "right", and "left" in
>> > | CSS2 are not relative to the principal text direction (see the section
>> > | Interaction with Other CSS Attributes in Using Vertical Layout in
>> > | Internet Explorer 5.5). A stylesheet intended for vertical writing
>> > | provides miserable results for horizontal writing.
>> > |
>> > | Note: An html page at
>> > | http://www.asahi-net.or.jp/%7Eeb2m-mrt/epub/tategakiTest.html looks
>> > | good if the browser supports vertical writing, but it looks miserable,
>> > | otherwise.
>> >
>> >
>> > この問題の解決のために機能問合せのしくみは必要。その上で、
>> > CSS3 Text Layout仕様と関係するほかの仕様も改善が必要です。
>> > いまの問題点と改善要求を以下にまとめます。
>> >
>> > block-progressionプロパティの名前が混乱してるのを正すこと
>> > =========================================================
>> > http://dev.w3.org/csswg/css3-text-layout/#block-progression
>> > （writing-modeプロパティはインライン進行方向を決めるdirectionプロパティ
>> > とブロック進行方向を決めるblock-progressionプロパティに分解される
>> > ショートハンドプロパティーということになっているのだけど、いまの
>> > Editor's Draftではblock-progressionプロパティの名前が "block-flow"
>> > に変わっている。仕様の別のところではblock-progressionの名前のままで、
>> > 混乱している）
>> >
>> > 私は "block-progression" の名前を支持します。W3Cの他の文書でもこの
>> > 名前が使われているし、MSIE（-ms-プレフィックス付き）でも
>> > Antenna House Formatterでもそれが実装されています。
>> >
>> >
>> > writing-mode相対プロパティ
>> > ==========================
>> > これまでもmargin-start, margin-end, margin-before, margin-afterなど
>> > writing-mode相対プロパティが提唱されてきました。
>> >
>> > MozillaとWebKitにはすでに *-start と *-end のプロパティが、
>> > Antena House Formatter には *-start/end/before/after のプロパティ
>> > があります（ベンダープレフィックス付き）。
>> > これらのwriting-mode相対（＝論理的）プロパティを標準にするべきです。
>> >
>> > 論理的プロパティと対応する物理的プロパティとの間で生じる
>> > カスケーディングの問題は解決可能です。
>> >
>> > Antenna Houseの実装では、論理的プロパティは対応する物理的プロパティの
>> > （条件付き）別名であるかのように扱ってます。MozillaとWebKitも同様のこと
>> > をしているようです。
>> >
>> > 主なwriting-modeでの論理的プロパティと物理的プロパティの対応は以下の
>> > とおりです。
>> >
>> > logical         physical (lr-tb)  physical (rl-tb)  physical (tb-rl)
>> > -------------   ----------------  ----------------  ----------------
>> > margin-start    margin-left       margin-right      margin-top
>> > margin-end      margin-right      margin-left       margin-bottom
>> > margin-before   margin-top        margin-top        margin-right
>> > margin-after    margin-bottom     margin-bottom     margin-left
>> >
>> > padding-start/end/before/afterとborder-start/end/before/after-*も同様。
>> >
>> > 論理的な幅と高さのためのプロパティ必要です。
>> >
>> > logical             physical (*-tb)  physical (tb-*)
>> > ------------------  ---------------  ----------------
>> > logical-width       width            height
>> > logical-height      height           width
>> > min-logical-width   min-width        min-height
>> > min-logical-height  min-height       min-width
>> > max-logical-width   max-width        max-height
>> > max-logical-height  max-height       max-width
>> >
>> > 例：
>> >
>> >  h1 {
>> >    border-before: 2px solid;
>> >    border-after:  2px solid;
>> >  }
>> >
>> >  blockquote {
>> >    margin-start: 2em;
>> >    margin-end:   2em;
>> >  }
>> >
>> > これらのスタイルは、横書きと縦書きの両方で共通に使うことができます。
>> >
>> > 論理的プロパティと物理的プロパティの両方が同時に同じ要素に指定された
>> > ときは、通常のカスケーディング規則が適用されるべきです。
>> > 指定された論理的プロパティは、対応する物理的プロパティが指定されたかの
>> > ように扱います。その処理の前に、writing-modeが決定されている必要が
>> > あります。
>> >
>> > 例：
>> >  div.test1 {
>> >    margin-top:    2cm;
>> >    margin-before: 5cm;   /* margin-right:5cm と同じ */
>> >    writing-mode:  tb-rl; /* これは縦書きです */
>> >  }
>> >
>> >  div.test2 {
>> >    writing-mode: tb-rl;
>> >    margin-top:   2cm;
>> >    margin-start: 5cm; /* margin-top:5cm と同じで上の指定を上書きします */
>> >  }
>> >
>> >  div.test3 {
>> >    writing-mode: tb-rl;
>> >    margin-start: 2cm; /* margin-top:2cm と同じで、上書きされることになります */
>> >    margin-top:   5cm;
>> >  }
>> >
>> >
>> > writing-mode相対プロパティ値
>> > ============================
>> >
>> > CSS3 Text仕様は、text-alignプロパティの値として "start" と "end" を定義
>> > しています：
>> > http://dev.w3.org/csswg/css3-text/#text-align
>> >
>> > | start
>> > |     The inline contents are aligned to the start edge of the line box.
>> > | end
>> > |     The inline contents are aligned to the end edge of the line box.
>> >
>> > これはすばらしいです。他のプロパティ、例えば clear と float も同様に
>> > これらの値が使えるべきです。
>> >
>> > CSS3 GCPM仕様のページフロートでは、"before" と "after" の値も必要です。
>> > http://dev.w3.org/csswg/css3-gcpm/#page-floats
>> >
>> > 例：
>> >  img.test1 {
>> >    float: top; /* 横書きではページ先頭へのフロート、
>> >                   縦書きでは行頭側へのフロート */
>> >  }
>> >
>> >  img.test2 {
>> >    float: start; /* 常に、行頭側へのフロート */
>> >  }
>> >
>> >
>> > :writing-mode() 擬似クラス
>> > ==========================
>> >
>> > writing-mode相対のプロパティと値は、違うwriting-modeが混在する
>> > 文書のスタイルシートを単純にするのに役立つでしょう。しかし、
>> > writing-modeごとに別のスタイルを指定したいこともあるので、
>> > これだけではまだ不十分です。
>> >
>> > writing-modeを表す擬似クラスが必要です。
>> > 次の構文を提案します。
>> >
>> >  :writing-mode(<writing-mode>)
>> >
>> >  <writing-mode>:  lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
>> >  (writing-modeプロパティの値と同じ)
>> >
>> > 例：
>> >  blockquote:writing-mode(tb-rl) {
>> >    margin: 2em 0 0 0; /* 日本語の縦書きでの引用ブロック,
>> >                          margin-top (= margin-start) : 2em */
>> >  }
>> >  blockquote:writing-mode(lr-tb) {
>> >    margin: 1em 3em;   /* 横書きでの引用ブロック */
>> >  }
>> >
>> > 複数のwriting-mode値、あるいはワイルドカードを指定できるとさらに
>> > 便利かもしれません。例：
>> >
>> >  span:writing-mode(rl-tb, bt-*) {
>> >    background-color: yellow; /* highlight RTL or BTT spans */
>> >  }
>> >
>> >
>> > この提案について議論されて改良がほどこされCSS3仕様に組み込まれることを
>> > 期待しています。
>> >
>> > 以上、W3C www-style MLへ投稿した内容です。
>> >
>> > 先日の私の「縦書きなど日本語組版に関係するCSS3仕様について話し合える場を」
>> > という提案に対して、当面はこのHTML5 IG JPでスタイルについても扱うという
>> > 回答を頂いています：
>> >
>> > Re: 縦書きなど日本語組版に関係するCSS3仕様について話し合える場を
>> > http://lists.w3.org/Archives/Public/public-html-ig-jp/2010Mar/0046.html
>> >
>> > このMLでCSS3縦書きの問題についてコメントももらえるとうれしいです。
>> > どうぞよろしくお願いします。（www-styleへの英語でのコメントももちらん
>> > 歓迎です）
>> >
>> > 昨日のJEPAのEPUB説明会で、ACCESSさんのEPUBビューワーの実装ですでに
>> > writing-modeプロパティがサポートされていることを知り、そのことに
>> > 触れさせてもらいました。もし関係者で読んでいる方がおられましたら、
>> > 私の書いたことで間違いの指摘やご意見をいただけるとうれしいです。
>> >
>> > --
>> > 村上 真雄 (MURAKAMI Shinyu)
>> > http://twitter.com/MurakamiShinyu
>> > Antenna House Formatter:
>> > http://www.antenna.co.jp/AHF/
>> > http://www.antennahouse.com
>> >
>> >
>> >
>>
>>
>>
>> --
>> -----------------------------------------------------
>> Miwako Ichijo(usa132006@gmail.com)
>
>
>
>



-- 
-----------------------------------------------------
Miwako Ichijo(usa132006@gmail.com)

Received on Thursday, 15 April 2010 05:50:33 UTC