ひまつぶし雑記帖

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で画像を指定。
テキストは絶対値で位置を指定。

スタイルシート


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

【電子書籍発売中】

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

profile

profile

 
doncha.net
contact:
»運営者
@t2aki@tokoroten.doncha.net

ため池

[2025/03/23 18:35]
@k6s8@misskey.io @k6s8@misskey.io わたしは三波春夫が狂ったように意味のない歌詞で叫んでた大阪万博世代で、月の石とか目玉商品があったと思うんですけど、今どきは万博に限らず、いわゆる国を上げてのイベント ...

[2025/03/23 18:15]
【速報】万博に行きたいとは思わない74%
https://www.47news.jp/12345446.html
>大阪・関西万博に「行きたいとは思わない」が74.8%で、「行きたいと思う」の24.6%を上回った。

「上回った」とかいうレベルじゃないんだけどwwww ...

[2025/03/23 18:09]
ゴージャスでリッチ、すげー作り込んだページも、アクセスして観てもらうことが大前提。
表示に時間がかかって「戻る」されたら元も子もない。そのJavascript本当に必要?cookie食わせてDBと照合してる暇があったらとっ ...

@t2aki@tokoroten.doncha.net

検索
<<2025/3>>
      1
2345678
9101112131415
16171819202122
23242526272829
3031

リンク

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