Bullets durch eigene Grafik ersetzen

(Auszug aus "ePub für (In)Designer — Mit InDesign Schritt für Schritt zum E-Book" von Sascha Heck & Yves Apel)

Wenn Sie anstatt einer Aufzählung mit Bullets lieber ein eigenes spezielles Zeichen benutzen wollen, so muss dieses Zeichen im E-Reader auch angezeigt werden können. Die einzige Methode, das Zeichen sicher ins ePub zu bekommen, ist, es zu einer Grafik umzuwandeln. Dadurch erhalten wir aber keine richtige Liste mehr und die Aufzählung wird im ePub wie ein normaler Absatz mit einem <p>-Tag definiert. So haben wir zwar unser Spezialzeichen im ePub, jedoch gehen die Einzüge verloren und die Folgezeilen stehen nicht richtig bündig.

InDesign-Ausgangsbeispiel für Aufzählung mit eigenem Zeichen

Abbildung: Ausgangsbeispiel - Wir wollen eine Aufzählung mit eigenem Zeichen
wie hier in InDesign haben.

Bullets als Grafik im ePub: Zeilen nicht mehr bündig

Abbildung: Die Absätze werden als normale <p>-Tags ins HTML geschrieben,
nicht als »Unordered List«. Die Zeilen sind nicht bündig.

Sie können aber beides miteinander kombinieren: zum einen die Liste im HTML erhalten und zum anderen die Bullets durch Ihre Grafik austauschen. Dazu erstellen Sie in InDesign eine ganz normale Auflistung mit Bullets und exportieren diese zu Nicht sortierten Listen.

ePub-Export zu »Nicht sortierten Listen zuorden«

Abbildung: ePub-Export zu »Nicht sortierten Listen zuorden«.

ePub in Sigil: Aufzählung als richtige Liste

Abbildung: ePub-Datei in Sigil: Die Aufzählung erfolgt im HTML als
richtige Liste mit <li>-Einträgen.

Jedes <li>-Element hat im Beispiel die Klasse »Aufzaehlung« zugewiesen bekommen. Diese brauchen wir, um im CSS die Liste anzusprechen.

Grafik hinzufügen

Um im weiteren Verlauf die spezielle Grafik benutzen zu können, muss diese im ePub im Ordner »Images« vorhanden sein. Ist sie es noch nicht, erstellen Sie erst die Grafikdatei. Im unserem Beispiel sehen Sie ein Ornament aus der Schrift Minion. Setzen Sie das Zeichen in InDesign in einen eigenen Textrahmen und weisen Sie die gewünschte Farbe zu. Anschließend wählen Sie den Textrahmen mit dem schwarzen Pfeil an und gehen im Menü auf Schrift → In Pfade umwandeln. Dadurch erhalten Sie nachher wirklich genau nur das Zeichen ohne Weißraum.

Grafik in InDesign erstellen und dann in Pfade umwandeln

Abbildung: Grafik in InDesign erstellen und dann in Pfade umwandeln.

Noch immer mit ausgewähltem Rahmen wählen Sie jetzt Datei → Exportieren und als Dateiformat JPEG. Im erscheinenden Exportdialog gehen Sie auf Exportieren → Auswahl, um nur das ausgewählte Zeichen zu einer JPEG-Datei zu exportieren.

In Sigil können Sie nun Ihre Grafik zum Bilderordner hinzufügen, indem Sie einen Rechtsklick auf den Ordner »Images« machen und Ihr soeben in InDesign generiertes JPEG auswählen.

Sigil: Grafik hinzufügen durch Rechtsklick auf den BilderordnerAbbildung: Sigil - Grafik hinzufügen durch Rechtsklick auf den Bilderordner.

CSS-Code bearbeiten

Nachdem Sie jetzt Ihre Grafik zu Verfügung haben, können Sie die CSS-Datei anpassen. Fügen Sie folgende Zeilen hinzu:

li.Aufzaehlung {
  list-style-type: none;
  background: url('../Images/bild_liste.jpg') no-repeat top left;
  padding-left: 2.5em;
}

Nach li. kommt der Name Ihrer Klasse der Listeneinträge, die wir hier »Aufzaehlung« benannt haben.

list-style-type: none; sorgt dafür, dass die Bullets nicht mehr dargestellt werden.

Die dritte Zeile fügt unsere Grafik ein, die wir hinzugefügt haben. Zwischen den einfachen Anführungszeichen steht der Pfad zum Bild.

padding-left bezeichnet den Einzug und reguliert den Abstand zwischen Zeichen und Text.

Resultat in Adobe Digital Editions: Zeichen werden korrekt dargestellt und Zeilen laufen bündig

Abbildung: Resultat in Adobe Digital Editions - Die Zeichen werden korrekt
dargestellt und die Zeilen laufen bündig.

Die Zeichen stehen vielleicht noch nicht ganz mittig zur jeweiligen Zeile. Durch eine weitere Zeile kann auch das behoben werden. Fügen Sie die Zeile background-position hinzu:

li.Aufzaehlung {
  list-style-type: none;
  background: url('../Images/bild_liste.jpg') no-repeat top left;
  padding-left: 2.5em;
  background-position: 0em 0.3em;
}

Der erste Wert ist die horizontale, der zweite Wert die vertikale Position. Experimentieren Sie mit den Werten, bis das Zeichen so steht, wie Sie es wünschen.

Resultat in Adobe Digital Editions: die Zeichen wurden vertikal angepasst

Abbildung: Resultat in Adobe Digital Editions - Die Zeichen wurden vertikal angepasst.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema ePub & InDesign bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © dpunkt.verlag GmbH 2012
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "ePub für (In)Designer" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Wieblinger Weg 17, 69123 Heidelberg, fon 06221-14830, fax 06221-148399, hallo(at)dpunkt.de