Bilder umfließen

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

Unter Bilder und Kästen mit Text umfließen wurden Bilder und Kästen, die mit Text umflossen werden sollen, bereits vorbereitet. In dieser Weiterverarbeitung erfahren Sie, welche Codeänderungen noch vorgenommen werden müssen.

In der entsprechenden HTML-Datei des Kapitels suchen wir nun die Stelle mit unserem Bild. Der Code sollte in etwa wie folgt aussehen:

<div class="UMFLIESSEN leftFloat">
   <div class="UMFLIESSEN">
      <p class="para-style-override-2"><img width="109" height="204" src="images/125px-Katana-_Klinge_fmt.jpeg" alt="125px-Katana-_Klinge.jpg"/></p>
   </div>
   <div class="UMFLIESSEN">
      <p class="impressum para-style-override-3"><span>Querschnitt durch die Klinge eines Katana.</span></p>
   </div>
</div>

In erster Hinsicht ist vor allem die Zeile <div class="UMFLIESSEN leftFloat"> interessant, da Sie hier die Möglichkeit haben, Ihr Bild entweder an der linken oder rechten Seite der Textpassage zu positionieren. Standardmäßig setzt InDesign das Bild auf die linke Seite. Wenn Sie den Code aber auf <div class="UMFLIESSEN rightFloat"> umändern, wird das Bild an die rechte Position vom Text gesetzt. Anders als in InDesign haben Sie hier nur die Auswahl zwischen links und rechts. Mit dem ePub3-Standard und HTML5 entsteht aber die Möglichkeit, die Position frei zu wählen.

Bild links vom Text positionieren

Abbildung: Durch den Code <div class="UMFLIESSEN leftFloat"> ist das Bild links positioniert.

Bild rechts vom Text positionieren

Abbildung: Durch den Code <div class="UMFLIESSEN rightFloat"> ist das Bild rechts positioniert.

Schaut man sich das Resultat an, fällt auf, dass die Legende zu nahe am Text steht. Um dies zu ändern, wechseln Sie mit Ihrem Editor zu der CSS-Datei (template.css). Ganz am Ende finden Sie den Namen Ihres Objektformates, das der Gruppe und damit auch dem Textrahmen mit der Legende in InDesign zugewiesen wurde, wieder (hier: UMFLIESSEN).

div.UMFLIESSEN {
}

In der CSS-Regel können Sie nun die Breite einer unsichtbaren Fläche angeben, in der sich das Bild und die Legende befinden. Dies erreichen Sie mit dem Code width: [Maße]. Sie können dieser unsichtbaren Fläche auch noch eine Konturenführung geben, indem Sie den Code margin: [Wert Oben] [Wert Rechts] [Wert Unten] [Wert Links] einfügen. Diese Einstellungen betreffen jedes Objekt, dem das Objektformat zugewiesen wurde. Ihre CSS-Datei sieht dann etwa wie folgt aus:

div.UMFLIESSEN {
  width: 150px;
  margin: 3px 12px 12px 0;
}

fertiges Resultat: Bild umfließen

Abbildung: Fertiges Resultat - Bild umfließen.

  

<< 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