画像オンリーな漫画のkindle本をawz及びawz3からcalibreでepubに変換後、calibreの電子書籍ビューアで表示させると画像が極端に小さく表示されたり、ちゃんと表示されてもウィンドウが小さくなったらはみ出て次のページに中途半端に分割されたりする。画像オンリーなcbzからepubの場合は、画像が元の解像度以上に引き伸ばされて表示されることはなく、大型で高解像度なモニターでウィンドウに合わせて大きくなってくれないのが使いづらい。それらの問題を解決したかったので頑張ってcssを数行書いた。
いい感じに表示できるCSS
変換元の形式や構造によってbodyタグやその前後のタグにつくクラス名が結構違うのでそれをうまく利用したセレクタを使うことで文字主体の小説や実用書のepubと干渉することを回避した。最初bodyタグに直接”column-width:auto !important;”を書いたらページ遷移するたびに文字が画面外にはみ出る問題でかなり悩んだ
/*画像オンリーなcbz等からepubに変換した漫画用*/
body.calibre1.calibre-viewer-paginated{
column-width:auto !important;
}
img.calibre2{
height: 100% !important;
width: 100% !important;
max-width: initial !important;
max-height: initial !important;
object-fit: contain !important;
}
/*azwからepubに変換した漫画用*/
body.calibre.calibre-viewer-paginated{
column-width:auto !important;
}
Code language: CSS (css)とりあえずこのcssをcalibreの電子書籍ビューアのスタイルに追記することで、画像オンリーなawzとawz3からepubにしたものと自炊等で画像を詰め込んだcbzやcbrなんかをepubにしたものであれば、電子書籍ビューアのウィンドウに合わせて画像がアスペクト比を維持しつつ、縮小拡大される。
上記みたいな記述は不要だった件
以下の記述がすべての元凶
.calibre {
font-size: 0;
margin: 0;
padding: 0
}Code language: CSS (css)対策方法はepub内のstylesheetをcalibreで編集して、当該記述をコメントアウト又は削除を行うか、下記記述をcalibreの電子書籍ビューアの設定のスタイルへ適応させ、当該cssを黙らせる
.calibre {
font-size: initial;
margin: initial;
padding: initial;
}Code language: CSS (css)