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>

8 Kommentare

  1. Michael Müller-Hillebrand 16. Januar 2012 um 09:38

    Wird die ID am äußersten div gegebenenfalls um Leerzeichen oder sonstige nicht für IDs gültige Zeichen »erleichtert«?

  2. Hallo Michael,

    ja, Leerzeichen etc. werden durch „-“ ersetzt. Insgesamt schreibt InDesign ziemlich sauberen Code und ich habe bis jetzt immer valides xhtml gehabt (von

  3. Hallo Gregor,
    vielleicht kannst Du in Deine (übrigens sehr gute) Liste noch Folgendes aufnehmen (CS5.5):

    »Verschachteltes Zeichenformat« eines »ParagraphStyle« (egal wie viele Zeilen da angeben wurden) wird als CSS-Pseudoelement ausgegeben mit: p.ParagraphStyle:first-line {}
    Leider nicht unbedingt readerkonform und es läuft nicht durch einige Prüfroutinen von den Distributoren-Shops …

    Hyperlinkziele/Textanker: das XML-konforme »« verstehen leider einige Reader nicht, sondern möchten gern »«. (Wann haben wir endlich mal einigermaßen konforme Reader???)
    Gruß
    Tobias

  4. Ups, automatische Link-Umwandlung … Bei Hyperlinkziel/Textanker sollte das hier stehen:
    Hyperlinkziele/Textanker: das XML-konforme »<a id=“Name des Ankers“/>« verstehen leider einige Reader nicht, sondern möchten gern »<a id=“Name des Ankers“></a>«. (Wann haben wir endlich mal einigermaßen konforme Reader???)

    (Hoffe, das klappt jetzt …)

  5. Hallo Tobias,

    vielen Dank für die Anmerkungen, habe sie gerade eingepflegt. Leider habe ich die Liste immer noch nicht mit den Neuerungen der CS6 erweitert. Das sind zwar nur Details, wäre aber trotzdem schön!

    Grüße nach Bremen,
    Gregor

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.