JEPA Pf第10回 Windows 8、Azure、メトロUI 発表資料

1. Internet Explorer 10
の日本語組版
イースト株式会社 高瀬 拓史
takase@est.co.jp
2012/06/22

2. 今日お話すること
• Internet Explorer 10を日本語テキスト処理の観点
からチェックしてみました。
• 電子出版物フォーマットEPUB 3に含まれるCSSプ
ロパティを主に対象としました。
• 残念ながら網羅的なチェックではありません。
• CSS Text/Writing Modesについてはいささか厳し
い結果となっていますが、いずれもWDの段階にあ
るモジュールです。仕様が安定すれば実装も進むの
ではないでしょうか。
• 組版の専門家ではないので、用語や用例に誤りがあ
るかもしれません。

3. Internet Explorer 10
• 2011/4/12発表以降リリースを重ねる。
• 最新は2012/5/31公開のRelease Preview
• 対応環境は？
– Windows 8
– Windows RT
– Windows Server 2012
– (Windows 7、Windows Server 2008 R2 予定)
• 今すぐ体験するには？
– Windows 8 Release Previewをインストールすれば使え
る。
http://windows.microsoft.com/ja-JP/windows-
8/download?ocid=W_MSC_W8P_DevCenter_IE_ja-jp
– インストール前の状態に戻すには、リカバリが必要なので
注意。

4. Test Drive Site
• IE 10の機能やWeb標準技術のサポート状態を沢山のデ
モによって確認できるサイト。
• 結構楽しいです＾＾
• http://ie.microsoft.com/testdrive/

5. IE Testing Center
• IE 10がサポートするWeb標準技術をテストケースとと
もにチェックできる。
http://samples.msdn.microsoft.com/ietestcenter/
• MSがW3Cに提出したテストケースを数多くパスしてい
る。
• 果たして日本語テキスト処理周りはどうなっているのか。

6. EPUB 3で使うCSSのサポートは？
• EPUB 3で取り入れられた日本語テキストに関する
CSSのモジュールの代表格。
– CSS Text Level 3 （行処理、圏点...etc.）
– CSS Writing Modes Module Level 3（縦書、縦中横...etc.）
▼
IE Testing Centerのテストケースには
text-shadow(CSS Text Level3)しか入っていませんで
した。
• どちらのモジュールもまだ不安定なWDなので、テスト
ケース作るには時期尚早の感はあるよね...
▶個別にテストファイルを作って確認することに...

7. 縦書
CSS3Writing EPUB3CSSProf IE 10 WebKit
Modes : 20110428WD
20120301WD
プロパティ writing-mode -epub-writing- -ms-writing- -webkit-
mode mode writing-mode
値 horizontal-tb lr-tb
vertical-rl vertical-rl tb-rl vertical-rl
vertical-lr vertical-lr tb-lr vertical-lr
• IE 5.5で既にwriting-modeは実装済み。
• 日本語縦書きにはvertical-rlを指定するが、IE
ではtb-rlを指定する。
• CSSでは2010年にtb-rl→vertical-rlに値が変更
された。

8. • ばっちり縦書
• WebKit(Win
版)のように全
ての文字が90
度回転してし
まうことはな
い。

9. • 一つの文書の
中での縦書と
横書の混在も
問題なし。

10. 縦中横
• W3C 最新WDが定義するのは
text-combine-horizontal
text-combine-mode
• EPUB 3では少し古いWDを参照しており-epub-
text-combineプロパティを使う。
• まだまだ不安定なプロパティ
• IEでは過去にこのプロパティの実装はない。
IE10ではどうなっているのか？

11. • 未実装でした。
• あと、何故かspanで
囲んだだけでも文字が
行の中心からずれてし
まう。

12. • 代替方法を試す。
• 右から
1. 縦中横を-ms-writing-modeの横
書(lr-tb)で実現してみた
2. 1の行全体にtext-
decoration:underlineを指定す
ると、当然横書部分は下線になっ
てしまう。
3. 1の行全体にborder-rightを指定
した。
こちらはまだ自然に感じられるが、
文字がはみ出した箇所で線が途切
れて見える。

