Beispiele, Listings und Tastatureingaben

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

Auch Beispiele, Listings (Code-Beispiele) und so genannte Tastatureingaben sollten semantisch strukturiert werden. Alle hierfür gedachten Elemente <samp>, <pre> bzw. <code> sowie <kbd> sind strukturell inline, können aber – in einen entsprechenden Container (<div> oder <p>) eingebettet – Blockcharakter haben. Auch hier unterscheiden sich DTBook und XHTML nicht.

Zunächst zu Beispielen, die keine Code-Beispiele sind und daher mit <samp> ("sample") gekennzeichnet werden:

<p><strong>samp</strong>: Das Ziel des Urheberschutzes wird in § 1 des Urhebergesetzes wie folgt beschrieben:</p>
<p><samp><strong>§ 1 Urhebergesetz</strong><br/> Die Urheber von Werken der Literatur, Wissenschaft und Kunst genießen für ihre Werke Schutz nach Maßgabe dieses Gesetzes.</samp></p> 

Code-Beispiel: Einfache Beispiel-Struktur in XHTML/DTBook

Das Element für Tastatureingabe <kbd> ("keyboard") dient für die Darstellung von Texten, wie sie tatsächlich einzutippen sind oder auch für einzelne Tasten selbst.

Code-Beispiele sollten in der Regel zwecks besserer Lesbarkeit den Whitespace (Leerzeichen, Tabulatoren und Zeilenumbrüche) erhalten sowie in einer Monospace-Schrift dargestellt werden, damit die Darstellung der eines Editors gleicht. Um dies zu erreichen, gibt es in XHTML das Blockelement <pre> ("preformatted"), das vorformatierte Texte kennzeichnet. Die Semantik eines Codebeispiels wird dann zusätzlich durch das Inline-Element <code> markiert.

<p><strong>Code</strong>: Die folgende Routine schreibt die Batchdatei, die das XSLT-Skript, das die OPF schreibt, ausführt:</p>
<pre>
  <code>Sub start_1_opf()
    Call initPfadParameter
    myTempFN = SKRIPT_PATH &amp; "\epubstarter-1-opf.bat"
    myBatchFileText = "cd " &amp; SKRIPT_PATH &amp; vbCrLf _     
    &amp; JAVA_PARAMETER &amp; " " &amp; SAXON_PATH & " " _      
    &amp; SOURCE_PATH &amp; "\" &amp; SOURCE_FILE & " " _      
    &amp; SKRIPT_PATH &amp; "\" &amp; SKRIPT_OPF
    ' temp. Batchdatei schreiben
    Open myTempFN For Output As #1
    Print #1, myBatchFileText
    Close #1
    ' Batchdatei ausführen
    Debug.Print myTempFN; " --> "; Shell(myTempFN, vbMaximizedFocus)
  End Sub</code>
</pre> 

Code-Beispiel: Code-Beispiel mit vorformatiertem Text in XHTML

In gewisser Weise ist XHTML in dieser Hinsicht redundant und unsauber bezüglich der Trennung von Struktur (<code>) und Layout (<pre>). Denn an sich würde auch das semantische Element <code> allein genügen, da das Stylesheet die Darstellung in Monospace-Schrift (in CSS über die Eigenschaft font-family) gewährleisten kann. Dies dürfte der Grund sein, warum DTBook auf die separate Auszeichnung des vorformatierten Textes verzichtet.

Code-Beispiele sind also innerhalb von OPS leicht zu kodieren, allerdings ist die Anzeige der häufig längeren Codezeilen nicht ganz einfach. Die zentrale Frage ist, ob zu lange Zeilen umbrechen dürfen, was in normalen Blockelementen ja als selbstverständlich gilt. Hier stoßen wir an eine momentan noch existierende Grenze der Darstellung, zumindest bei den aktuellen Readern und Lesegeräten, die häufig (noch) über keine horizontale Scrollmöglichkeit verfügen.

Die möglichen Verbesserungsansätze sind daher im Moment:

  1. Dateneingriff: Vorformatierung der Codebeispiele über Zeilenumbrüche und Leerzeichen so, dass alle Zeilen insgesamt kürzer werden. Hinweis: das früher in HTML mögliche Attribut width von <pre> existiert in XHTML nicht mehr!

  2. Optimierung des CSS-Stylesheets: Verkleinerte Schriftgröße für Codebeispiele oder Übersteuerung des Umbruchverhaltens über die Eigenschaft white-space.

