Internet Explorer 10 の日本語組版

13,393 views

Published on

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

Published in: Technology

Internet Explorer 10 の日本語組版

  1. 1. Internet Explorer 10の日本語組版イースト株式会社 高瀬 拓史takase@est.co.jp2012/06/22
  2. 2. 今日お話すること• Internet Explorer 10を日本語テキスト処理の観点 からチェックしてみました。• 電子出版物フォーマットEPUB 3に含まれるCSSプ ロパティを主に対象としました。• 残念ながら網羅的なチェックではありません。• CSS Text/Writing Modesについてはいささか厳し い結果となっていますが、いずれもWDの段階にあ るモジュールです。仕様が安定すれば実装も進むの ではないでしょうか。• 組版の専門家ではないので、用語や用例に誤りがあ るかもしれません。
  3. 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. 4. Test Drive Site• IE 10の機能やWeb標準技術のサポート状態を沢山のデ モによって確認できるサイト。• 結構楽しいです^^• http://ie.microsoft.com/testdrive/
  5. 5. IE Testing Center• IE 10がサポートするWeb標準技術をテストケースとと もにチェックできる。 http://samples.msdn.microsoft.com/ietestcenter/• MSがW3Cに提出したテストケースを数多くパスしてい る。• 果たして日本語テキスト処理周りはどうなっているのか。
  6. 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. 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. 8. • ばっちり縦書• WebKit(Win 版)のように全 ての文字が90 度回転してし まうことはな い。
  9. 9. • 一つの文書の 中での縦書と 横書の混在も 問題なし。
  10. 10. 縦中横• W3C 最新WDが定義するのは text-combine-horizontal text-combine-mode• EPUB 3では少し古いWDを参照しており-epub- text-combineプロパティを使う。• まだまだ不安定なプロパティ• IEでは過去にこのプロパティの実装はない。 IE10ではどうなっているのか?
  11. 11. • 未実装でした。• あと、何故かspanで 囲んだだけでも文字が 行の中心からずれてし まう。
  12. 12. • 代替方法を試す。• 右から 1. 縦中横を-ms-writing-modeの横 書(lr-tb)で実現してみた 2. 1の行全体にtext- decoration:underlineを指定す ると、当然横書部分は下線になっ てしまう。 3. 1の行全体にborder-rightを指定 した。 こちらはまだ自然に感じられるが、 文字がはみ出した箇所で線が途切 れて見える。
  13. 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. 14. 縦書した文字の向き• 縦書の文字の向きは一様ではない。• どの文字をどんな向きで表示するのかを指定するのが text-orientationプロパティ。• Unicodeでも縦書の文字の向きを標準化するUTR#50 http://unicode.org/reports/tr50/ が進行中であり、CSSからも 参照する。
  15. 15. • IE10での実装はまださ れていない模様。• とはいえ、MS社は UTR#50に提案も行 なっているので、対応 は視野に入れているは ず。 http://unicode.org/foru m/viewtopic.php?f=35& t=277 期待される表示
  16. 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. 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. 18. • IE 10でも当然表示できます。• まずは横書。• 縦書にすると...
  19. 19. • ルビ付きの文字だけ 行の中心から左にず れてしまう。
  20. 20. • rubyに position:relative; bottom:0.25em; (leftではなく!) を指定するとおよそ中心 にくる。• でもこれでは逆に他のブ ラウザでの表示がずれる。• なぜ移動方向が top→右 bottom →左 left →上 right →下 になるのか疑問。
  21. 21. • 右: text-decoration:underlineに よる傍線。• ルビ文字にtext-decorationが 継承されるのはおかしい。 (WebKitでは継承しない。)• 左: border-rightによる傍線。• どちらも傍線を引いた箇所が 行の中心から若干左にずれる。
  22. 22. ルビのスタイリング• 上付き、中付き、下付きなど。• IEはルビのスタイリングに関するプロパ ティが豊富(主にIE5から実装)。 – ruby-align ルビの配置方法 – ruby-overhang 隣接する文字との重なり – ruby-position ルビの表示位置• ※EPUB3仕様には(-epub-)ruby-position のみが含まれている。
  23. 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
  24. 24. • ※ruby-overhangは隣接領域との重なりを確認できなかった。 何がいけなかったのだろう...
  25. 25. 圏点• 圏点の位置、形状、色合いを指定するプ ロパティがある。 text-emphasis-style text-emphasis-color text-empahsis-position• IEでは過去にこのプロパティの実装はな い。IE10ではどうなっているのか?
  26. 26. • text-emphasis-*には対 応していなかった。 (黄色いハイライトの箇 所に圏点のプロパティが 指定されている。)
  27. 27. • 代替方法を試す。• ルビのマークアップを 使って圏点を表示してみ た。• 体裁上は違和感ない。• ※例によって左にずれる ので position: relative bottom:0.4em で位置補正している。
  28. 28. 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
  29. 29. 行頭行末揃え• 行の開始と終了位置を均等に合わせるの が text-align:justify。• さらにCSS3では、詳細な挙動をtext- justifyによって指定できる。• IE5が既にtext-justifyを実装していた。• IE 10でも使ってみましょう→
  30. 30. • まずはtext-align: justifyの表示から。• 行末がぴったり揃う。• さらにtext-justifyで詳細な挙動を指定できる。
  31. 31. • text-justify の利用例を4つ。 auto:実装任せ。 distribute:単語間と字間で調整。日本語向け。 inter-ideograph:漢字等の字間で調整。日本語向け。 inter-word:単語間で調整。
  32. 32. 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独自
  33. 33. 均等割付 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も実装。
  34. 34. • text-align-last:justifyで均等割付が実現できる。• 紙の本みたいでカッコイイ。
  35. 35. 禁則処理 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でも使ってみましょう→
  36. 36. • line-breakの値。他にauto:実装任せとloose:最低限の禁則がある。• normal:一般的な禁則。 小書きの仮名、音引きの手前で改行可能。「~」の手前での改行も 推奨されているが、IEでは禁則対象となっている。• strict:厳格な禁則。小書きの仮名、音引きの手前で改行禁止。 「 ‐ 」「 – 」「 ゠ 」の手前も禁則対象とするのが推奨されている が、IEでは改行できている。• 禁則はUAの裁量が大きいので間違いとは言えない。• 日本語禁則ルールを使い分けられるモダンブラウザは現状IEだけ!
  37. 37. 和欧文混植の改行処理 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でも使ってみましょう→
  38. 38. • word-breakの値。• normal:実装任せ。• break-all: 行末でとにかく改行。CJK向け。• keep-all: 空白など明示的な改行機会でのみ改行。
  39. 39. • keep-allの面白い使い方。• 改行したい言葉の切れ目にゼロ幅スペースU+200Bを仕込んでおく とその箇所で改行する。 <p>住みにくさが​高じると、​安い​所へ ​引き越し​たくなる。...</p>
  40. 40. 傍線の表示位置 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での表示も見てみましょう→
  41. 41. • autoでは、lang=“ja”(日本語)かつ縦 書きの時にはunderlineが右側に表示さ れると解説されているが、テストサイ トを表示しても左側にしか表示されな い。 http://samples.msdn.microsoft.com /workshop/samples/author/dhtml/r efs/textUnderlinePositionAuto.htm• aboveでは正常に右側に表示されまし た。でもそっちは text- decoration:overlineを使えば済む話。
  42. 42. フォント• IE10がサポートするWebFontにより、独自形式のeotだ けでなくOpenType、TrueType、WOFFもEmbedでき るようになった。• IVS対応。複雑な異体字を表現できる。• ただ根本的な要望として、フォントのアウトラインを もっと滑らかに描画して欲しい。 本資料のスクリーンショットは会場で見えやすいように font-size:2em で表示したものを使用しているため余り 目立たないが、本来のサイズだとアウトラインのギザギ ザが気になる。
  43. 43. • WebFont(OpenType,WOFF)、IVS対応の確認できるサイト しろもじ作業室 http://shiromoji.net/font/HanaMinOT/webfonttest/• 埋め込まれた様々な異体字を表現できていることを確認。
  44. 44. • font-family: serif;を指定した場合に表示されるBatangフォントは 余り美しくないのが残念。せめてlang=“ja”ならMS明朝に。• 欲を言えばもっと高品質なフォントの搭載を希望します。
  45. 45. CSS Grid Layoutは電子書籍で是非使いたい!• Test Driveサイトに掲載されているデモの一例• The Grid System http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default .html• 新聞紙面のようなレイアウトも簡単にできる。• EPUB 3 CSS Profile には含まれていない。
  46. 46. 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• この対応表は正確なものかちょっと怪しいです。
  47. 47. まとめ• 日本語テキスト表示環境としてのIE 10は行揃えや禁則 等、行処理の分野では極めて豊富なプロパティを実装し ており、他のモダンブラウザの追随を許さない。 これはIE 5~5.5の時代の取り組みが、大きな財産とし て役立っているためと思われる。• 一方、2010年以降に提案された圏点や縦中横等の新し いプロパティについてはあまり実装が行われていないた め、安定したものから取り入れて欲しい。• タイポグラフィーはUI/UXの重要な要素。美しいMetro UIを備えたWindows 8が、美しい日本語を表現できる 場であるよう期待しています!
  48. 48. ご清聴ありがとうございました。

×