と、いうことで新シリーズ。
美しいもの、そうではないけどちょっと話のネタにしたいもの。
そういう画像を一枚選んで、週に一度載せることにしました。
初回の今夜は、これ。
もちろん、正しい比率ではない
キャプションにあるとおり、この画像は少し平べったく潰れている。DTP用語で言うと、《平体が掛かっている》というやつだ。
どうしてこんな画像を載せたのかというと、これはある電子書籍ストアに出した本の表紙として表示されている状態なのだ。
今日は、どうしてこんなことになってしまうのかという原因と、自戒。
皆さんご存知の通り、書籍には決まった比率というものがない。もちろん、文庫なら文庫の、新書なら新書の標準的な縦横比というものがあるけれど、少なくとも電子書籍には定型というものがない。
ストアによって、出版社によって、著者によって様々な表紙を用意しているわけだ。
もちろん、電子書籍リーダーにも色々な比率があるし、同じアプリでも端末によって変わったりすることもある。
だがしかし！
見ての通り、僕の表紙は平べったい。
epubの設定の中には、当然、画像のサイズや《縦横どちらを優先して画像を拡大・縮小するか》というオプションがあるけれど、epubを書き出す環境によって、そのオプションが自動的に書き込まれている場合と書き込まれていない場合がある。書き込まれている場合には、それを気にしておかなければいけないんだね！ という話。
例えば、iPhone（5以降）の場合は、画面がかなり縦長になっている。だから、余白が最も少なくなるようにするには、横幅優先にする必要がある（と思いがち）。だけど、タブレットなどの場合には多くの書籍よりも幅広で、左右が余る形になる。そうすると、逆に縦の長さを優先にする必要があるわけだ。
つまり、縦横どちらかを優先に設定をすると、その電子書籍を表示する端末の縦横比に応じて余白の空き方が全く変わることになってしまう──。
だいたい言いたいことは分かってきてくれたかな？
上に書いた設定は、つまり、電子書籍の表紙に対しては《効果的でない》のだな。
上に画像を載せた『段ボール箱の中の人形』の場合には、img要素に対してcssの設定がこうなっている。
「横優先、それぞれの最大サイズは画面の100％まで」という設定
これ、どういうことかというと、
縦長の端末では機能するけれど、横長の端末では画像が潰れる設定なのだ。
《画面の横幅に合わせて画像を拡大し、最大でも縦の長さが画面から溢れないようにする。》
ということなので、もしも画像より画面が横に長かった場合、横を100％にすると高さ方向が溢れて画像が切れてしまう。それを防ぐために「max-height:100%」が入っているので、表示側としては画像を潰すしかない、ということになる。
──簡単な結論。
画像サイズはビューワに任せよう。
たまたま今までは不具合が出たことがなかったのだけれど、今回新たに出版したストアで、表示された画像はその縦横比を完全に無視して《画面一杯に引き伸ばされていた》。
おいおい、それはないだろう。と思って初めて色々と調べてみて、自分の側に、というか、変換の際、自動的に埋込まれたcssに問題があることが分かったのだった。
親切に色々と細かな設定が埋込まれるのは良いのだけれど、これはちょっとおせっかいなのかもね。
だから、もし、不具合が起こった場合は、epubをいったん開いてcssの中を覗き、img属性に対して上の画像のような設定が埋込まれていないか確認した方がいいかもしれない。
縦横比が大事なのではなく全ての要素を大きめに表示して欲しい画像がある場合はこの限りではないけれど、思うに、この画像サイズの設定（つまり上の画像なら五行分全て）は消してしまった方が良いのではないかと。
（あ、もちろん、素人意見なので、よくよくプレビューして検証してみてからにしてくださいな。もしやってみる場合は）
縦優先だと多くの場合はきれいに収まるけれど、そうでないこともある。と覚えておかなきゃ。
この記事が、いつか誰かの役に立ちますように！
じゃ、また明晩！
