6. September 2016 /

GastautorIn

Bilder im ePub formatieren

Bilder im ePub formatieren

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.

Softwaretipp: Egal ob man ein exportiertes EPUB bearbeiten möchte oder ein eBook selbst kodiert, empfehle ich das Open-Source-Programm Sigil, in dem man den Code des eBooks mit WYSIWYG-Unterstützung direkt bearbeiten kann.

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:

Blogbeitrag Bildformatierung Teil2
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…

Geschrieben von

GastautorIn

Hier schreiben Gastautor*innen für euch. Unser Anspruch ist es, einen aktuellen und abwechslungsreichen Blog zu bieten. Deshalb freuen wir uns sehr, immer wieder Autor*innen für uns zu gewinnen. Denn neue Ansichten, Erfahrungen und Wissen kann man nie genug haben. Viel Freude mit unseren Gastautor*innen!

ReCaptcha

Um das Formular ausfüllen zu können, musst Du die Verwendung von Recaptcha erlauben.

Das hilft uns, SPAM zu vermeiden.
Zeige alle Services, denen du noch zustimmen musst

Ähnliche Beiträge

Melde dich für unseren Newsletter an.

Verpasse keine Neuigkeiten mehr.