13. CSS3Writing EPUB3CSSProf IE 10 WebKit
Modes : 20110428WD
20120301WD
プロパティ text-combine- -epub-text-combine -webkit-text-
horizontal combine
値 none none none
all
numeric
digits
alpha
latin
alphanumeric
horizontal horizontal
プロパティ text-combine-mode
値 auto
compress
no-compress
use-glyphs

14. 縦書した文字の向き
• 縦書の文字の向きは一様ではない。
• どの文字をどんな向きで表示するのかを指定するのが
text-orientationプロパティ。
• Unicodeでも縦書の文字の向きを標準化するUTR#50
http://unicode.org/reports/tr50/ が進行中であり、CSSからも
参照する。

15. • IE10での実装はまださ
れていない模様。
• とはいえ、MS社は
UTR#50に提案も行
なっているので、対応
は視野に入れているは
ず。
http://unicode.org/foru
m/viewtopic.php?f=35&
t=277
期待される表示

16. CSS3 Writing Modes EPUB3CSSProf IE 10 WebKit
20120301WD : 20110428WD
プロパティ text-orientaion -epub-text-orientation -webkit-text-
orientation
値 mixed-right vertical-right vertical-right
upright upright upright
sideways-right rotate-right
sideways-left rotate-left
sideways rotate-normal
use-glyph-orientation auto
• ちなみにWebKitはvertical-rightとuprightをサポート。だだし
Windows版では使えない。

17. ルビ
HTML5 EPUB3 IE 10 WebKit
20120329 WD : 日付指定なし
要素 ruby ruby ruby ruby
rt rt rt rt
rp rp (非推奨) rp rp
• HTML5で標準のタグとなった。
• 実はIE5でいち早く実装済み。
• Ruby Annotationに含まれていたrb、rbc、rtc要素は
HTML5には引き継がれていないので今回はチェック対
象外。

18. • IE 10でも当然表示できます。
• まずは横書。
• 縦書にすると...

19. • ルビ付きの文字だけ
行の中心から左にず
れてしまう。

20. • rubyに
position:relative;
bottom:0.25em;
(leftではなく！)
を指定するとおよそ中心
にくる。
• でもこれでは逆に他のブ
ラウザでの表示がずれる。
• なぜ移動方向が
top→右
bottom →左
left →上
right →下
になるのか疑問。

21. • 右：
text-decoration:underlineに
よる傍線。
• ルビ文字にtext-decorationが
継承されるのはおかしい。
（WebKitでは継承しない。）
• 左：
border-rightによる傍線。
• どちらも傍線を引いた箇所が
行の中心から若干左にずれる。

22. ルビのスタイリング
• 上付き、中付き、下付きなど。
• IEはルビのスタイリングに関するプロパ
ティが豊富（主にIE5から実装）。
– ruby-align ルビの配置方法
– ruby-overhang 隣接する文字との重なり
– ruby-position ルビの表示位置
• ※EPUB3仕様には(-epub-)ruby-position
のみが含まれている。

23. CSS3 Ruby EPUB3CSSProf IE 10 WebKit
20110630 WD : 日付指定なし
プロパティ ruby-position -epub-text-justify ruby-position
値 before over above
after under
inter-character inter-character
inline inline
プロパティ ruby-align ruby-align
値 auto auto
start
left left
center center
end
right right
distribute-letter distribute-letter
distribute-space distribute-space
line-edge line-edge
プロパティ ruby-overhang ruby-overhang
値 auto auto
start
end
none none
whitespace

25. • ※ruby-overhangは隣接領域との重なりを確認できなかった。
何がいけなかったのだろう...

26. 圏点
• 圏点の位置、形状、色合いを指定するプ
ロパティがある。
text-emphasis-style
text-emphasis-color
text-empahsis-position
• IEでは過去にこのプロパティの実装はな
い。IE10ではどうなっているのか？

27. • text-emphasis-*には対
応していなかった。
（黄色いハイライトの箇
所に圏点のプロパティが
指定されている。）

