Microsoft PowerPoint - 電流協報告会-公開 pptx

Transcription

1 2013/3/25 EPUB3.0 ビューア 調 査 報 告 電 流 協 EPUB 研 究 部 会 ワーキンググループ 発 表 者 豊 国 印 刷 加 藤 凸 版 印 刷 遠 藤 大 日 本 印 刷 苣 木 1

2 背 景 : 日 本 でのEPUB3.0の 制 作 需 要 の 急 増 2011 年 10 月 IDPF EPUB 3.0 Final Specification 公 開 2012 年 3 月 ソニーリーダーEPUB3.0 Fix 型 対 応 2012 年 7 月 楽 天 が kobo Touch を 発 売 2012 年 9 月 Google Playブックス 開 始 2012 年 9 月 電 書 協 EPUB 3 制 作 ガイド 公 開 2012 年 10 月 緊 デジ EPUB3.0テンプレート 公 開 2012 年 11 月 Amazon 日 本 向 け Kindle 発 売 2013 年 3 月 Apple 日 本 向 け ibookstore を 開 始 EPUB3.0の 採 用 が 急 増 し 大 量 制 作 の 必 要 性 が 生 じる 2

3 現 状 : 制 作 会 社 単 位 でコンテンツ 制 作 調 査 A 社 調 査 データ& 端 末 B 社 調 査 データ& 端 末 C 社 調 査 データ& 端 末 D 社 調 査 データ& 端 末 各 社 それぞれで 複 数 の 端 末 やアプリの 表 示 表 現 を 調 査 し 制 作 結 果 と 照 らし 合 わせている 3

4 理 想 : 業 界 単 位 での 調 査 と 結 果 の 共 有 A 社 電 流 協 共 有 の 調 査 結 果 B 社 C 社 テスト 端 末 D 社 各 社 が 個 々に 調 査 するのではなく 共 通 の 調 査 結 果 を 共 有 することで 制 作 の 効 率 化 を 図 りたい 4

5 今 回 調 査 対 象 とした 表 示 表 現 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 制 作 側 の 視 点 から 表 現 と 制 作 効 率 のバランスを 見 つ つ 調 査 項 目 を 検 討 5

6 今 回 調 査 対 象 としたビューア ビューア 企 業 団 体 サービス 1 Readium IDPF 2 Kindle Paperwhite Amazon Kindleストア 3 Kobo Touch 楽 天 フ ックス Koboイーフ ックストア 4 ibooks(@ipad) Apple ibookstore 5 Sony Reader ( 調 査 中 ) SONY Reader Store 6

7 ビューアのバージョン 設 定 : Readium Readium Chromium Release 3 MacOS 10.x Ver

8 ビューアのバージョン 設 定 : Kindle Kindle Paperwhite Kindlegen 2.8:.epub.mobi ファームウェア: Ver *フォント 設 定 で 出 版 社 のフォントを 指 定 8

9 ビューアのバージョン 設 定 : Kobo Kobo Touch 拡 張 子 :.epub.kepub.epub ファームウェア: Ver *フォントを ドキュメント デフォルト に 設 定 9

10 ビューアのバージョン 設 定 : ibooks ipad mini ファームウェア: Ver 3.1(iOS: Ver6.1.3) * 両 端 ぞろえをOFFに 指 定 10

11 調 査 方 法 Readiumの 表 示 結 果 を 参 照 しつつ 各 々の 端 末 ビューアで 調 査 を 実 施 11

12 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 黒 字 部 分 : 設 定 が 有 効 に 反 映 された 項 目 赤 字 部 分 : 設 定 が 一 部 有 効 無 効 の 項 目 12

13 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 13

14 6 フォント 埋 め 込 み 埋 め 込 んだフォントが 正 しく 反 映 されるか Readium Kindle Paperwhite 横 組 縦 組 横 組 縦 組 Windows 版 は Kobo Touch 横 組 縦 組 ibooks 横 組 縦 組 14

15 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 15

16 9 文 字 回 転 縦 組 で 指 定 した 文 字 が 右 90 度 回 転 するか Readium Kindle Paperwhite 横 組 縦 組 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 16

