10 Schritte zu deiner EPUB

10 Schritte zu deiner EPUB #6 Links und Anchor

29. März 2017

Heute soll es also darum gehen, wie Links und Anchor in einem E-Book erstellt werden.

Im Gegensatz zum gedruckten Buch, gibt es in der digitalen Buchwelt natürlich auch die Möglichkeit, einzelne Textstellen miteinander zu verlinken. Ich kann mich z.B. vom Inhaltsverzeichnis gleich an die gewünschte Stelle klicken.

Genauso geht es mit Fußnoten, Anmerkungen oder bibliografischen Angaben, die oft am Ende eines Titels untergebracht sind. Ich kann direkt zur Fußnote klicken und wieder an die Textstelle zurück.

Wie gesagt, ist das vielleicht in einem Roman nicht so bedeutsam wie in wissenschaftlichen Texten und Fachbüchern. Aber auch in literarischen Texten wie Anthologien, Gedichtbänden, Textsammlungen gibt es am Ende vielleicht biographische Angaben zu den einzelnen Autoren, Rezeptionsgeschichten etc. Da kann es sehr angenehm sein, die gesuchte Stelle mit einem Klick direkt aufzufinden.

Das Inhaltsverzeichnis

Jedes E-Book hat ein in die EPUB eingebautes Inhaltsverzeichnis, die sogenannte .ncx Datei. Deren Aufbau und Funktion habe ich in einem der vorherigen Beiträge beschrieben.

Will man seinem Buch ein eigenes Inhaltsverzeichnis voranstellen, wird es in einer eigenen xhtml-Datei angelegt. Diese Datei muss natürlich, wie alle Objekte einer EPUB, in der .opf-Datei verzeichnet werden. Hier gelb markiert.

links in .opf

Wie die Datei genannt wird, spielt keine Rolle. Ich nenne sie sec_000_inhaltsverzeichnis.xhtml.

Und so sieht die Datei aus, wenn man sie in einem Text-Editor anschaut.

 

Der <body></body> Block, also der eigentliche Inhalt der Datei, besteht einfach aus einer Reihe von Links, die auf die einzelnen Kapitel im Buch verweisen. Und so ist der Code für einen funktionierenden Link innerhalb des Buches aufgebaut:

<p class=„toc“><a href=„sec_006_kapitel-2.xhtml“>Kapitel 2</a></p>

  • Zuerst haben wir den bekannten <p> tag, für einen neuen Abschnitt.
  • Er ist erweitert um den styling Hinweis class=„toc“. Ich habe also in der CSS die Regeln für eine Klasse mit dem Namen .toc (für table of content) eingefügt, mit der das Aussehen des Textes des Inhaltsverzeichnisses bestimmt wird.
  • Dann folgt ein <a> tag. Er erzeugt einen Hyperlink zu einer anderen Textstelle, einer anderen Datei, Webseite, Mailadresse etc.
  • Das Attribut href gibt dann das gewünschte Verweisziel an, das hinter einem Gleichheitszeichen zwischen geraden Anführungszeichen folgt. „sec_006_kapitel-2.xhtml“. In diesem Falle ist es die xhtml Datei mit dem 2. Kapitel.
  • Auf die spitze Klammer folgt der anklickbare Text, der auf dem Lesegerät erscheint, nämlich: Kapitel 2.
  • Danach werden die Tags wie immer von innen nach aussen geschlossen. Also zunächst </a> dann </p>.

Im E-Book sieht das ganze dann – je nach Lesegerät – dann etwa so aus.

Nicht sehr schön mit diesen blauen unterstrichenen Links.

Styling mit Pseudoklassen

Um etwas mehr Kontrolle über das Aussehen der Links zu bekommen habe ich in der CSS sogenannte Pseudoklassen für die Interaktion mit Links eingefügt. Ich habe hier lediglich die Farbe auf schwarz gestellt und eine Unterstreichungsfunktion eingefügt, die aktiviert wird, wenn der Link mit dem Cursor oder Tasten angewählt wird.

Sie sehen so aus:

