DIY-Donnerstag, Epub Insights

EPUB Insights #7 Captions

12. Juli 2018

Liebe AutorInnen und SelfpublisherInnen,

manchmal sieht man in E-Books, und mir ist das auch schon passiert, dass eine Bildunterschrift nicht unter einem Bild, einer Zeichnung, einem Diagramm steht, sondern oben auf der folgenden Seite. Im Kindle Previewer sieht das dann z.B. so aus:

Auf der linken Seite: das Autorenporträt, aber die dazugehörende Bildunterschrift taucht leider erst auf der nächsten Seite auf.

Image und Caption zusammenhalten
In den KDP Guidelines wird folgender Code vorgeschlagen:
<img src=“../Images/Katrin_Bongard.jpg“  style=“display:block“ />
<div><p class=“caption“>Katrin Bongard ist Malerin und Autorin …</p></div>
Das gewährleistet zwar, dass die Caption unter dem Bild steht. Verhindert meines Erachtens aber nicht unbedingt, dass die Bildunterschrift auf die nächste Seit rutscht.

Eine weitere Möglichkeit ist es, Bild und Bildunterschrift zusammen in einem <div> Container zu platzieren. Auf diesen läßt sich dann das Attribut page-break-inside mit dem Wert avoid anwenden, um die Elemente in dem Container zusammenzuhalten. Sinnvollerweise ordnet man dem <div> Element eine aussagekräftige Formatklasse zu. Da es sich hier um die Autorenseite des Buchs geht, habe ich sie .autor genannt.

<div class=autor><img src=“../Images/Katrin_Bongard.jpg“ alt=“Porträt Katrin_Bongard“>
<p class=“caption“>Katrin Bongard ist Malerin und Autorin …</p></div>

Damit die Bildunterschrift nun nicht vom Bild getrennt wird, muss die dazugehörige CSS Anweisung lauten:

div.autor { display: inline-block; page-break-inside: avoid; }

Das funktioniert sehr gut in Epubs, die z.B. im iBook-Store hochgeladen werden. Der große Nachteil ist, dass diese Methode nicht von allen E-Readern unterstützt wird. Vor allem bei KDP funktioniert es leider nicht, da KDP zwar die CSS Eigenschaften  page-break-before und pagebreak-after bedient, allerdings nicht page-break inside.


Ich glaube nach vielen Versuchen auf zahlreichen von mir getesteten Readern und Lesegerräten, dass es am einfachsten ist, zwei <div> container miteinander zu verschachteln. In den ersten kommt das Bild und in den zweiten die dazugehörige Bildunterschrift.

Hier noch einmal zum kopieren:

<div><img src=“../Images/Katrin_Bongard.jpg“ alt=“Porträt Katrin_Bongard“ style=“display:block“ />
<div><p class=“caption“>Katrin Bongard ist Malerin und Autorin …</p></div>
</div>

 

Image und Caption trennen

Im umgekehrten Fall, wenn der nach einem Bild folgende Text auf einer neuen Seite beginnen soll, ist es natürlich erst einmal möglich eine neue xhtml Seite für den Text einzufügen. Falls das aus irgendeinem Grund nicht die komfortabelste Lösung ist, funktioniert in diesem Fall das Attribut page-break-before: mit dem Attribut always!important;

Im folgenden Beispiel habe ich nachträglich das Impressum von der Titelseite auf die nächste Seite gesetzt.
.impressum {
font-weight: normal;
font-style: normal;
font-size: 0.72em;
line-height: 1.23em;
text-decoration: none;
font-variant: normal;
text-indent: 0em;
text-align: center;
color: #000;
margin: 40em 0em 0.71em 0em;
padding-top:40em;
page-break-before:always!important;
}

Bis denne
Uwe

You Might Also Like

No Comments

Leave a Reply