Den letztgenannten Ansatz wollen wir kurz verfolgen. Die CSS-Eigenschaft white-space kennt die folgenden Werte:

  • normal: Umbruchverhalten wie bei allen üblichen Absätzen. Eine Zeile wird damit automatisch umbrochen.

  • pre: Alle Umbrüche bleiben so erhalten, wie sie in den Daten vorliegen, also vom ursprünglichen Codeeditor geschrieben wurden. Damit entspricht dieser Wert eigentlich dem üblichen Verhalten des Elements <pre> in XHTML.

  • pre-wrap: Wie pre, jedoch erfolgt ein Umbruch, wenn die Breite zur Anzeige der Zeile nicht ausreicht.

  • nowrap: Es erfolgt kein automatischer Umbruch (außer es werden per <br/> künstlich Umbrüche eingefügt).

Diese Möglichkeiten überprüfen wir mittels des folgenden Test-CSS-Stylesheets. Das <code>-Element erhält zu diesem Zweck jeweils ein Attribut class mit den in dem CSS genannten Bezeichnungen, also beispielsweise für den Fall white-space: pre-wrap.

<code class="white-space_pre-wrap">Sub start_1_opf()
   Call initPfadParameter
   myTempFN = SKRIPT_PATH &amp; "\epubstarter-1-opf.bat"
   myBatchFileText = "cd " &amp; SKRIPT_PATH &amp; vbCrLf _    
    &amp; JAVA_PARAMETER &amp; " " &amp; SAXON_PATH & " " _    
    &amp; SOURCE_PATH &amp; "\" & SOURCE_FILE &amp; " " _
   &amp; SKRIPT_PATH &amp; "\" & SKRIPT_OPF
   ' temp. Batchdatei schreiben
   Open myTempFN For Output As #1
   Print #1, myBatchFileText
   Close #1
   ' Batchdatei ausführen
   Debug.Print myTempFN; " --> "; Shell(myTempFN, vbMaximizedFocus)
 End Sub</code> 

Code-Beispiel: Code-Beispiel mit Belegung des class-Attributs innerhalb von <code>

Ein entsprechendes CSS-Stylesheet, das die genannten white-space-Varianten formatiert, könnte dann wie folgt aussehen:

code {                                        ①
 display: inline;
 font-family: monospace;
}
code.white-space_pre {                        ②
 display: inline;
 font-family: monospace;
 white-space: pre;
}
code.white-space_pre-wrap {                   ③
 display: inline;
 font-family: monospace;
 white-space: pre;
}
code.white-space_nowrap {                     ④
 display: inline;
 font-family: monospace;
 white-space: nowrap;
}
code.white-space_normal {                     ⑤
 display: inline;
 font-family: courier, verdana, arial, monospace;
 white-space: normal;
} 

Code-Beispiel: CSS-Stylesheet mit der Eigenschaft white-space

Betrachten wir zunächst den Fall ① ohne die CSS-Eigenschaft white-space. Das CSS-Stylesheet schaltet lediglich über font-family den Monospace-Font ein:

Code-Beispiel ohne CSS-Eigenschaft white-space

Abbildung: Code-Beispiel ohne CSS-Eigenschaft white-space

Ergebnis: Alle Einrückungen sind verschwunden, ebenso wird der Code wie erwartet automatisch umbrochen. Das Ergebnis ist kaum noch lesbar.

Nun zum Fall ②, der zusätzlich die vorformatierte Eigenschaft white-space: pre erhält (siehe die beiden folgenden Abbildungen).

Hier sieht das Code-Beispiel wie im Editor aus. Alle Einrückungen sind vorhanden, ebenso die Zeilenumbrüche. Allerdings schneidet der Reader die Zeilen rechts ab. Bei verkleinerter Schrift im Reader und nicht zu langen Zeilen ist das noch akzeptabel, wenn auch nicht optimal.

Code-Beispiel mit CSS-Eigenschaft white-space: pre (Adobe Digital Editions)

Code-Beispiel mit CSS-Eigenschaft white-space: pre (iBooks)

Abbildungen: Code-Beispiel mit CSS-Eigenschaft white-space: pre (Adobe Digital Editions bzw. iBooks)

Sehr ähnlich stellt sich Fall ③ dar, der die Eigenschaft white-space: pre-wrap verwendet (siehe die beiden folgenden Abbildungen). Die (Erst)Einrückung der Codezeile bleibt bestehen, nun werden zu lange Zeilen jedoch umbrochen.

