Ingeborg Helzle gibt in diesem zweiteiligen Expertentipp ihre Erfahrungen rund um Bildern in eBooks weiter. Hier erklärte die erfahrene eBook-Herstellerin, wie ihr Bilder im ePub formatieren könnt.
Bilddekoration
Bilder können mit Rahmen versehen werden. Im CSS wird der entsprechenden -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
-Element. Laut SelfHTML-Wiki dient ein
folgendem: „Das
-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.
bedeutet division, etwa Abteilung oder Bereich.“
Standardmäßig werden Bilder linksbündig angezeigt. innerhalb des
-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
-Element. Die
-Regel im CSS lautet:
div.bild-zentriert {text-align: center !important;}
Im HTML wird das Bild anschließend mit dieser CSS-Regel in einen
-Container gepackt:
![]()
Für die barrierefreie Alternative nutzt man die Zentrieren-Funktion von Sigil (Formatierung → Zentrieren). Damit wird die Formatanweisung inline im HTML angelegt:
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
-Element umgeben werden.
In dieser
-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 wird hier nicht auf das CSS verwiesen. Dafür gibt es eine alternative Inline-Anweisung:
src=“../Images/XYZ.jpg“/>
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
-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…
Ähnliche Beiträge
Du möchtest Grafiken schwarz-weiß drucken lassen und keine Farbseiten angeben? Lege deine Grafiken als Graustufen an. So geht’s!
Wir haben für euch unsere besten Weihnachtstipps gesammelt! Lasst euch inspirieren von Plätzchenrezepten, Geschenkverpackungen und mehr…
Do you want to publish your print book with tolino media? This article gives you a brief overview over our service and some useful hints.
ReCaptcha
Um das Formular ausfüllen zu können, musst Du die Verwendung von Recaptcha erlauben.