- From: MURAKAMI Shinyu <murakami@antenna.co.jp>
- Date: Thu, 08 Apr 2010 22:34:32 +0900
- To: public-html-ig-jp@w3.org
村上です。
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
Received on Thursday, 8 April 2010 13:35:07 UTC