28. • 代替方法を試す。
• ルビのマークアップを
使って圏点を表示してみ
た。
• 体裁上は違和感ない。
• ※例によって左にずれる
ので
position: relative
bottom:0.4em
で位置補正している。

29. CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD : 20110412WD
プロパティ text-emphasis-style -epub-text-emphasis-style -webkit-text-emphasis-style
値 none none none
filled filled filled
open open open
dot dot dot
circle circle circle
double-circle double-circle double-circle
triangle triangle triangle
sesame sesame sesame
<string> <string> <string>
プロパティ text-emphasis-color -epub-text-emphasis-color -webkit-text-emphasis-color
値 <color> <color> <color>
プロパティ text-emphasis-position
値 above
below
right
left
プロパティ text-emphasis -epub-text-emphasis -webkit-text-emphasis

30. 行頭行末揃え
• 行の開始と終了位置を均等に合わせるの
が text-align:justify。
• さらにCSS3では、詳細な挙動をtext-
justifyによって指定できる。
• IE5が既にtext-justifyを実装していた。
• IE 10でも使ってみましょう→

31. • まずはtext-align: justifyの表示から。
• 行末がぴったり揃う。
• さらにtext-justifyで詳細な挙動を指定できる。

32. • text-justify の利用例を4つ。
auto:実装任せ。
distribute:単語間と字間で調整。日本語向け。
inter-ideograph:漢字等の字間で調整。日本語向け。
inter-word:単語間で調整。

33. CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD
プロパティ text-justify -ms-text-justify
値 auto auto
none none
inter-word inter-word
inter-ideograph inter-ideograph
inter-cluster inter-cluster
distribute distribute
kashida kashida
distribute-all-
lines
newspaper
• inter-cluster:タイ語。kashidaはアラビア語向け。
• distribute-all-lines、newspaperはMS独自

34. 均等割付
CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD : 20110412WD
プロパティ text-align-last -epub-text-align-last -ms-text-align-last
値 auto auto auto
start start
end end
left left left
right right right
center center center
justify justify justify
inherit
• 単独の行の文字を均等割付するにはtext-align-lastが使える。
• 単独行または、最終行の揃えを指定するプロパティ。
• IE5.5で実装された。最近FireFoxも実装。

35. • text-align-last:justifyで均等割付が実現できる。
• 紙の本みたいでカッコイイ。

36. 禁則処理
CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD : 20110412WD
プロパティ line-break -epub-line-break line-break -webkit-line-break
値 auto auto
loose loose
normal normal normal normal
strict strict strict
after-white-space
• 厳格な禁則、緩い禁則。禁則にもいろいろある。
• 禁則ルールはline-breakプロパティで指定する。
• IE5で実装が行われた。
• IE10でも使ってみましょう→

37. • line-breakの値。他にauto:実装任せとloose:最低限の禁則がある。
• normal:一般的な禁則。
小書きの仮名、音引きの手前で改行可能。「～」の手前での改行も
推奨されているが、IEでは禁則対象となっている。
• strict:厳格な禁則。小書きの仮名、音引きの手前で改行禁止。
「 ‐ 」「 – 」「 ゠ 」の手前も禁則対象とするのが推奨されている
が、IEでは改行できている。
• 禁則はUAの裁量が大きいので間違いとは言えない。
• 日本語禁則ルールを使い分けられるモダンブラウザは現状IEだけ！

38. 和欧文混植の改行処理
CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD : 20110412WD
プロパティ word-break -epub-word-break -ms-word- word-break
break
値 normal auto normal normal
break-all break-all break-all break-all
keep-all keep-all keep-all
break-word
• 和文に含まれる欧文の途中で改行の必要に迫らせたらど
うする？ 欧文に含まれる和文の中では？
• word-breakプロパティで挙動を指定できる。
• IE5で実装が行われた。
• IE10でも使ってみましょう→

39. • word-breakの値。
• normal:実装任せ。
• break-all: 行末でとにかく改行。CJK向け。
• keep-all: 空白など明示的な改行機会でのみ改行。