Code-Beispiel mit CSS-Eigenschaft white-space: pre-wrap (Adobe Digital Editions)

Code-Beispiel mit CSS-Eigenschaft white-space: pre-wrap (iBooks)

Abbildungen: Code-Beispiel mit CSS-Eigenschaft white-space: pre-wrap (Adobe Digital Editions bzw. iBooks)

Den Fall ④ überspringen wir und prüfen stattdessen mit Fall ⑤, was geschieht, wenn zwar automatisch umbrochen wird, aber zusätzlich noch die Zeilenenden im OPS mittels <br/> markiert werden.

<p>
  <code class="white-space_normal">Sub start_1_opf()<br/>
  Call initPfadParameter<br/>
  <br/>
  myTempFN = SKRIPT_PATH &amp; "\epubstarter-1-opf.bat"<br/>
  <br/>
  myBatchFileText = "cd " &amp; SKRIPT_PATH &amp; vbCrLf _<br/>   
   &amp; JAVA_PARAMETER & " " &amp; SAXON_PATH &amp; " " _<br/>   
   &amp; SOURCE_PATH &amp; "\" &amp; SOURCE_FILE &amp; " " _<br/>   
   &amp; SKRIPT_PATH &amp; "\" &amp; SKRIPT_OPF<br/>
  <br/>
  ' temp. Batchdatei schreiben<br/>
  Open myTempFN For Output As #1<br/>
  Print #1, myBatchFileText<br/>
  Close #1<br/>
  <br/>
  ' Batchdatei ausführen<br/>
  Debug.Print myTempFN; " --> "; Shell(myTempFN, vbMaximizedFocus)<br/>
End Sub</code>
</p> 

Code-Beispiel: Code-Beispiel mit harten Zeilenumbrüchen

Code-Beispiel mit CSS-Eigenschaft white-space: normal + br (Adobe Digital Editions)

Code-Beispiel mit CSS-Eigenschaft white-space: normal + br (iBooks)

Abbildungen: Code-Beispiel mit CSS-Eigenschaft white-space: normal mit zusätzlichen <br/> (Adobe Digital Editions bzw. iBooks)

Das Ergebnis ähnelt wie zu erwarten dem Fall ①, jedoch bleiben die Zeilenanfänge stehen, was die Lesbarkeit wieder etwas verbessert. Die Einrückungen fehlen jedoch nach wie vor.

DTBook bietet schließlich noch eine Alternative zu der recht hässlichen Lösung mit manuellen Zeilenumbrüchen. Semantisch naheliegender ist die Verwendung von <line> für die einzelne Codezeile. Allerdings lässt das Inhaltsmodell von <line> nur inline <code>-Elemente zu:

<linegroup>
  <line><code>Sub start_1_opf()</code></line>
  <line><code> Call initPfadParameter</code></line>
  <line><code> myTempFN = SKRIPT_PATH &amp; "\epubstarter-1-opf.bat"</code></line>
  <line><code> myBatchFileText = "cd " &amp; SKRIPT_PATH & vbCrLf _</code></line>
  <line><code> &amp; JAVA_PARAMETER &amp; " " &amp; SAXON_PATH & " " _</code></line>
  <line><code> &amp; SOURCE_PATH &amp; "\" &amp; SOURCE_FILE & " " _</code></line>
  <line><code> &amp; SKRIPT_PATH &amp; "\" &amp; SKRIPT_OPF</code></line>
  <line><code> ' temp. Batchdatei schreiben</code></line>
  <line><code> Open myTempFN For Output As #1</code></line>
  <line><code> Print #1, myBatchFileText</code></line>
  <line><code> Close #1</code></line>
  <line><code> ' Batchdatei ausführen</code></line>
  <line><code> Debug.Print myTempFN; " --> "; Shell(myTempFN, vbMaximizedFocus)</code></line>
  <line><code>End Sub</code></line>
</linegroup> 

Code-Beispiel: Code-Beispiel mit <line>/<line-group> in DTBook

Insgesamt gibt es also keine ganz optimale Lösung. Strukturell am saubersten erscheint Fall ② (white-space: pre) bzw. ③ (white-space: pre-wrap). Es bleibt zu hoffen, dass die Reader künftig noch eine verbesserte Zoomfunktion erhalten.

   

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