Hoe maak ik een interactief notenapparaat binnen ePub?

Interactief lezen betekent dat je binnen je ePub bestand ook voor de noten gebruik kunt maken van de mogelijkheden van HTML en CSS.

Met de deur in huis: voetnoten zijn lastig binnen ePub. Hieronder dan ook een oplossing voor ePub eindnoten. We werken met een systeem van naar elkaar verwijzende links, die elkaar ook moeten kunnen herkennen. Verwijzen gaat door middel van de <a href=""> tag en herkennen gaat via de toevoeging id="" aan een tag (dat hoeft geen <a> tag te zijn, maar is dat hier wel). Verwijzen naar een id="" toevoeging doen we zo: <a href="bestandsnaam.ext#id">

Hieronder het stappenplan voor het bouwen van een interactief notenapparaat binnen een ePub bestand.

  1. Creëer twee nieuwe CSS classes in je stylesheet:
    • a.endnotelink {} (voor de noot zelf) en
    • a.endnotebacklink {} (voor de link terug naar de tekst in het notenapparaat)
  2. Vul deze classes met regels die ervoor zorgen dat de noot en teruglink er mooi uitzien:
    • bijv. {vertical-align: top;} of {text-decoration: none;}
  3. Bepaal waar je eindnoten moeten worden weergegeven in het document.
    • aan het einde van ieder hoofdstuk (of deel) --> vaak is dat in hetzelfde .html document als de hoofdtekst en dat maakt het linken iets eenvoudiger
    • aan het einde van het gehele boek --> dat is vaak in een ander .html document waardoor je link-structuur iets ingewikkelder wordt (maar zeker niet onoverkomelijk :)
  4. In de volgende twee stappen gaan we ervoor zorgen dat de noot in de hoofdtekst en de tekst van de noot elkaar weten te vinden. Zoek in de hoofdtekst je noot op, en omring deze met de volgende tag:
    • <a class="endnotelink" href="link-naar-noot-x" id="id-voor-backlink"></a> waarbij:
    • link-naar-noot-x: de id van je noot die je in stap 5 gaat vaststellen, voorafgegaan door een hekje (#). Als je voor een notenapparaat aan het einde van je boek hebt gekozen moet je hier ook verwijzen naar het bestand waarin de noten te vinden zijn. Voorbeeld: href="noten.html#noot4".
    • id-voor-backlink: de id waarnaar de backlink uit stap 5 refereert. Voorbeeld: id="noot4"
  5. Zoek in je notenapparaat (aan het einde van het hoofdstuk of aan het einde van je boek) de noot op waar je naartoe wilt verwijzen, en omring deze met de volgende tag:
    • <a class="endnotebacklink" href="backlink-naar-noot-x-in-tekst" id="id-voor-link"></a> waarbij:
    • backlink-naar-noot-x-in-tekst: de id die je in stap 4 hebt vastgesteld, voorafgegaan door een hekje (#). Als je voor een notenapparaat aan het einde van je boek hebt gekozen moet je hier ook verwijzen naar het bestand waarin de noot voorkwam. Bijvoorbeeld: href="hoofdstuk6.html#noot4".
    • id-voor-link: het herkenningspunt voor de link in stap 4, dus de id waarnaar de link in stap 4 verwijst. Voorbeeld: id="noot4"
  6. Stappen 4 en 5 herhalen voor alle andere noten. Dit is iets eenvoudiger als alle noten bij elkaar staan, omdat je dan eenvoudig de tags kunt copypasten met de nodige aanpassingen in de tweede pass.
  7. Testen.

N.B. In dit voorbeeld gaan we uit van een notenapparaat aan het einde van je boek. Als zowel de noot als de tekst van de noot zich in hetzelfde bestand bevinden kunnen ze niet dezelfde id hebben. Je zou de id-voor-link uit stap 5 dan bijvoorbeeld id="noottekst4" kunnen noemen. Het is sowieso een goede gewoonte om unieke ids te gebruiken.

N.B. 2 In bovenstaand voorbeeld kiezen we ervoor om de hele tekst van de noot te gebruiken als "backlink" naar de tekst, hetgeen betekent dat de lezer op de noot moet tappen of klikken om terug te keren. Dit heeft implicaties voor de usability, zeker als je in je noten regelmatig gebruik maakt van externe links (naar webpagina's bijvoorbeeld). Een optie is om ervoor te kiezen om een extra tekst-element of afbeelding toe te voegen aan iedere noot: "ga terug naar de tekst" of "sluit noot". Als je langere noten maakt, of gewoon niet wilt dat de lezer alleen het staartje van je noot te zien krijgt vanwege een ongelukkige page-break dan kun je de id="" ook aan de <p> tag aan het begin van de noot toevoegen, in plaats van aan de <a> tag. Je krijgt dan bijvoorbeeld

  • <p id="noottekst4">tekst van de noot. <a class="endnotebacklink" href="hoofdstuk6.html#noot4">Sluit noot.</a></p>

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.