Internet Explorer 10
の日本語組版
イースト株式会社 高瀬 拓史 takase@est.co.jp
2012/06/22
今日お話するこ
• Internet Explorer 10 日本語 処理
観点 ッ
• 電子出版物 ォー ッ EPUB 3 含 CSS
主 対象
• 残念 網羅的 ッ あ
• 組版 専門家 い 用語や用例 誤
あ
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
– ン ー 前 状態 戻 カ 必要
注意
Test Drive Site
• IE 10 機能やWeb標準技術 ー 状態 沢山
モ 確認
• 結構楽 い ＾＾
• http://ie.microsoft.com/testdrive/
IE Testing Center
• IE 10 ー Web標準技術 ー
ッ
http://samples.msdn.microsoft.com/ietestcenter/
• MS W3C 提出 ー 数多 い
• 果 日本語 処理周 う い
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
ー 作 時期尚早 感 あ ...
▶個別 作 確認 ...
縦書
CSS3Writing Modes
20120301WD
EPUB3CSSProf : 20110428WD
IE 10 WebKit
プロパティ writing-mode -epub-writing- mode
-ms-writing- mode
-webkit-
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 値 変更
• 縦書
• WebKit(Win 版) う 全
文字 90 度回転う
い
• 一 文書
中 縦書
横書 混在 問題
縦中横
• W3C 最新WD 定義
text-combine-horizontal
text-combine-mode
• EPUB 3 少 古いWD 参照 -epub-
text-combine 使う
• 不安定
• IE 過去 実装 い
IE10 う い ？
• 未実装
• あ 何故 span
囲 文字
行 中心 う
• 代替方法 試
• 右
1. 縦中横 -ms-writing-mode 横 書(lr-tb) 実現
2. 1 行全体 text-
decoration:underline 指定 当然横書部分 下線 う
3. 1 行全体 border-right 指定 文字 出自然 感箇所 線 途切
見え
CSS3Writing Modes
20120301WD
EPUB3CSSProf : 20110428WD
IE 10 WebKit
プロパティ text-combine- horizontal
-epub-text-combine -webkit-text-
combine
値 none none none
all
numeric digits alpha latin
alphanumeric
horizontal horizontal
プロパティ text-combine-mode
値 auto
compress no-compress use-glyphs
縦書した文字 向き
• 縦書 文字 向 一様 い
• 文字 向 表示 指定
text-orientation
• Unicode 縦書 文字 向 標準化 UTR#50
http://unicode.org/reports/tr50/ 進行中 あ CSS 参照
• IE10 実装
い い模様
• いえ MS社 UTR#50 提案 行
い 対応
視野 入 い
http://unicode.org/foru m/viewtopic.php?f=35& t=277
期待さ 表示
CSS3 Writing Modes 20120301WD
EPUB3CSSProf : 20110428WD
IE 10 WebKit
プロパティ 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版 使え い
ビ
• HTML5 標準
• 実 IE5 い 早 実装済
• Ruby Annotation 含 い rb rbc rtc要素
HTML5 引 継 い い 今回 ッ 対
象外
HTML5
20120329 WD
EPUB3
: 日付指定なし
IE 10 WebKit
要素 ruby ruby ruby ruby
rt rt rt rt
rp rp (非推奨) rp rp
• IE 10 当然表示
• 横書
• 縦書 ...
• ビ付 文字
行 中心 左
う
• ruby
position:relative; bottom:0.25em; (left ！)
指定 中心
• 逆 他
表示
• 移動方向 top→右
bottom →左 left →上
right →下
疑問
• 右：
text-decoration:underline 傍線
• ビ文字 text-decoration
継承 い
WebKit 継承 い
• 左：
border-right 傍線
• 傍線 引い 箇所
行 中心 若干左
ビ スタイ ング
• 上付 中付 下付
• IE ビ ン 関
豊富 主 IE5 実装
– ruby-align ビ 配置方法
– ruby-overhang 隣接 文字 重
– ruby-position ビ 表示位置
• ※どPUて3仕様 (-epub-)ruby-position
含 い
CSS3 Ruby 20110630 WD
EPUB3CSSProf : 日付指定なし
IE 10 WebKit
プロパティ 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
• ※ィウby-overhang 隣接領域 重 確認
何 い う...
圏点
• 圏点 位置 形状 色合い 指定
あ
text-emphasis-style
text-emphasis-color
text-empahsis-position
• IE 過去 実装
い IE10 う い ？
• text-emphasis-* 対
応 い
黄色い 箇
所 圏点 指定 い
• 代替方法 試
• ビ ー ッ
使 圏点 表示
• 体裁上 違和感 い
• ※例 左
position: relative
bottom:0.4em
位置補正 い
CSS3 Text 20120119 WD
EPUB3CSSProf : 20110412WD
IE 10 WebKit
プロパティ 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
行頭行末揃え
• 行 開始 終了位置 均等 合わ
text-align:justify
• CSS3 詳細 挙動 text-
justify 指定
• IE5 既 text-justify 実装 い
• IE 10 使 う→
• text-align: justify 表示
• 行末 ぴ 揃う
• text-justify 詳細 挙動 指定
• text-justify 利用例 4 auto:実装任
distribute:単語間 字間 調整 日本語向
inter-ideograph:漢字等 字間 調整 日本語向 inter-word:単語間 調整
CSS3 Text
20120119 WD
EPUB3CSSProf IE 10 WebKit
プロパティ 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独自
均等割付
• 単独 行 文字 均等割付 text-align-last 使え
• 単独行 最終行 揃え 指定
• IE5.5 実装 最近FireFox 実装
CSS3 Text
20120119 WD
EPUB3CSSProf : 20110412WD
IE 10 WebKit
プロパティ 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:justify 均等割付 実現
• 紙 本 い カッコ
禁則処理
• 厳格 禁則 緩い禁則 禁則 い い あ
• 禁則 ー line-break 指定
• IE5 実装 行わ
• IE10 使 う→
CSS3 Text 20120119 WD
EPUB3CSSProf : 20110412WD
IE 10 WebKit
プロパティ 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 値 他 auto:実装任 loose:最低限 禁則 あ
• normal:一般的 禁則
小書 仮名 音引 手前 改行可能 ～ 手前 改行
推奨 い IE 禁則対象 い
• strict:厳格 禁則 小書 仮名 音引 手前 改行禁止
け – ゠ 手前 禁則対象 推奨 い
IE 改行 い
• 禁則 UA 裁量 大 い 間違い 言え い
• 日本語禁則 ー 使い分 モ ン 現状IE ！
和欧文混植 改行処理
• 和文 含 欧文 途中 改行 必要 迫
う ？ 欧文 含 和文 中 ？
• word-break 挙動 指定
• IE5 実装 行わ
• IE10 使 う→
CSS3 Text
20120119 WD
EPUB3CSSProf : 20110412WD
IE 10 WebKit
プロパティ word-break -epub-word-break -ms-word- break
word-break
値 normal auto normal normal
break-all break-all break-all break-all
keep-all keep-all keep-all
break-word
• word-break 値
• normal:実装任
• break-all: 行末 改行 CJK向
• keep-all: 空白 明示的 改行機会 改行
• keep-all 面白い使い方
• 改行 い言葉 切 目 ゼ 幅 ペー U+200B 仕込 箇所 改行
<p>住 ​高 ​安い​所へ
​引 越 ​ ...</p>
傍線 表示位置
• 日本語 横書 下 縦書 右 傍線 引 一般的
• text-decoration:underline 表示位置 指定 text-underline- position いう あ
• IE5.5 実装 い IE10 表示 見 う→
CSS3 Text 20120119 WD
EPUB3CSSProf IE 10 WebKit
プロパティ text-underline- position
-ms-text-underline- position
値 auto auto
alphabetic below left below right
above below auto-pos
• auto lang ち“ja” 日本語 縦
書 時 underline 右側 表示
解説 い
表示 左側 表示
い
http://samples.msdn.microsoft.com
/workshop/samples/author/dhtml/r
efs/textUnderlinePositionAuto.htm
• above 正常 右側 表示
text-
decoration:overline 使え 済 話
フォント
• IE10 ー WebFont 独自形式 eot OpenType TrueType WOFF Embed
う
• IVS対応 複雑 異体字 表現
• 根本的 要望 ォン ン
滑 描画 欲 い
本資料 ーン ョッ 会場 見えや い う
font-size:2em 表示 使用 い 余
目立 い 本来 ン
気
• WebFont(OpenType,WOFF) IVS対応 確認 作業室
http://shiromoji.net/font/HanaMinOT/webfonttest/
• 埋 込 様々 異体字 表現 い 確認
• font-family: serif; 指定 場合 表示 Batang ォン 余 美 い 残念 langち“ja” MS明朝
• 欲 言え 高品質 ォン 搭載 希望
CSS Grid Layout
電子書籍 是非使いたい！
• Test Drive 掲載 い モ 一例
• The Grid System
http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default .html
• 新聞紙面 う 簡単
• EPUB 3 CSS Profile 含 い い
CSS3 Gird Layout 20120322 WD
EPUB3CSSProf IE 10 WebKit
プロパティ 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
• 対応表 正確 怪 い
ま め
• 日本語 表示環境 IE 10 行揃えや禁則
等 行処理 分野 極 豊富 実装
他 モ ン 追随 許 い
IE 5~5.5 時代 取 組 大 財産
役立 い 思わ
• 一方 2010年以降 提案 圏点や縦中横等 新
い い あ 実装 行わ い い
安定 取 入 欲 い
• ー UI/UX 重要 要素 美 いMetro UI 備え Windows 8 美 い日本語 表現
場 あ う期待 い ！