17 Readium 縦 組 17

18 Kindle Paperwhite 縦 組 18

19 ibooks 縦 組 19

20 ソースコード xhtml <span class="sideways"> :;</span> CSS.sideways { webkit text orientation: sideways; epub text orientation: rotate right; epub text orientation: sideways; } 20

21 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 21

22 10 小 文 字 大 文 字 変 化 スモールキャップス オールキャップスが 反 映 されるか Readium Kindle Paperwhite 横 組 縦 組 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 22

23 Readium 横 組 スモールキャップス オールキャップス 23

24 Readium 縦 組 オ ー ル キ ャ ッ プ ス ス モ ー ル キ ャ ッ プ ス 24

25 Kindle Paperwhite 横 組 スモールキャップス オールキャップス 25

26 Kindle Paperwhite 縦 組 オ ー ル キ ャ ッ プ ス ス モ ー ル キ ャ ッ プ ス 26

27 kobo Touch 横 組 スモールキャップス オールキャップス 27

28 kobo Touch 縦 組 オ ー ル キ ャ ッ プ ス ス モ ー ル キ ャ ッ プ ス 28

29 ibooks 横 組 スモールキャップス オールキャップス 29

30 ibooks 縦 組 オ ー ル キ ャ ッ プ ス ス モ ー ル キ ャ ッ プ ス 30

31 ソースコード xhtml <span class="smallcaps"> abcdefghijklmnopqrstuvwxyz </span> <span class="allcaps"> abcdefghijklmnopqrstuvwxyz </span> CSS.smallcaps {font variant:small caps;}.allcaps {text transform: uppercase;} 31

32 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 32

33 3 揃 え 和 欧 混 在 の 文 章 で 両 端 揃 えが 反 映 されるか Readium Kindle Paperwhite 横 組 縦 組 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 33 ビューア 設 定 の 両 端 揃 えは

34 Readium 横 組 34

35 Readium 縦 組 35

36 Kindle Paperwhite 横 組 36

37 Kindle Paperwhite 縦 組 37

38 ibooks 横 組 ビューア 設 定 OFF ビューア 設 定 ON 38

39 ibooks 縦 組 ビューア 設 定 OFF ビューア 設 定 ON 39

40 ソースコード xhtml <div class="align justify"> <p> 昔 々 あるところに an old manとan old ladyが 住 んでいました </p> </div> CSS.align justify { text align: justify; webkit text align last: left; epub text align last: left; } 40

41 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 41

42 Ⅶ. 表 組 表 組 が 正 しく 表 示 されているか Readium Kindle Paperwhite 横 組 縦 組 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 42

43 Readium 横 組 43

44 Readium 縦 組 44

45 Kindle Paperwhite 横 組 45

46 Kindle Paperwhite 縦 組 46

47 Kobo Touch 横 組 47

48 Kobo Touch 縦 組 48

49 ibooks 横 組 49

50 ibooks 縦 組 50

