Jan 15

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

Philosophy, XML 15. 01. 2012

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;
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"/>
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>

3 comments so far...

  • Michael Müller-Hillebrand Said on Januar 16th, 2012 at 09:38:

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

  • Jörg Oyen Said on Januar 16th, 2012 at 09:58:

    Top Aufstellung – direkt den Teilbereich EBO + EDU vom Publishing Metro Fahrplan aktualisieren -> http://publishing-market.com/ebo.php

  • gregor Said on Januar 16th, 2012 at 10:36:

    Hallo Michael,

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

leave a reply