EPUB形式の電子書籍リーダーの検証
2010年 4月 16日 17:05
電子書籍のスタイルシート検証
iPadの日本国内での発売は、5月末に延期されましたが、そのiPadに対応した電子書籍の形式として、EPUBと言う形式があります。
当然出版各社も、このEPUB形式に対応した新聞・雑誌の制作に追われている事かと思います。
EPUBはXHTMLとCSSを使用して、制作している書籍になります。
制作方法については、日本語Epubブックサンプル – 横浜工文社または、電子書籍ファイルePubについて -ePubを自分で作成するに詳しく書いてありますので、ご覧になってください。
閲覧の方法は.epub形式※のデータファイルをパソコンあるいは、スマートフォン等の電子書籍を読むことが出来るハードにダウンロードして、そのファイルを電子書籍リーダー(以下リーダー)で読むと言った具合です。
※.epubのファイルは、XHTMLとCSSその他電子書籍に必要なファイルをzip圧縮したファイルです。
PCでの閲覧は曲者
PCで電子書籍を閲覧しようとした時、
●専用リーダーで読むか
●ブラウザーベースのリーダーで読むか
で、表示がかなり変ります。
現在、電子書籍の専用リーダーとして広く普及しているのは、
「Adobe Digital Editions」
ブラウザーベースとしては、ファイヤーフォックス・オペラからウィジェット等が出ております。
では何が問題なのかと言いますと、専用リーダーとブラウザーベースのリーダーでは、CSSの解釈(使えるプロパティが少ない?)がかなり違うと言う事です。
専用リーダーの場合は、ごく基本的なCSSしか使えない状態ですが、ブラウザーベースのリーダーはほぼ全てのCSSが使えます。
当り前と言えばそうですが、ブラウザーベースのリーダーはブラウザーが表示をしているので、CSSに関しては全く問題なく表示をしてくれます。しかし専用リーダーの場合は、強調文字(<b>タグまたは<strong>タグ)ですら表示できません。
ブラウザーとは違うものなので、CSSハックで表示を変えることも出来ないと言うのが現状です。
テキストベースの論文や小説・レポートなどは良いですが、雑誌などは少々困る状態です。 また、Adobe Digital Editionsの場合、フォントサイズを指定しない場合、デフォルトのフォントサイズは約20ptとかなり大きめの文字サイズになっているので、最初にCSSである程度フォントサイズ指定が必要になります。(特に指定しなくとも良いとは思いますが、少々大きいように見えます。)
また、フォントサイズの指定にしても、CSSで body font-size: 14px; と具体的なサイズ指定をしてしまうと、リーダー上でのフォントサイズの変更は効かなくなる※ので、全て font-size: ●%; と言った%指定での方法となります。
※殆どのリーダーには、フォントサイズを変更できるボタンがついています。
縦書きは不可能?
現状の電子書籍リーダーは、海外で作られた物が殆どですので、専用リーダー・ブラウザーベース共に、縦書きには対応していないというのが現状です。一部のブラウザーでは、CSSによる縦書き表示も可能ですが、あまり賢いやり方では無いでしょう。縦書きの文章にする時は、画像化してしまう事が現状ではもっとも無難な方法だと思われます。
画像化するにしても、pdf・jpg・gif・png・svgと様々な形式があるので、どれを使うことがベストなのかは、今後検証して行きたいと思っております。
今後、Adobe Digital Editions以外の専用リーダーが出てくる可能性もありますので、今しばらくはこの不安定な状態が続くとは思います。日本の特殊な文字組みに対応した、新しい電子書籍リーダもそのうちに登場するでしょう。出来ればEPUBフォーマットベースでお願いしたいところですが、難しいでしょうね。
以下に、Adobe Digital Editionsと、ブラウザーベース(ファイヤーフォックス)でのCSSの表示に関するリストを作ってみました。下記のリストを見ていただくと解るのですが、Adobe Digital Editionsでは使えるプロパティが少ないですので、色々な意味で制作での制約が出てきそうです。
またリストは、代表的なプロパティしか検証しておりません。子孫のセレクタについても特定の物しか検証しておりませんのでご了承ください。※子孫のセレクタで表示可能なものありそうです。
ご質問等がございましたら、こちらからどうぞ。
| CSS | Adobe Digital Editions | Firefox |
|
フォント関連
|
||
| デフォルトフォントサイズ | 20px | ブラウザー設定サイズ |
| font-size | ○ | ○ |
| line-height | ○ | ○ |
| font-style | ||
|
アンダーライン
|
○ | ○ |
|
斜体※日本語表示が出来ない
|
× | ○ |
|
オーブリック※日本語表示が出来ない
|
× | ○ |
| font-weight※プロパティ全て | × | ○ |
| font-variant※プロパティ全て | × | × |
| text-decoration※プロパティ全て | ○ | ○ |
|
背景関連
|
||
| background-color | ○ | ○ |
| background-image | ○ | ○ |
| ※その他背景関連については、基本的に全て使用可 | ○ | ○ |
|
ブロック関連
|
||
| word-spacing | × | × |
| letter-spacing | × | ○ |
| text-align | × | × |
| text-indent | × | × |
| display | ||
|
block
|
○ | ○ |
|
inline
|
○ | ○ |
|
BOX関連
|
||
| height※ | ○ | ○ |
| width※ | ○ | ○ |
| margin※ | ○ | ○ |
| float | ○ | ○ |
| ※必ず数値指定をする。autoでは、認識しない場合があるので注意 | ||
|
ボーダー関連
|
||
| solid | ○ | ○ |
| dashed | ○ | ○ |
| double | ○ | ○ |
| dotted | ○ | ○ |
| groove | ○ | ○ |
| ridge | ○ | ○ |
| inset | ○ | ○ |
| outset | ○ | ○ |
|
リスト関連
|
||
| disc | ○ | ○ |
| circle | × | ○ |
| square | ○ | ×※ |
| decimal | × | ×※ |
| lower-roman | × | ×※ |
| upper-roman | × | ×※ |
| lower-alpha | × | ×※ |
| upper-alpha | × | ×※ |
| none | ○ | ×※ |
| ※<ul>タグ指定の子孫であれば有効 | ||
|
位置関連
|
||
| position | ||
|
absolute
|
× | ○ |
|
relative
|
× | ○ |
| overflow | ||
|
visible
|
○ | ○ |
|
hidden
|
○ | ○ |
| visibility | ||
|
hidden
|
○ | ○ |
|
visible
|
○ | ○ |