40. • keep-allの面白い使い方。
• 改行したい言葉の切れ目にゼロ幅スペースU+200Bを仕込んでおく
とその箇所で改行する。
<p>住みにくさが&#8203;高じると、&#8203;安い&#8203;所へ
&#8203;引き越し&#8203;たくなる。...</p>

41. 傍線の表示位置
CSS3 Text EPUB3CSSProf IE 10 WebKit
20120119 WD
プロパティ text-underline- -ms-text-underline-
position position
値 auto auto
alphabetic
below left
below right
above
below
auto-pos
• 日本語では横書きでは下、縦書きでは右に傍線を引くのが一般的。
• text-decoration:underlineの表示位置を指定するtext-underline-
positionというプロパティがある。
• IE5.5で実装されたらしいので、IE10での表示も見てみましょう→

42. • autoでは、lang=“ja”（日本語）かつ縦
書きの時にはunderlineが右側に表示さ
れると解説されているが、テストサイ
トを表示しても左側にしか表示されな
い。
http://samples.msdn.microsoft.com
/workshop/samples/author/dhtml/r
efs/textUnderlinePositionAuto.htm
• aboveでは正常に右側に表示されまし
た。でもそっちは text-
decoration:overlineを使えば済む話。

43. フォント
• IE10がサポートするWebFontにより、独自形式のeotだ
けでなくOpenType、TrueType、WOFFもEmbedでき
るようになった。
• IVS対応。複雑な異体字を表現できる。
• ただ根本的な要望として、フォントのアウトラインを
もっと滑らかに描画して欲しい。
本資料のスクリーンショットは会場で見えやすいように
font-size:2em で表示したものを使用しているため余り
目立たないが、本来のサイズだとアウトラインのギザギ
ザが気になる。

44. • WebFont(OpenType,WOFF)、IVS対応の確認できるサイト
しろもじ作業室
http://shiromoji.net/font/HanaMinOT/webfonttest/
• 埋め込まれた様々な異体字を表現できていることを確認。

45. • font-family: serif;を指定した場合に表示されるBatangフォントは
余り美しくないのが残念。せめてlang=“ja”ならMS明朝に。
• 欲を言えばもっと高品質なフォントの搭載を希望します。

46. CSS Grid Layoutは
電子書籍で是非使いたい！
• Test Driveサイトに掲載されているデモの一例
• The Grid System
http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default
.html
• 新聞紙面のようなレイアウトも簡単にできる。
• EPUB 3 CSS Profile には含まれていない。

47. CSS3 Gird Layout EPUB3CSSProf IE 10 WebKit
20120322 WD
プロパティ display display display
値 grid -ms-grid -webkit-grid?
inline-grid -ms-inline-grid -webkit-inline-grid?
プロパティ grid-columns -ms-grid-columns -webkit-grid-columns?
プロパティ -ms-grid-column -ms-grid-column -webkit-grid-colums?
プロパティ grid-rows -ms-grid-rows -webkit-grid-rows?
プロパティ grid-row -ms-grid-row -webkit-grid-row?
プロパティ grid-template
プロパティ grid-cell
プロパティ grid-column-span -ms-grid-column-span
プロパティ grid-row-span -ms-grid-row-span
プロパティ grid-column-sizing
プロパティ grid-row-sizing
プロパティ grid-flow
プロパティ grid-column-align -ms-grid-column-align
プロパティ grid-row-align -ms-grid-row-align
• この対応表は正確なものかちょっと怪しいです。

48. まとめ
• 日本語テキスト表示環境としてのIE 10は行揃えや禁則
等、行処理の分野では極めて豊富なプロパティを実装し
ており、他のモダンブラウザの追随を許さない。
これはIE 5~5.5の時代の取り組みが、大きな財産とし
て役立っているためと思われる。
• 一方、2010年以降に提案された圏点や縦中横等の新し
いプロパティについてはあまり実装が行われていないた
め、安定したものから取り入れて欲しい。
• タイポグラフィーはUI/UXの重要な要素。美しいMetro
UIを備えたWindows 8が、美しい日本語を表現できる
場であるよう期待しています！

49. ご清聴ありがとうございました。