ひまつぶし雑記帖

doncha.net制作・発行:KindleやiBooks、楽天kobo、BOOK☆WALKERで読む電子書籍

EPUB3固定レイアウトにテキスト絶対値配置

2014/6/1 [13:39:35] (日) 天気

漫画や写真集など画像一枚がページ一枚というシンプルな固定レイアウトのEPUB3ファイルは、画像がすべてで、画像さえしっかりしたものを作ればクオリティの高いものができる。

画像とテキストを組み合わせた固定レイアウトを作りたい場合どうすんの?と思っていたので少し調べてみた。
結論としては、テキストを絶対配置(position:absolute) で置いて行けばOKのようだ。

リフロー型EPUB3の場合、たとえば1ページいっぱいに挿絵など画像を置いても上下左右にマージン(余白)ができてしまう。画像をディスプレイいっぱいに表示したい場合は固定レイアウトのEPUB3で作る以外に方法が(今のところ)ない。
(そのうちハイブリッド型がリーダーで実装されれば問題は解決するんだけど)
絵や画像を見せたいコンテンツの場合(画像で勝負するものの場合)無用な余白は作品を損なうこともあるので、固定レイアウトはここが最大の魅力、かな。

ただ、ibookstoreの場合、固定レイアウトでテキストがあるものは検索可能でないと審査ではねられるらしい(漫画のネームはいいのにねえ)



ということは「レイアウトデザイン重視で紙の本・雑誌を忠実に再現する必要がある」などの場合、底本のPDFデータをそのまま画像化するしかないんだけど、それだとibookstoreでは通らない。
一から作り直しとなる。これはかなり面倒な作業。1ページずつ絶対配置でテキストを置いてレイアウトを確認してさらに位置調整デザイン調整。当然そこに画像位置も絡んでくる。

テキスト絡みの固定レイアウトを作るのはすべて手作業ということになるなあ。こいつを仕事としてやるにはページ1万円でも安いかもしれん。

iBooksもkindleも同じEPUB3ファイルで試した。表示は同じに見える。リフローより端末やアプリ間での差は少ないのかな…。

Mac iBooks
image
Kindle Previewer
image

iBooksで検索ができることを確認。
Mac iBooks
image

ページのXHTML

インラインSVGで画像を指定。
テキストは絶対値で位置を指定。

スタイルシート


»電子書籍制作代行についてはこちら

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2019/10>>
  12345
6789101112
13141516171819
20212223242526
2728293031

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』