ひまつぶし雑記帖

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

固定レイアウトのSVG指定

2013/11/8 [15:34:24] (金) 天気

先日公開した『kindle猫写真集』http://t2aki.doncha.net/?id=1382691748 の固定レイアウト、SVGでの指定について補足自分メモ。

KADOKAWAグループのEPUB制作仕様が公開されたので中を見たところ、画像は固定レイアウトにしてSVGで記述する、ということなのでちょっとだけ調べた。

目次画像用に使ったxhtmlファイル
(画像のサイズは 900x1270 で、画像の中に目次がある)

※KADOKAWAの仕様ではまだ「imageマップは使わない」となっているけど、ibooksなどEPUB3では使えるので目次に使った(クリッカブルマップのSVG版、かな)

上記のxhtml、もろもろ呪文状態で使ってるんだけど

svg(SVGで画像表示の設定。XMLだ)

・viewBox
画像領域のどの部分を切り取るかという指定(画像領域の左上からxyの座標を指定する)上記だと、x座標0、y座標0、幅900、高さ1270

・width height
viewBoxで切り取った画像領域をブラウザ(リーダー)で表示するサイズを指定。上記だと幅100%、高さ100%と目いっぱい表示するように指定(opfや、metaタグのviewportだったりで表示サイズを900x1270に指定してあるので天地左右100%でOK)

image(実際の画像ファイルの指定)

・実際のサイズを指定してファイルを指定する。 HTMLだとimgタグ。

rect(四角領域を作ってクリッカブルマップ)

・xy座標と、幅高さを指定してその四角の中は透明で埋める(fill-opacity)この四角を目次のリンクにする(HTMLのusemapより指定のしかたが分かりやすい)


一枚画像だけのためのxhtmlファイルなので愛想もなにもない短い単純なファイル。
固定レイアウトは画像サイズも揃えるので、画像ファイル名だけが違うxhtmlが画像の数だけ単調に並ぶ。

KADOKAWAのEPUB仕様では、リフローだとspine部で該当ページだけ固定レイアウト指定することになっている。
本文に混じる挿絵や見開き横長挿絵のために固定とリフローの混在がkindleやibooksで使えるようになってからが本番、だな。

KADOKAWA-EPUB PORTAL(EPUB制作仕様ページ)
http://kadokawa-epub.bookwalker.co.jp/home

↑これはかなり細かくて丁寧な資料なので、オススメ。

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

profile

profile

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

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

検索
<<2017/9>>
     12
3456789
10111213141516
17181920212223
24252627282930

リンク

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

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