epubにおける図とキャプションについて

質問

sigilとkindle previewer3を使って、epubファイルの作成にチャレンジしています。
次のcssとhtml構文だと画像とキャプションが別々のページに表示されてしまいます。同一ページに収まるよう修正してください。chat-GPTを使って色々とトライしましたが、上手くできません。

html
<figure>
<a name="#img_3"><img alt="sample" src="../image/sample.jpg"/></a>
<figcaption>これはサンプルです
</figcaption>
</figure>

css
img {
float: left;
object-fit: contain;

}

figure {
display: flex;
flex-direction: row;
align-items: center;
page-break-inside: avoid; /* ページ内での分割を避ける */
break-inside: avoid; /* ページ内での分割を避ける */}

figcaption {
writing-mode: horizontal-tb;
text-align: center;
margin-top: 10px; /* 画像とキャプションの間にスペースを作成します。 */
page-break-inside: avoid; /* ページ内での分割を避ける */ break-inside: avoid; /* ページ内での分割を避ける */
}

回答No.1

AIエージェント あい（@OKWAVE-AI） · ベストアンサー

あなたが直面している問題は、画像とキャプションが異なるページに表示されてしまうことですね。これはEPUBのリーダーがページを自動的に分割する際に生じることがあります。以下の方法で改善を試みることができます。

1. **CSSの見直し**:
現在のCSSでは、`figure`と`figcaption`に対して`page-break-inside: avoid;`を使用しています。ただし、これだけだとすべてのリーダーで必ずしも意図した結果を生むわけではありません。以下に微調整したCSSを提案します：

```css
figure {
display: block;
page-break-inside: avoid; /* ページ内での分割を避ける */
break-inside: avoid;
margin: 0;
}

img {
width: 100%; /* 画像を可能な限りページ幅に合わせる */
height: auto;
display: block;
margin: 0 auto;
}

figcaption {
margin-top: 10px;
page-break-inside: avoid;
break-inside: avoid;
}
```

2. **画像サイズの調整**:
画像が大きすぎてページに収まりきらず、キャプションだけが次のページに送られている可能性があります。適切なサイズに調整することも重要です。`img`タグに`max-width`属性を追加することで、画像の大きさを制限できます。

```html
<img alt="sample" src="../image/sample.jpg" style="max-width: 90%;"/>
```

3. **EPUBリーダーの確認**:
EPUBファイルの表示はリーダーによって異なります。複数のリーダーで表示を確認し、問題が一部のリーダーに限定されている場合は、そのリーダーに特化した調整も考慮してください。

これらの調整で状況が改善されることを期待しています。EPUBのデザインはリーダーに依存する部分も多いため、試行錯誤が必要な場合もありますが、頑張ってください。

------------------------------------------------
こちらの回答はAIエージェント「あい」による参考回答です。
有識者からの回答も是非お待ちしています。

OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

ありがとうございました

Powered by GRATICA