DIY-Donnerstag, Epub Insights

Epub Insights #12 Footnotes

15. Dezember 2018

Liebe AutorInnen und SelfpublisherInnen,

Foonotes, Fussnoten. In wissenschaftlichen Werken und Sachbüchern sind sie obligatorisch, kommen aber auch gelegentlich in belletristischen Werken vor. Hier sind es oft eher Anmerkungen, die vom Autor selbst, dem Herausgeber oder dem Übersetzer eingefügt werden und meist nicht ans Ende der Seite oder des Kapitels, sondern ans Ende des gesamten Textes gestellt werden. Wie lassen sich solche Anmerkungen also in einer Epub einfügen und wie werden sie im E-Book dargestellt?

Ganz ähnlich wie bei anderen Verlinkungen auch (z.B. im Inhaltsverzeichnis) werden hier auch anchor gesetzt. Diese können an jeder Stelle eines Dokuments gesetzt werden  und können dann mit einem Link aufgerufen werden. Sie bestehen im Grunde immer aus zwei Teilen, nämlich erstens aus der Stelle, von der aus verlinkt werden soll und der Stelle, auf die verlinkt werden soll.

Die Stelle, auf die verlinkt wird, muss eine eindeutige id bekommen.

Der ausgehende Verweis auf den anchor erfolgt durch einen hashtag #.

Ein einfaches Beispiel, bei dem auf eine Anmerkung im gleichen Dokument verwiesen werden soll, wäre also:

<p><a href="#anmerkung_1">Dieses Wort soll auf eine Anmerkung im gleichen Dokument verweisen</a></p>

<p id="anmerkung_1">Hier steht die Anmerkung</p>

Steht die Anmerkung in einem anderen Dokument, auf einer Internetseite, wo auch immer, muss natürlich der entsprechende Pfad eingegeben werden. In unserem Beispiel würden die Anmerkungen in einem eigenen Dokument stehen.

<p><a href="anmerkungen.xhtml#anmerkung_1">Dieses Wort soll auf eine Anmerkung in einem anderen Dokument im gleichen Ordner verweisen</a></p>

<p id="anmerkung_1">Hier steht die Anmerkung</p>

Backlinks

Im E-Book möchte man natürlich gleich wieder an der ursprünglichen Stelle weiterlesen, sobald man die Anmerkungen gelesen hat. Dazu brauchen wir einen zweiten link, der von der Anmerkung wieder zurück verlinkt. Dazu bekommt die ursprüngliche Stelle auch eine eindeutige id. Ich nenne sie anmerkung_1_back

<p id="anmerkung_1_back"><a href="anmerkungen.xhtml#anmerkung_1">Dieses Wort soll auf eine Anmerkung in einem anderen Dokument im gleichen Ordner verweisen</a></p>

<p id="anmerkung_1"><a href="kapitel-1.xhtml#anmerkung_1_back">Hier steht die Anmerkung</a></p>

Formatierung der Links

Natürlich möchten in einem belletristischen E-Book nicht einfach mit einem Blauem Link auf eine Anmerkung hinweisen, sondern so – wie in Büchern üblich – mit einer kleinen hochgestellten Ziffer1. Dazu nutze ich den inline-tag <span>, in dem ich den anchor für den Backlink unterbringe und den tag für hochgestellten Text <sup>.

<p class="umbruch">»Die hochgestellte Ziffer<span id="anmerkung_1_back"><sup><a href="#anmerkung_1">1</a></sup></span>soll auf eine Anmerkung in einem anderen Dokument im gleichen Ordner verweisen«</p>

 

Da sich der Zeilenabstand durch eine hochgestellten Ziffer in der gleichen Schriftgröße wie der Text, vergrößert, gebe ich den hochgestellten Anmerkungsziffern eine eigene CSS Klasse.

Hier lege ich die Schrifgröße auf 0.9em, nutze wegen der besseren Sichtbarkeit ausnahmsweise einen fetten Schriftschnitt und rücke die Ziffer eine wenig vom Wort ab. Und wo ich schon einmal dabei bin, gebe ich ihr auch gleich die Red Bug Signature Farbe.

.anmerkung {
font-size: 0.9em;
font-weight: bold;
margin-left:0.2em;
color: #660000;
}

Damit die Farbe nicht durch die vorgegebenen link-settings überschrieben wird, lege ich sie in den CSS Pseudo-Klassen für Links fest.

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

Den Verweis muss ich natürlich in der html-Seite angeben.

<p class="umbruch">»Die hochgestellte Ziffer <span class="anmerkung" id="anmerkung_1_back"><sup><a href="#anmerkung_1">1</a></sup></span>soll auf eine Anmerkung in einem anderen Dokument im gleichen Ordner verweisen«</p>

Formatierung der Anmerkungen

Die Anmerkungen selbst stehen dann in einer eigenen xhtml Datei.

Für die Formatierung nutze ich eine geordnete Liste. Für den Backlink nutze ich einen nach links zeigenden Pfeil wieder in Red Bug Rot.

<ol>
<li class=“absatz“ id=“anmerkung_1″>Das ist die 1. Anmerkung.<a href=“kapitel-1.xhtml#anmerkung_1_back“><span class=“anmerkung“>&crarr;</span></a></li>
<li class=“absatz“ id=“anmerkung_2″>Das ist die 2. Anmerkung.<a href=“kapitel-4.xhtml#anmerkung_2_back><span class=“anmerkung“>&crarr;</span></a></li>
<li class=“absatz“ id=“anmerkung_3″>Das ist die 3. Anmerkung.<a href=“kapitel-7.xhtml#anmerkung_3_back“><span class=“anmerkung“>&crarr;</span></a></li>
</ol>

Das ganze sieht dann so aus.

Footnotes

Ich wünsche euch viel Spaß beim frickeln und eine schöne Adventszeit mit viel neuem Lesestoff

Uwe

You Might Also Like

No Comments

Leave a Reply