51 ソースコード xhtml <table class="tb2"><tbody><tr><th> 機 能 </th><th>adobe Digital Editions(PC/Mac)</th><th>iBooks2(iOS)</th><th>Kinoppy(iOS)</th><th>Readium(Chrome)</th><th>FUSEeβ(PC)</ th></tr><tr><td>epub3の 表 示 </td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> フォント 埋 め 込 み</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> 縦 書 き </td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> 均 等 割 / 和 欧 混 植 </td><td>? </td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> 縦 中 横 </td><td>?</td><td>?</td><td>? </td><td>?</td><td>?</td></tr><tr><td> 圏 点 </td><td>?</td><td>?</td><td>?</td><td>?</td><td>? </td></tr><tr><td>ルビ</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> 画 像 回 込 み</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td>SVG</td><td>?</td><td>? </td><td>?</td><td>?</td><td>?</td></tr><tr><td> 外 字 </td><td>?</td><td>?</td><td>?</td><td>? </td><td>?</td></tr><tr><td> 文 字 装 飾 </td><td>?</td><td>?</td><td>?</td><td>?</td><td>? </td></tr><tr><td> 目 次 </td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr><tr><td> 表 組 み </td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr></tbody></table> CSS.tb2 { border:1px solid;border spacing:0; bordercollapse:collapse; width:100%; }.tb2 th{border:1px solid;background color:#6495ed}.tb2 td{border:1px solid;} 51

52 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 52

53 1 傍 線 (1) 横 組 が 下 線 (underline) 縦 組 が 右 線 (overline)で 表 示 されるか Readium 横 組 縦 組 Kindle Paperwhite 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 画 像 外 字 に 傍 線 は 引 かれない 53

54 Readium 横 組 画 像 外 字 に 傍 線 は 引 かれない 54

55 Readium 縦 組 画 像 外 字 に 傍 線 は 引 かれない 縦 中 横 への 傍 線 が 1 文 字 上 の 横 へ 引 かれる 55

56 Kindle Paperwhite 横 組 画 像 外 字 にも 傍 線 が 引 かれる 56

57 Kindle Paperwhite 縦 組 画 像 外 字 にも 傍 線 が 引 かれる 57

58 Kobo Touch 横組 58

59 Kobo Touch 縦組 ルビへも傍線が引かれる 59

60 ソースコード xhtml <p> <span class="em line"> 横 組 み (text decoration: underline) 縦 組 み (text decoration: overline)</span></p> <p> <span class="em line"> 縦 中 横 指 定 に 傍 線 <span class="tcy">1</span> <span class="tcy">11</span></span></p> <p> <span class="em line"> 外 字 画 像 に 傍 線 <img class="gaiji" src="../image/gaiji go.svg" />(ゴシック 外 字 )にある</span></p> <p> <span class="em line"> 外 字 画 像 +ルビに 傍 線 <ruby><img class="gaiji" src="../image/gaiji go.svg" /><rt>くに</rt></ruby>(ゴシック<ruby> 外 字 <rt>がいじ </rt></ruby>)にある</span></p> <p> <span class="em line em sesame"> 外 字 画 像 +ルビ+ 圏 点 に 傍 線 <ruby><img class="gaiji" src="../image/gaiji go.svg" /><rt>くに</rt></ruby>(ゴシック <ruby> 外 字 <rt>がいじ</rt></ruby>)にある</span></p> 60

61 ソースコード CSS.hltr.em line { text decoration: underline; }.vrtl.em line { text decoration: overline; }.tcy { webkit text combine: horizontal; epub text combine: horizontal; }.em sesame { webkit text emphasis style: filled sesame; epub text emphasis style: filled sesame; } 61

62 1 傍 線 (2) 横 組 が 上 線 (overline) 縦 組 が 左 線 (underline)で 表 示 されるか Readium 横 組 縦 組 Kindle Paperwhite 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 画 像 外 字 に 傍 線 は 引 かれない 62

63 Readium 横 組 画 像 外 字 に 傍 線 は 引 かれない 63

64 Readium 縦 組 画 像 外 字 に 傍 線 は 引 かれない 縦 中 横 への 傍 線 が 横 へ 引 かれる 64

65 Kindle Paperwhite 横 組 65

66 Kindle Paperwhite 縦 組 66

67 Kobo Touch 横組 67

68 Kobo Touch 縦組 ルビへも傍線が引かれる 68

69 ソースコード xhtml <p> <span class="em line outside"> 横 組 み (text decoration: underline) 縦 組 み (text decoration: overline)</span></p> <p> <span class="em line outside"> 縦 中 横 指 定 に 傍 線 <span class="tcy">1</span> <span class="tcy">11</span></span></p> <p> <span class="em line outside"> 外 字 画 像 に 傍 線 <img class="gaiji" src="../image/gaiji go.svg" />(ゴシック 外 字 )にある</span></p> <p> <span class="em line outside"> 外 字 画 像 +ルビに 傍 線 <ruby><img class="gaiji" src="../image/gaiji go.svg" /><rt>くに</rt></ruby>(ゴシック<ruby> 外 字 <rt> がいじ</rt></ruby>)にある</span></p> <p> <span class="em line outside em sesame"> 外 字 画 像 +ルビ+ 圏 点 に 傍 線 <ruby><img class="gaiji" src="../image/gaiji go.svg" /><rt>くに</rt></ruby>(ゴ シック<ruby> 外 字 <rt>がいじ</rt></ruby>)にある</span></p> 69

70 ソースコード CSS.hltr.em line outside { text decoration: overline; }.vrtl.em line outside { text decoration: underline; }.tcy { webkit text combine: horizontal; epub text combine: horizontal; }.em sesame { webkit text emphasis style: filled sesame; epub text emphasis style: filled sesame; } 70

71 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 71

72 2 傍 点 圏 点 指 定 した 傍 点 圏 点 が 正 しく 表 示 される Readium 横 組 縦 組 Kindle Paperwhite 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 72

73 Readium 横 組 73

74 Readium 縦 組 74

75 Kindle Paperwhite 横 組 75

76 Kindle Paperwhite 縦 組 76

77 ソースコード xhtml <p> 圏 点 ( ) <span class="em dot">ビュレット</span></p> <p> 圏 点 ( ) <span class="em dot open"> 白 ビュレット </span></p> <p> 圏 点 (ʘ) <span class="em double circle"> 蛇 の 目 </span></p> <p> 圏 点 ( ) <span class="em double circle open"> 二 重 丸 </span></p> <p> 圏 点 ( ) <span class="em circle"> 黒 丸 </span></p> <p> 圏 点 ( 〇 ) <span class="em circle open"> 白 丸 </span></p> <p> 圏 点 ( ) <span class="em triangle"> 黒 三 角 </span></p> <p> 圏 点 ( ) <span class="em triangle open"> 三 角 </span></p> <p> 圏 点 ( ) <span class="em sesame">ゴマ</span></p> <p> 圏 点 ( ) <span class="em sesame open"> 白 ゴマ</span></p> <p> 圏 点 ( 任 意 の 文 字 ) <span class="em string"> 星 マーク </span> 電 書 協 外 </p> 77

78 ソースコード CSS.em sesame { epub text emphasis style: filled sesame; }.em sesame open { epub text emphasis style: open sesame; }.em dot { epub text emphasis style: filled dot; }.em dot open { epub text emphasis style: open dot; }.em circle { epub text emphasis style: filled circle; }.em circle open { epub text emphasis style: open circle; }.em double circle { epub text emphasis style: filled doublecircle; }.em double circle open { epub text emphasis style: open doublecircle; }.em triangle { epub text emphasis style: filled triangle; }.em triangle open { epub text emphasis style: open triangle; }.em string { epub text emphasis style: " "; } Webkitベンダープレフィックス( 接 頭 辞 )は 省 略 しています 78

79 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 79

80 4ルビ 指 定 されたルビ 位 置 ( 縦 組 : 左 右 )に 表 示 されるか Readium 横 組 縦 組 Kindle Paperwhite 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 80

81 Readium 横 組 81

82 Readium 縦 組 82

83 ibooks 横 組 Kindle PaperWhite, kobo Touchも 同 じ 表 示 83

84 ibooks 縦 組 Kindle PaperWhite, kobo Touchも 同 じ 表 示 84

85 Google Chrome Canary(Mac) 85

86 Adobe Digital Editions

87 ソースコード xhtml <h3>4 1.モノルビ</h3> <h4> 指 定 なし</h4> <p> <ruby> 鬼 <rt>き</rt></ruby><ruby> 門 <rt>もん</rt></ruby> の </p> <h4>4 1 2.over 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Over"> 鬼 <rt>き</rt></ruby><ruby class="ruby Over"> 門 <rt>もん</rt></ruby>の </p> <h4>4 1 3.before 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Before"> 鬼 <rt>き</rt></ruby><ruby class="ruby Before"> 門 <rt>もん</rt></ruby>の </p> <h4>4 1 4.under 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Under"> 鬼 <rt>き</rt></ruby><ruby class="ruby Under"> 門 <rt>もん</rt></ruby>の </p> <h4>4 1 5.after 指 定 電 書 協 外 </h4> <p> <ruby class= ruby After > 鬼 <rt>き</rt></ruby><ruby class= ruby After > 門 <rt>もん</rt></ruby>の </p> 87

88 ソースコード xhtml <h3>4 2.グループルビ</h3> <h4> 指 定 なし</h4> <p> <ruby> 鬼 門 <rt>きもん</rt></ruby>の </p> <h4>4 2 2.over 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Over"> 鬼 門 <rt>きもん</rt></ruby>の </p> <h4>4 2 3.before 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Before"> 鬼 門 <rt>きもん</rt></ruby>の </p> <h4>4 2 4.under 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Under"> 鬼 門 <rt>きもん</rt></ruby>の </p> <h4>4 2 5.after 指 定 電 書 協 外 </h4> <p> <ruby class="ruby After"> 鬼 門 <rt>きもん</rt></ruby>の </p> 88

89 ソースコード xhtml <h3 id="contentindex_id_59">4 3. 熟 語 ルビ</h3> <h4> 指 定 なし</h4> <p> <ruby> 鬼 <rt>き</rt> 門 <rt>もん</rt></ruby>の </p> <h4>4 3 2.over 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Over"> 鬼 <rt>き</rt> 門 <rt>もん</rt></ruby>の </p> <h4>4 3 3.before 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Before"> 鬼 <rt>き</rt> 門 <rt>もん</rt></ruby>の </p> <h4>4 3 4.under 指 定 電 書 協 外 </h4> <p> <ruby class="ruby Under"> 鬼 <rt>き</rt> 門 <rt>もん</rt></ruby>の </p> <h4>4 3 5.after 指 定 電 書 協 外 </h4> <p> <ruby class="ruby After"> 鬼 <rt>き</rt> 門 <rt>もん</rt></ruby>の </p> 89

90 ソースコード CSS.ruby After { epub ruby position: after; }.ruby Under { epub ruby position: under; }.ruby Before { epub ruby position: before; }.ruby Over { epub ruby position: over; } Webkitベンダープレフィックス( 接 頭 辞 )は 省 略 しています 90

91 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 91

92 5 縦 中 横 縦 中 横 が 正 しく 表 示 される Readium 横 組 縦 組 ー Kobo Touch 横 組 縦 組 ー Kindle Paperwhite 横 組 縦 組 ー 半 角 数 字 3 桁 英 字 2 桁 まで 有 効 ibooks 横 組 縦 組 ー 半 角 数 字 4 桁 英 字 2 桁 まで 有 効 92

93 Readium 縦 組 93

94 Kindle Paperwhite 94

95 Kindle Paperwhite 95

96 ibooks 96

97 ソースコード xhtml <span class="tcy">200</span> <span class="tcy">word</span> CSS.tcy { webkit text combine: horizontal; epub text combine: horizontal; } 97

98 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 98

99 2 背 景 色 背 景 色 が 正 しく 表 示 される Readium 横 組 縦 組 Kobo Touch 横 組 縦 組 ー ー モノクロ 端 末 の 為 Kindle Paperwhite 横 組 縦 組 ー ー モノクロ 端 末 の 為 ibooks 横 組 縦 組 99

100 Readium 横 組 100

101 Readium 縦 組 101

102 ibooks 横 組 102

103 ibooks 縦 組 103

104 ソースコード xhtml <html xmlns=" xmlns:epub=" xml:lang="ja" class="vrtl bg cyan"> </html> CSS.bg cyan { background color: #00ffff; } 104

105 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 105

106 3 改 ページ 改 ページが 正 しくされているか Readium 横 組 縦 組 Kindle Paperwhite 横 組 縦 組 Kobo Touch ibooks 横 組 縦 組 横 組 縦 組 106

107 Readium 横 組 107

108 Readium 縦 組 108

109 kobo Touch 横組 109

110 kobo Touch 縦組 110

111 ibooks 横 組 111

112 ibooks 縦 組 112

113 ソースコード xhtml <div class="pagebreak"> <p> 1ページ この 段 落 の 次 は 改 ページされていますか?</p> </div> <p> 2ページ この 段 落 の 前 は 改 ページされていますか?</p> <div class="pagebreak both"> <p> 3ページ この 段 落 の 前 後 は 改 ページされていますか?このページはこの 段 落 だけですか?</p> </div> <p> 4ページ この 段 落 の 前 は 改 ページされていますか?この 段 落 はページの 先 頭 ですか?</p> <p> 5ページ この 段 落 の 次 は 改 ページされていますか?</p> <div class="pagebreak before"> <p> 次 ページ この 段 落 の 前 は 改 ページされていますか?この 段 落 はページ の 先 頭 ですか?</p> </div> 113

114 ソースコード CSS /* 指 定 したブロックの 直 後 で 改 ページ */.pagebreak { page break after: always; } /* 指 定 したブロックの 直 前 で 改 ページ */.pagebreak before { page break before: always; } /* 指 定 したブロックの 前 後 で 改 ページ */.pagebreak both { page break before: always; page break after: always; } 114

115 調 査 結 果 Ⅰ. 文 字 1 書 体 指 定 2 混 植 セット 指 定 3 文 字 サイズ 指 定 4 文 字 色 指 定 5 外 字 画 像 6 フォント 埋 め 込 み 7 ボールド 8 イタリック 9 文 字 回 転 10 小 文 字 大 文 字 変 化 11 添 え 字 Ⅱ. 文 字 列 1 傍 線 2 傍 点 圏 点 3 囲 み 罫 4 ルビ 5 縦 中 横 6 影 付 き Ⅲ. 行 段 落 1 行 間 2 見 出 しグループ 3 揃 え 4 字 下 げ 5 扉 表 現 Ⅳ.ページ 構 成 1 改 行 2 背 景 色 3 改 ページ Ⅴ. 罫 線 1 囲 む 2 太 さ 指 定 3 色 指 定 4 水 平 線 Ⅵ. 画 像 1 画 像 の 表 示 2 回 り 込 み 3 画 像 周 囲 余 白 4 SVG 画 像 Ⅶ. 表 組 み 1 キャプションなし 2 キャプションあり 115

116 4.SVG 正 しく 表 示 されるか Readium ( 一 部 ) kobo Touch ( 一 部 ) Kindle Paperwhite ( 一 部 ) ibooks ( 一 部 ) 116

117 Readium 縦 書 指 定 したWidthとHeightが 逆 になっている 117

118 ソースコード xhtml <svg version="1.1" xmlns=" xmlns:xlink=" width="1465px" height="672px" viewbox=" "> <image width="1465" height="672" xlink:href="../image/img_fmt.png" ></image> </svg> 118

119 Readium 119

120 kobo Touch 120

121 ibooks 121

122 ソースコード xhtml <h4>4 2 1.SVG 棒 グラフ</h4> <p><img class="fit" src="../image/barchart.svg" alt=""/></p> The Apache Batik Projectのサンプルを 利 用 しています 122

123 まとめ: 制 作 時 に 注 意 が 必 要 なもの(1) Readium Kindle Kobo ibooks 横 縦 横 縦 横 縦 横 縦 フォント 埋 め 込 み 指 定 文 字 回 転 縦 組 の 文 字 を 右 90 度 小 ( 大 ) 文 字 変 化 スモールキャプス/ オールキャプス ー ー ー ー 揃 え 和 欧 混 在 で 両 端 揃 え 表 組 表 組 を 正 しく 表 示 傍 線 (1) 横 : 下 線 縦 : 右 線 傍 線 (2) 横 : 上 線 縦 : 左 線 123

124 まとめ: 制 作 時 に 注 意 が 必 要 なもの(2) 傍 点 圏 点 指 定 の 種 類 を 表 示 Readium Kindle Kobo ibooks 横 縦 横 縦 横 縦 横 縦 ルビ 指 定 位 置 に 表 示 縦 中 横 背 景 色 ー ー ー ー ーーーー 改 ページ 改 ページの 指 定 SVG 画 像 表 示 各 ビューアとも 基 本 的 な 機 能 はサポートされている 現 時 点 で 一 部 問 題 と 思 われるものもあるので ファームウェアのバージョンアップ 確 認 など 継 続 して 調 査 をしていく 124