Ingeborg Helzle gibt in diesem zweiteiligen Expertentipp ihre Erfahrungen rund um Bildern in eBooks weiter. Im ersten Teil erklärte die erfahrene eBook-Herstellerin allgemein das Einbinden von Bildern in EPUBs. Jetzt geht es um das Formatieren der eingebundenen Bilder.
Bilddekoration
Bilder können mit Rahmen versehen werden. Im CSS wird der entsprechenden <img>-Anweisung folgendes hinzugefügt:
border: 1px solid 000;
Die Breite des Rahmens kann über die Angabe der Pixel gesteuert werden. Statt einer durchgehenden Linie (solid) lässt sich auch eine gepunktete (dotted) oder eine gestrichelte (dashed) Linie anwählen.
Zum Schluss kommt die Farbanweisung. 000 ist Schwarz. Andere Farben lassen sich z.B. über html-color-codes.info/webfarben_hexcodes/ bestimmen.
Andere Bilddekorationen wie Schatten, runde Ecken, ausgefranste Kanten o.a. können im EPUB nicht per CSS erzeugt werden. Dazu muss das Bild in einem Bildeditor modifiziert, abgespeichert und dann eingefügt werden.
Position
EBooks sind textorientiert – Bilder lassen sich nicht so einfach wie die Textbestandteile formatieren.
Die optische, wenn auch nicht barrierefreie Lösung für dieses Problem ist das <div>-Element. Laut SelfHTML-Wiki dient ein <div> folgendem: „Das <div>-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einzuschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können. <div> bedeutet division, etwa Abteilung oder Bereich.“
Standardmäßig werden Bilder linksbündig angezeigt. innerhalb des <img>-Selektors lässt sich das auch auf rechtsbündig umstellen:
img { text-align: right;}
Bilder zu zentrieren ist etwas aufwändiger, dafür gibt es zwei Möglichkeiten: Entweder mit einem <div>-Element. Die <div>-Regel im CSS lautet:
div.bild-zentriert {text-align: center !important;}
Im HTML wird das Bild anschließend mit dieser CSS-Regel in einen <div>-Container gepackt:
<div class="bild-zentriert">
<img alt="" src="../Images/XYZ.jpeg“/>
</div>
Für die barrierefreie Alternative nutzt man die Zentrieren-Funktion von Sigil (Formatierung → Zentrieren). Damit wird die Formatanweisung inline im HTML angelegt:
<p style="text-align: center;">
Mit einem Klick auf dieses Symbol in der Werkzeugleiste erreicht man ebenso eine Inline-Zentrierung.
Komplexere Bildgestaltung wie Bildleisten oder Bildcluster müssen in einem Bildbearbeitungsprogramm zusammengestellt und dann als Ganzes in das EPUB eingefügt werden.
Textumbruch an Bildern
Damit ein Bild von Text umflossen werden kann, muss es ebenfalls mit einem <div>-Element umgeben werden.
In dieser <div>-Klasse wird die Breite des Bildes in width, die gewünschte Richtung der Umfließung per float (left oder right), sowie die Abstände zum Text mit Werten in margin angegeben.
vertical-align: text top; lässt das Bild oben bündig mit dem Text abschließen, falls gewünscht.
Hier eine Beispiel-CSS-Anweisung für alle, die es ausprobieren möchten:
div.bild-umflossen {
float: left;
width: 20%;
margin-right: 1em;
margin-bottom: 1em;
vertical-align: text-top;
}
Wenn man zu große und zu viele Bilder hintereinander umfließen lässt, kann das zu unschönen Löchern im Text führen. Daher eignet sich die Funktion am besten für kleine Bilder, Vignetten oder Ikons.
Ganzseitige Bilder
Nicht alle eReader erlauben ganzseitige Bilder. Selbst bei Covern, die ganzseitig angelegt sind, gibt es meistens eine weiße Kante drumrum.
Die bestmögliche Annäherung an eine Ganzseitigkeit kann man erreichen, indem man das entsprechende Bild in ein separates XHTML-Dokument setzt.
Im <head> wird hier nicht auf das CSS verwiesen. Dafür gibt es eine alternative Inline-Anweisung:
<style type="text/css">
body {margin: 0px; padding: 0px; border-width: 0;}
@page {margin: 0; padding: 0; border-width: 0; }
img {height: 100%;}
div.ganzseitig {text-align: center;}
</style>
</head>
<body>
<div class=„ganzseitig>src="../Images/XYZ.jpg"/>
</body>
Bildlegenden
Bildlegenden sollten sich typografisch vom Haupttext unterscheiden, damit es nicht zu einer Verwirrung des Lesers kommt.
Der Abstand zum Haupttext muss so groß gewählt werden, dass sich die Legende eindeutig abhebt.
Ich verwende gerne eine etwas kleinere Schriftgröße mit font-size: smaller; die fett gesetzt ist – manchmal auch mit einer anderen Schriftart.
Auch der Zeilenabstand line-height muss evtl. an die kleinere oder andere Schrift angepasst werden.
Das Bild und die Bildunterschrift sind zwei Elemente, die auf jeden Fall zusammengehalten werden sollen, damit das Bild nicht manchmal am Ende der Seite steht und die Bildbeschreibung oben auf der nächsten Seite.
Dazu wird das Bild plus Bildunterschrift auch hier in einen <div>-Container eingebettet. Das div benötigt die Anweisung display: inline-block, damit die Elemente zusammengehalten werden.
Falls das Bild sowie die Bildunterschrift zentriert sein sollen, kommt alles zusammen in die div-Anweisung.
Das Ganze könnte nun z.B. so aussehen:
div.bild-zentriert {
text-align: center !important;
display: inline-block;
}
Lust auf mehr Tipps & Tricks zur eBook-Gestaltung?
Am 5. November 2016 halte ich aufgrund großer Nachfrage den Workshop „Professionell eBooks Erstellen“ in Köln ab, veranstaltet von den Bücherfrauen Köln/Bonn.
Ich freue mich auf eure Fragen und Kommentare – vielleicht inspiriert ihr mich zu einem weiteren Beitrag…
- Vernetzter und professioneller – mit der Autorenwelt - 15. November 2023
- Das Autorenprogramm der Autorenwelt - 17. Oktober 2023
- Wer oder was ist eigentlich MVB? - 12. Oktober 2023
Hallo Frau Helzle und vielen Dank für den Beitrag!
Ich benutze Calibre um ein Ebook zu erstellen. Da ich keinerlei Ahnung von HTML und CSS habe, habe ich versucht ihren Anweisungen zu folgen, um ein Bild mit einer Bildunterschrift zu verbinden, leider klappt es nicht und der Befehl „display: inline-block“ wird nun als Text dargestellt.
Hier ist der Quellcode:
{ display: inline-block; }
Ganymed-City – eigene Darstellung
display: inline-block
Können Sie mir sagen, wo der Fehler liegt und wie ich es richtig einbinde?
Vielen Dank schon einmal im Voraus!
Martin
Der Quellcode wird leider nicht vollständig dargestellt, deshalb noch einmal mit Anführungszeichen:
“ { display: inline-block; }
Ganymed-City – eigene Darstellung
display: inline-block
„
Bitte entschuldigen Sie den Dreifachkommentar. Auch mit Anführungszeichen wird der Quellcode nicht dargestellt. Können Sie mir sagen, wie ich ihn Ihnen zukommen lassen kann?
Hallo Martin!
Calibre ist für das eigenhändige Codieren nicht so gut geeignet wie das Open-Source-Programm Sigil, in dem man zwischen Code- und Vorschau-Ansicht hin- und herwechseln kann.
Eine grundlegende Ahnung von HTML und CSS ist durchaus notwendig, um ein eBook eigenhändig zu coden.
Die Webseite http://www.selfhtml.org erklärt alles zu HTML und CSS und ist ein unverzichtbares Nachschlagewerk .
Das Bild und die Bildunterschrift werden in einen -Container eingefasst:
Bildunterschrift
Im CSS legt man eine Regel für die Klasse „bild-zentriert“ (oder wie auch immer du sie nennen möchtest – der gleiche Name muss im HTML verwendet werden) an:
div.bild-zentriert {
display: inline-block;
}
Wichtig bei CSS-Anweisungen:
– nach dem Namen öffnet sich die geschweifte Klammer, am Ende der Anweisung wird sie geschlossen
– jede einzelne Zuweisung muss mit einem Semikolon abgeschlossen werden.
Bei Problemen mit der richtigen Übertragung von Quellcode hilft immer ein Screenshot!
Viel Erfolg bei deiner Umsetzung!
Ingeborg
Vielen Dank für die Antwort und den Link!
Da bleibt mir wohl nichts anderes übrig, als mich intensiv mit HTML zu befassen oder das mit den Bildern im ebook sein zu lassen :-/
Ich bekomme es ja leider nicht einmal hin, den Befehl „max-width: 100%;“ (in geschweiften Klammern) richtig einzubinden…
Vielen lieben Dank für den wertvollen Beitrag!
Prima Tipp.