Das große Was ist was des EPUB- und XHTML-Exports

Beim EPUB- bzw. HTML-Export (Seit CS5.5 Datei → Export) stellt sich oft die Frage, welche Seitenobjekte und welche Formateinstellungen wie exportiert werden. Die folgende Tabelle gibt eine Übersicht über die Umsetzung in HTML-Elemente bzw. CSS-Regeln. Auffallend ist, dass der HTML und EPUB-Export manchmal zu verschiedenen Ergebnissen führen. Ich vermute, dass es noch weitere Unstimmigkeiten gibt – prinzipiell sollte meiner Ansicht das gleiche Ergebnis generiert werden. Einen entsprechenden Bug-Report habe ich bei Adobe eingereicht.

In den grau hinterlegten Zeilen finden Sie Seitenobjekte/Absätze bzw. Tabellen und deren xhtml-Umsetzung. InDesign schreibt übrigens xhtml mit ein paar HTML5 Einsprengseln – aber eigentlich kein HTML wie man anhand dem Namen der Funktion vermuten würde. In den weißen Zellen folgen dann immer die CSS-Eigenschaften für das vorhergehende Element.

Alternativ kann man sich auch die inhaltlich gleiche PDF Aufbereitung herunterladen und ausdrucken.

Ergänzungen und Korrekturen sind willkommen! Hinterlassen Sie einen Kommentar oder schicken Sie mir eine Mail!

Objekt/
InDesign-Eigenschaft		 Element/
CSS-Deklarationen		 Anmerkung
Dokument <body>
<div id="DokumentName.html">
</div>
</body>		 Ggf. Sprachattribut
xml:lang="en-US"
Ränder HTML:
body { margin: 0.5em; }
EPUB:
@page { margin : 0.5em; }		 Einstellung im Export-Dialog
Gruppen <div class="ObjectStyle"></div> Bei Gruppen ohne Objektformat class="group"
Rahmen von Bildern <div class="ObjectStyle"></div>
Bilder <img class="ObjectStyle"
width="#" height="#"
alt="file.jpg"
src="images/file.jpeg"/>		 Format wie in Objekt­exportoptionen oder Export-Dialog JPG, GIF oder PNGBei Bildrahmen ohne Objektformat class="image"
Bildausrichtung und -abstände display: block;
margin: 1em 0 2em auto;		 Bei Objektexportoptionen
Klasse img.media-#
Verankerte Bilder
mit Konturenführung		 <img class="leftFloat".../>
<img class="rightFloat".../>		 Feste CSS-Regel:.leftFloat {
float : left;
}Links/Rechts Aufteilung: Position von der Zeilenmitte.
Textabschnitte/Textrahmen <div class="ObjectStyle"></div> Objektformat des ersten Textrahmens, bei Textrahmen ohne Objektformat class="story"
Absätze <p class="ParagraphStyle"></p>Lokale Abweichungen mit
class="para-style-override-#"		 Zuweisung von <p>, <h1>,…<h6>
und/oder Klasse möglich.
Ggf. Sprachattribut xml:lang="en-US"
Ausrichtung text-align: left;
Einzug erste Zeile text-indent: 1px;
Abstände margin: 4px 5px 6px 7x; Kein Abstand: margin: 0;
Verschachteltes Zeichenformat CSS-Pseudoelement p.ParagraphStyle:first-line {} Wird nicht von allen Readern dargestellt
Weitere Formatierungen bei den Inline-Formaten
Nummerierte Liste <ol>
<li class="Absatzformat"></li></ol>		 Statische Listen mit
<li value"#">
Ggf. Sprachattribut xml:lang="en-US"
Einzug Links <ol class="List-#">
Aufzählungsliste <ul>  <li class="Absatzformat"></li>
</ul>		 Ggf. Sprachattribut xml:lang="en-US"
Einzug Links <ul class="List-#">
Abstand links <ol>/<ul> margin-left: 9px;
Abstand oben <li> margin-top: 0;
Abstand unten <li> margin-bottom: 10px;
Abstand rechts <li> margin-right: 10px;
Weitere Formatierungen wie bei Absatz oder Inline-Formaten
Inline-Formatierung <span class="CharacterStyle">
</span>
Lokale Abweichungen mit
class="char-style-override-#"		 Zuweisung von <em>, <strong>, <span> und/oder Klasse möglich.
Ggf. Sprachattribut xml:lang="en-US"
Schriftart font-family: "Schriftname"; EPUB CSS: Schriftdeklaration über
@font-face {...}
Schriftgröße font-size: 0.83em;
Fett font-weight: bold;
Kursiv font-style: italic;
Kapitälchen font-variant: small-caps;
Farbe color:#000000;
Hoch/Tiefstellung vertical-align: super;
Unterstrichen text-decoration: underline;
Durchgestrichen text-decoration: line-through;
Kapitälchen font-variant: small-caps;
Versalien text-transform: uppercase;
Harter Zeilenumbruch <br/>
Hyperlinkziele/Textanker <a id="Name des Ankers"/>  Einige Reader erwarten <a id=”Name des Ankers”></a>
Hyperlink <a href="#Name des Ankers"></a>
Tabellen <table id="table-#" class="Tabellenformat"> Feste CSS-Regel:table.Tabellenformat {
border-collapse: collapse;
border-color: #000000;
border-style: solid;
border-width: 1px;
margin-bottom: -4px;
margin-top: 4px;
}
Kopf-,
Körper-,
Fußbereich		 <thead></thead>,
<tbody></tbody>,
<tfoot></tfoot>		 Feste CSS-Regel:tbody, thead, tfoot, tr, td, th {
border-color: inherit;
border-style: inherit;
border-width: inherit;
}
Tabellenzeilen <tr></tr> Bei angewählter Option
Abwechselndes Muster Zeile
<tr class="Row-Column-#">
Flächenfarbe background-color: #D90000;
Tabellenspalten <col class="Row-Column-#" /> Erstellung nur bei angewählter Option abwechselndes Muster Spalte
Flächenfarbe background-color: #D90000;
Tabellenzellen <td>
Lokale Abweichungen mit
class="cell-style-override-#"		 Feste CSS-Regel:td {
height: 5px;
width: 10px;
}
Flächenfarbe background-color: #D90000;
Zellenversatz padding-bottom : 9px;padding-left : 6px;padding-right : 9px;padding-top : 9px; Unklare/fehlerhafte Umsetzung
Video <div class="image">  <video id="FileName.mp4" width="#" height="#" tabindex="0">    <source type="video/mp4" src="File.mp4"> </source>  </video></div>
Audio <div class="image">
<audio id="FileName.mp3" height="#" width="#" controls="controls" tabindex="0">
<source type="audio/mpeg" src="FileName.mp3"> </source>
</audio>
</div>