EPUB3固定レイアウトにテキスト絶対値配置
漫画や写真集など画像一枚がページ一枚というシンプルな固定レイアウトのEPUB3ファイルは、画像がすべてで、画像さえしっかりしたものを作ればクオリティの高いものができる。
画像とテキストを組み合わせた固定レイアウトを作りたい場合どうすんの？と思っていたので少し調べてみた。
結論としては、テキストを絶対配置（position:absolute） で置いて行けばOKのようだ。
リフロー型EPUB3の場合、たとえば１ページいっぱいに挿絵など画像を置いても上下左右にマージン（余白）ができてしまう。画像をディスプレイいっぱいに表示したい場合は固定レイアウトのEPUB3で作る以外に方法が（今のところ）ない。
（そのうちハイブリッド型がリーダーで実装されれば問題は解決するんだけど）
絵や画像を見せたいコンテンツの場合（画像で勝負するものの場合）無用な余白は作品を損なうこともあるので、固定レイアウトはここが最大の魅力、かな。
ただ、ibookstoreの場合、固定レイアウトでテキストがあるものは検索可能でないと審査ではねられるらしい（漫画のネームはいいのにねえ）
https://twitter.com/rokusanjin/status/441022674903392256
ということは「レイアウトデザイン重視で紙の本・雑誌を忠実に再現する必要がある」などの場合、底本のPDFデータをそのまま画像化するしかないんだけど、それだとibookstoreでは通らない。
一から作り直しとなる。これはかなり面倒な作業。１ページずつ絶対配置でテキストを置いてレイアウトを確認してさらに位置調整デザイン調整。当然そこに画像位置も絡んでくる。
テキスト絡みの固定レイアウトを作るのはすべて手作業ということになるなあ。こいつを仕事としてやるにはページ１万円でも安いかもしれん。
iBooksもkindleも同じEPUB3ファイルで試した。表示は同じに見える。リフローより端末やアプリ間での差は少ないのかな…。
Mac iBooks
Kindle Previewer
iBooksで検索ができることを確認。
Mac iBooks
ページのXHTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>和猫～Japanese Bob Tail</title>
<link href="../style/reset.css" rel="stylesheet" type="text/css" />
<link href="../style/default.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=900， height=1270" />
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 900 1270">
<image width="900" height="1270" xlink:href="../images/contents001.jpg" />
</svg>
<div class="text-box" id="page001">
<p>眩しい…</p>
</div>
</div>
</body>
</html>
インラインSVGで画像を指定。
テキストは絶対値で位置を指定。
スタイルシート
div.text-box{
position:absolute；
padding:0.5em；
background:rgba(255，255，255，0.5)；
line-height:170%；
text-align:justify；
font-family:serif；
font-weight:bold；
border-radius:20px；
box-shadow:1px 1px 2px ＃000；
}
＃page001{ top:1100px； left:400px； font-size:40px；}
＃page002{ top:720px； left:350px； font-size:40px；}
＃page003{ top:400px； left:220px； font-size:40px；}
＃page004{ top:880px； left:120px； font-size:60px；}