Zum Lesen von ePubs mag ich iBooks auf dem iPad als auch auf dem Mac, sehr gerne. Als Hersteller von E-Books hat es mich allerdings schon einiges an Nerven gekostet, da u.a. die Bilder anders gehandhabt werden als es bei anderen eReadern oder Webbrowsern der Fall ist. Ich möchte meine Bilder so sehen wie ich diese im CSS definiere. Doch genau dieser Punkt ist nicht so einfach in iBooks realisierbar. Insbesonders nicht, wenn die anderen eReader genau das Gleiche darstellen sollen.
Hier mal ein Beispiel:
Im CSS wurde jedes Bild so eingestellt, dass es den gesamten Satzspiegel (oder „Viewport“ um es in Websprache zu formulieren) in der Breite ausfüllen soll (width: 100%;). Wie man aber sehen kann, werden die kleineren Bilder in realer Größe dargestellt. Hier kommt die erste (undokumentierte) Regel von iBooks zum Vorschein. Ich würde die Regel folgend beschreiben:
Jedes Bild, was von seinen Pixelabmessungen her kleiner ist als der gerade gezeigte Satzspiegel (Viewport), wird in Originalgröße dargestellt. Die Standard CSS-Eigenschaft für Breitenangaben wird dabei ignoriert.
Hinzu kommt noch eine weitere iBooks spezifische Regel:
Um Bildgrößen in iBooks über CSS zu steuern, muss das Bild-Element (img) mit einem div-Container im (X)HTML ummantelt sein.
Dieser Umstand verlangt es die Bilder in spezieller Form und Struktur zu definieren, welche über die normalen ePub-Angaben hinausgehen. Und wer meint, InDesign würde dies richtig handhaben, der irrt. Zwar setzt InDesign CC 2014.1 mittlerweile die Bilder einigermaßen richtig um. Ein Fehler im CSS (Details: https://yves-apel.eu/epub-3/indesign-2-kindle-bilgroessenproblem-geloest) verursacht allerdings noch Probleme bei der Konvertierung zu Kindle oder in der Darstellung bei ADE 4.0.x.
Um es (derzeit) richtig zu machen, hier mal die Definition von HTML und CSS für die Bilder:
<div class="position-abstaende"> <div class="groesse"> <img class="bilder" src="image/bild-in-ibooks.png" alt="" /> </div> </div>
Und im CSS wäre es dann:
.position-abstaende {
margin:6px 0;
text-align:left;
}
.groesse {
display:inline-block;
overflow:hidden;
width:100%;
}
img.bilder {
min-width:100%;
width:100%;
}
Nicht wie von Apple vorgegeben, muss das Bild mit einem Container ummantelt sein. Sondern es bedarf zwei div-Container, damit es auch in anderen eReadern keine Probleme gibt. Die Struktur und die Eigenschaften bestehen dabei aus drei Teilen:
- .position-abstaende bildet dabei den äußeren Container und enthält die CSS-Eigenschaften für Abstände und die horizontale Positionierung des Bildes.
- .groesse ist der innere Container und entscheidet über die Darstellungsgröße des Bildes. Soll eine Kontur enthalten sein, kann diese Eigenschaft auch hier definiert werden. „display:inline-block“ ist eine Pflichtangabe. „overflow:hidden“ ist Optional und muss nicht zwingend enthalten sein.
- img.bilder ist der Kern und definiert die Standardwerte für die Bilder. „width:100%“ sollte immer enthalten sein. Jedoch bitte nicht in Kombination mit „height:100%“ verwenden. Sonst kann es zu ungewollten Bildverformungen kommen. „min-width:100%“ ist der kleine Zaubertrick um iBooks immer dazu zu zwingen die CSS-Angaben zu respektieren, egal welche Pixelabmessungen das Bild hat!
Diese Klassennamen und die Werte der Eigenschaften für die div-Container (ausser bei img.klasse) können natürlich frei definiert werden. So klappt es dann auch mit den CSS-Angaben bei iBooks und auch die meisten eReader können die Bilder, wie definiert, darstellen.
Lediglich mit der Auflösung muss aufgepasst werden. iBooks stellt zu kleine Bilder nicht umsonst in realer Größe dar. Damit wird von iBooks verhindert, dass die Bilder vom eReader hochgerechnet und wie hier im Beispiel, schwammig dargestellt werden. Sind die Bilder allerdings zu hoch aufgelöst geht auch die Dateigröße beträchtlich in die Höhe bzw. kann die Gesamtpixelzahl des Bildes die erlaubte Grenze überschreiten. Es muss also ein gutes Gleichgewicht zwischen Auflösung und Dateigröße gefunden werden.