a:link {color: #000000; TEXT-DECORATION: none}
a:focus {color: #000000; TEXT-DECORATION: none}
a:active {color: #000000; TEXT-DECORATION: none}
a:hover {color: #000000; TEXT-DECORATION: underline}
a:visited {color: #000000; TEXT-DECORATION: none}

Natürlich sieht das Ergebnis auf den verschiedenen Lesegeräten wieder unterschiedlich aus.

Externe Links

Es ist auch möglich, Links zu externen Quellen zu legen. Will man auf Webseiten oder SocialMedia Plattformen oder ähnliche Seiten außerhalb des E-Books verlinken, benutzt man wieder den <a>Tag für Links und fügt die URL der entsprechenden Seite ein.

<p><a href=„http://www.redbug-books.com“>www.redbug-books.com</a></p>

Hier muss man die Richtlinien der einzelnen Plattformen beachten. Amazon sieht es beispielsweise nicht so gerne wenn man zum iBook- Store verlinkt …

Inhaltsverzeichnisse mit Gliederung

In Fachbüchern kommt es häufig vor, dass ein Kapitel in viele Unterkapitel, Paragrafen und Abschnitten gegliedert ist. Hier möchte ich eine Möglichkeit zeigen, wie man dafür ein verschachteltes Inhaltsverzeichnis erstellen kann.

Nehmen wir an, ich möchte in meinem ersten Kapitel noch einige Unterabschnitte einfügen und im Inhaltsverzeichnis aufführen. Dazu nutze ich die Möglichkeit, mit HTML Listen zu erstellen. Mehr zu HTML-Listen erfahrt ihr hier.

<p class=“toc“><a href=“sec_005_kapitel-1.xhtml“>Kapitel 1</a></p>
<ul>
<li>Erster Zwischentitel</li>
<li>Zweiter Zwischentitel</li>
<li>Dritter Zwischentitel</li>
</ul>
<p class=“toc“><a href=“sec_006_kapitel-2.xhtml“>Kapitel 2</a></p>

Auf der HTML-Seite mit dem Inhaltsverzeichnis öffne ich mit dem <ul> Tag eine sogenannte ungeordnete Liste. Mit <li> wird dann ein neuer Punkt auf der Liste eingeleitet. Nicht vergessen die Tags in der richtigen Reihenfolge zu schließen.

Um die Liste zu gestalten, füge ich in der CSS folgende Regel ein.

ul {
list-style:none;
line-height: 1.7em}

Dabei kann ich mit list-style angeben, ob und welche Art von Aufzählungszeichen eingefügt werden sollen. Wenn ich keine Aufzählungszeichen möchte, trage ich hier „none“ ein.

Anchor

Wenn ich nicht auf den Kapitelanfang, sondern auf eine bestimmte Stelle innerhalb eines Kapitels, beispielsweise auf den Zwischentitel verweisen will, kann ich jeden tag in einen sogenannten anchor verwandeln. Ich füge dem tag dazu mit dem id Attribut eine eindeutige Adresse zu.

<p class=“unterabschnitt“ id=“zwischentitel_1″>Erster Zwischentitel</p>

Wichtig: eine id kann nur einmal in einer HTML-Seite benutzt werden. (Sonst wäre es natürlich keine eindeutige Adresse mehr)

Wenn ich wie im oberen Beispiel einem Abschnitt <p> die id zwischentitel_1 gebe, kann ich genau diese Stelle mit einem <a>tag ansteuern. Dazu füge ich dem <a> link das # Zeichen und den Namen der id an.

<ul>
<li><a href=“sec_005_kapitel-1.xhtml#zwischentitel_1″>Erster Zwischentitel</a></li>
<li><a href=“sec_005_kapitel-1.xhtml#zwischentitel_2″>Zweiter Zwischentitel</a></li>
<li><a href=“sec_005_kapitel-1.xhtml#zwischentitel_3″>Dritter Zwischentitel</a></li>
</ul>

Klicke ich nun im Inhaltsverzeichnis auf „Zweiter Zwischentitel“, öffnet sich das erste Kapitel genau an der entsprechenden Stelle.

So kann ich natürlich nicht nur Unterabschnitte verlinken, sondern auch Bilder, Fußnoten und verschiedene Textstellen untereinander.

In der nächsten Woche wird es um die Einbindung von Fotos und Bildern im E-Book gehen.

Bis dahin eine gute Woche!

Uwe

#rbpub #redbugwriting

 

 

 

 

You Might Also Like

No Comments

Leave a Reply