─グーテンベルクの遙か彼方へ─このブログはEPUB3をはじめとした電子書籍制作の現場からの「現地レポート」を目指しています。電子書籍制作、アプリケーション開発など、多方面の方々からの積極的なご意見をお待ちしております。※『InDesign→EPUB3用XHTML作成ワークフロー』は通常エントリに移動しました。『ジャンル別まとめ/ダウンロード』からアクセスできます。»Kindleで画面内表示画像サイズを%指定する各ストアビューア向けのEPUB制作で、画面サイズに対して%で画像表示サイズを指定することは長らくできておらず、悩ましい問題です。これは2014年頃にEPUB組版表現の対応状況を調査し始めてから状況がずっと変わっていません。Kindleでは、PaperWhiteなどの電子ペーパー専用端末とAndroid版では%指定が効くものの、iOS版Kindleアプリで効かないという状況が続いており(参考/項目7-9)、このために画像を画面内の特定のサイズで表示させるために「余白部分込み」で画像化するというまるでWebの初期のようなTipsを使用せざるを得ませんでした。これをやってしまいますと、ビューア側の設定で背景色を変えた際に余白部分が白く表示されて見えてしまうので可能ならば避けた方が良いのですが、サイズ指定が効かないよりはマシということで使われてきたわけです。最近JAGATの研究会活動の一環として改めて挙動をチェックしてみたところ、%指定が効かなかったiOS版Kindleでもどうやら単位にvw/vh※1を用いたサイズ指定なら効くことがわかりました。あるならば、もしかしたら%とvw/vhを同じ値で指定してやることでKindleの全プラットフォーム共通のサイズ指定ができるかもしれません。いうことで試してみよう、というのが今回の趣旨です。iOS版Kindleでサイズ指定が効いた!以下のようにCSSの指定を書き※2、テストファイルを作ってテストをしてみます。20vw;}iOS版Kindleでの表示結果は以下の感じ。KindleはiOS版以外では普通に%指定が効くため、iOS版でサイズ指定が効けばよいので目論み通り成功です。他のKindleデバイスでも不具合は出ていないようです。他社のビューアで不具合が出る可能性がありますので、一応それも見てみなければなりません。他社製EPUBビューアで不具合が出るということで他社ビューアでの表示結果もチェックしたのですが、残念なことにあるビューアで表示の不具合が出てしまいました※3。line-height(行高指定)とtext-combine-upright(縦中横)が効かなくなるようです。メディアクエリで適用範囲をKindleのみに限定できないかここで思い出したのがKindleのメディアクエリです。amzn-mobi7」などの形で、デバイスごとに表示を切り替えるための独自の値を定義しています※4。これを利用してCSSの適用範囲をKidleのみに限定できないでしょうか。いうことでCSSにメディアクエリを追記して再テストをしてみます。CSSは以下のような感じ。20vw;}}はい、成功です。いうことでひとまず目的は達しました。Booksですが)でも同様だったりしますので、出来るなら将来的にはメディアクエリは外したいところです。各電書ストアビューアの表示対応を期待します。vwは表示中の画面(ビューポート)の横幅に対しての%指定、vhは高さに対しての%指定の意味。電書協EPUB3制作ガイドのCSS記述を参考にしている。中の人に報告上げてブログ記事作る間に該当のビューアで修正がかかった模様。対応が早くてありがたい。いえ不具合が出るビューアが1社だけとは限らないので記事としては残しておく。参考:http://epubsecrets.com/media-queries-for-kindle-devices.phpおまけEPUBで電書協ガイドの規定クラスに追記するには以下の形になるはず。book-style.cssの作品別カスタマイズ領域に書けばよい。フィードで購読することができます。コメントを残すか、ご自分のサイトからトラックバックすることができます。スパム防止のためコメントは承認制とさせていただいております。Tajimaこちらにて、電子書籍&Web制作を担当しています。このブログは、EPUB3をはじめとした電子書籍制作担当オペレータからの、「電子書籍の制作時にたとえばこんな問題が出てきていますよ」的な「現地レポート」です。整うことを願って、現場からの声を発信していこうと目論んでおります。当ブログ内の記事・資料は、私の所属しております組織の許諾を得て掲載していますが、内容は私個人の見解に基づくものであり、所属する組織の見解を代表するものではありません。本ブログの情報・ツールを利用したことにより、直接的あるいは間接的に損害や債務が発生した場合でも、私および私の所属する組織は一切の責任を負いかねます。License.『電書魂』のコンテンツはクリエイティブ・コモンズによりライセンスされています。記事名の記載と、記事へのリンクを貼って頂ければ、コンテンツを自由にご利用いただくことができます。