Positionierte Grafiken

(Auszug aus "E-Books mit ePUB ─ Von Word zum E-Book mit XML" von Dr. Victor Wang)

Grafiken sind im gedruckten Buch auch ein wichtiges typografisches Mittel der Gestaltung. Bei Werken mit vielen Grafiken wird in der Regel ein Layout gewählt, das Text- und Bildinhalte auf einer Seite arrangiert. Diese Möglichkeiten sind in OPS – wie in allen reflowable E-Book-Formaten – nicht ohne Weiteres gegeben. Wir wollen jedoch den Fall einer Grafik betrachten, die rechts steht, während der Text sie von links umfließt. Auch diese Lösung verwendet wieder die float-Eigenschaft von CSS. Wir nehmen an, dass die folgende XHTML-Datei vorliegt:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <title>Abbildungen und Grafiken XHTML</title>
  </head>
  <body>
    <div class="Gliederungsebene">
      <h1>Positionierte Grafik (über CSS float: right)</h1>
      <p><strong>xxxii</strong>. Ein <em>Kreis</em> ist eine ebene, von einer gebogenen Linie (die <em>Umfang</em> heißt) umfassten Figur mit der Eigenschaft, dass alle von einem innerhalb der Figur gelegenen Punkt bis zur Umfangslinie laufenden Strecken einander gleich sind. Dieser Punkt heißt <em>Mittelpunkt</em>.</p>
      <div>
        <img src="img/kreis-euklid.jpg" style="float: right; clear: right; width: 30%;" alt="Euklids Kreisdefinition" width="100"/>
      </div>
      <p><strong>xxxiii</strong>. Der <em>Radius</em> eines Kreises jeder beliebigen Strecke vom Mittelpunkt bis zur Umfangslinie, beispielsweise <em>CD</em>.</p>
      <p><strong>xxxiv</strong>. Der <em>Durchmesser</em> eines Kreises ist die Strecke, die durch den Mittelpunkt geht und auf beiden Seiten die Umfangslinie schneidet, beispielsweise <em>AB</em>.</p>
      <p><small>Aus der Definition des Kreises folgt sofort, dass der Weg eines beweglichen Punktes in der Ebene, der zu einem fixen Punkt eine konstante Entfernung hat, ein Kreis ist; ebenso folgt daraus, dass jeder Punkt <em>P</em> in der Ebene innerhalb, außerhalb oder auf der Umfangslinie eines Kreises liegt, abhängig davon, ob seine Entfernung zum Mittelpunkt <em>kleiner</em> als, <em>größer</em> als oder <em>gleich</em> dem Radius ist.</small></p>
      <p class="Quelle">Quelle: <cite>Euklid, Elemente</cite>, 1. Buch, Definitionen (Text und Grafik nach http://www.gutenberg.org/etext/21076)</p>
    </div>
  </body>
</html> 

Code-Beispiel: Positionierte Grafik in XHTML

Die zugehörige Stylesheet-Anweisung steht im oben genannten Beispiel im style-Attribut und besagt, dass die Grafik auf 30% der Breite ausgegeben und rechtsstehend umflossen werden soll.

Positionierte Grafik in XHTML (Adobe Digital Editions)

Positionierte Grafik in XHTML (iBooks)

Abbildungen: Positionierte Grafik in XHTML ((Adobe Digital Editions bzw. iBooks)

   

<< zurück vor >>

 

 

 

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

Copyright © mitp 2011
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "E-Books mit ePUB" 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.

Verlagsgruppe Hüthig Jehle Rehm GmbH, Im Weiher 10, 69121 Heidelberg, kundenbetreuung(at)hjr-verlag.de