- René van Maarsseveen - https://renevanmaarsseveen.nl -

Een epub in 30 minuten (vervolg)

EPUB in 30 minuten

Gisteren liet ik zien hoe je eenvoudig een epub in 30 minuten kunt maken. Dat epub was nog heel basaal. Je wilt het waarschijnlijk mooier en toegankelijker maken. Zelfs dat kan binnen een half uur.

Je doet het door een stylesheet te gebruiken, hoofdstukken aan te geven, een inhoudsopgave te maken en wellicht afbeeldingen of zelfs audio en video toe te voegen.

Stylesheet

In een stylesheet geef je aan wat de epub moet doen wanneer het een bepaalde code tegenkomt. De instructies die je daarbij geeft kunnen eenvoudig zijn of ingewikkeld, in alle gevallen zet je het uiterlijk van je tekst ermee naar je hand.

Laat je, evenals door de codes, niet afschrikken door de instructies bij het stylesheet. Het lijkt moeilijker dan het is en er zit, zoals bij alles met computers, een logica in.

In Sigil zie je in het linkerdeel van het venster een rijtje woorden waaruit een epub is opgebouwd (Text, Styles, Images etc). Selecteer het kopje Styles, door er met je muis op te klikken. Open daarna het popup menuutje met de rechtermuisknop en kies ‘Leeg CSS-stijlblad toevoegen’.

Er wordt nu een schoon stylesheet aangemaakt. Dit wordt geopend in het bewerkscherm.

Nu kun je instructies invoeren. Omdat ik er vanuit ga dat je geen kennis hebt van html, houd ik het eenvoudig. Kopieer onderstaande tekst (alles wat in het kader staat) en plak het in het bewerkscherm van het stylesheet.

p {
font-family: Verdana, Helvetica;
color: #000;
font-size: 1em;
}

Dit is voor je tekst de instructie voor de code <p>. In feite vertel je hier dat je in alinea’s het lettertype Verdana wilt gebruiken, waarbij je als alternatief Helvetica opgeeft. De kleur van de tekst is zwart (de hex-code voor zwart is 000, voor een andere kleur kan dat 124364 zijn; let op het hekje).

De lettergrootte kun je op verschillende manieren opgeven (bijv. punten, pixels etc.). Tegenwoordig wordt gekozen voor em. Dat is een relatief formaat van 100% op het gebruikte apparaat. Dat is bij epub wel handig, want je weet niet of het ebook op een ereader, tablet etc. wordt gelezen (vind je het resultaat te klein, dan kun je bijvoorbeeld 1.1em instellen, met een punt dus).

Stylesheet gebruiken

Het enige dat je nu nog moet doen is aangeven dat je het stylesheet wilt gebruiken. Ga in Sigil naar het bestand met je basistekst (Section0001.xhtml). Dat kan door links onder Text te klikken op de bestandsnaam of de tab te gebruiken direct boven het bewerkscherm.

Zoek <title></title> en plaats je cursor hier achter, dus vóór </head>. Kopieer onderstaande regel en plak het in de tekst:

<link href=”../Styles/style0001.css” rel=”stylesheet” type=”text/css” />

Benodigde functies

Sigil is een handig programma om een epub mee te maken. Het heeft vele mogelijkheden, waarvan je de meeste waarschijnlijk nooit zult gebruiken. Welke functies zijn wel handig om te kennen bij het maken van een eenvoudig epub?

Ten eerste de knoppen Boekweergave en Codeweergave in de knoppenbalk. Deze spreken voor zichzelf.

Daarnaast vind je de knop Splitsen in de knoppenbalk. Deze gebruik je om de tekst verder op te delen. Vooral bij lange teksten kan dat handig zijn.

Tenslotte heb je nog de functies Inhoudsopgave en Epub validatie. Deze zijn beide te vinden onder de menuoptie ‘Gereedschappen’.

Splitsen

Met de knop Splitsen splits je een tekst op de plaats van de cursor. Er wordt dan automatisch een nieuw html-bestand aangemaakt, dat onder het oorspronkelijke bestand links (onder Text) wordt getoond.

Bij het splitsen wordt ook de gehele header van het oorspronkelijke bestand meegenomen. Dat is alles wat tussen de codering <head> en </head> staat. Zorg dus dat je pas gaat splitsen nadat je de code voor het gebruik van het stylesheet hebt geplaatst (zie boven) en bijv. de titel van je boek tussen <title> en </title> hebt ingevuld.

Zet nu de cursor in je tekst, daar waar bijvoorbeeld een tweede hoofdstuk begint (de cursor vóór de hoofdstuktitel) en druk op de knop Splitsen. Alle tekst na de cursor staat in het nieuwe bestand. Scroll naar beneden, naar bijvoorbeeld daar waar hoofdstuk drie begint etc.

Hoofdstukken en Inhoudsopgave

Tijdens het bewerken van je tekst in een tekstverwerker (zie het bericht van gisteren) had je de hoofdstuktitels al kunnen coderen door er <H1> en </H1> omheen te zetten. Heb je dat niet gedaan, dan kun je dat nu alsnog doen.

Selecteer een hoofdstuktitel in de tekst en klik op het knopje H1, linksboven op de knoppenbalk van Sigil. Je kunt ook kiezen voor de omslachtige methode door in de Codeweergave de code handmatig om de titel te zetten.

Heb je subtitels dan kun je daarvoor <H2> en </H2> gebruiken rond de subtitel of het knopje H2.

Wanneer je alle hoofdstukken hebt gecodeerd, kies je ‘Inhoudsopgave genereren’ (in het menu Gereedschappen, onder Inhoudsopgave). Je krijgt dat een scherm te zien waar je de hoofdstukken die je in je Inhoudsopgave wilt, kunt aangeven. Klik op OK en de inhoudsopgave voor je ebook verschijnt in het rechtse scherm van Sigil.

Afbeeldingen

Een eenvoudig ebook kan ook afbeeldingen bevatten. Voorbereiding bespaart ook hier tijd. Dus plaats alle afbeeldingen die in het boek moeten in één map op je computer. Zorg voor duidelijke bestandsnamen en bewerk de afbeeldingen voor zover nodig.

Vooral het aanpassen van de grootte maakt je epub handiger in gebruik. Tot voor kort werd het aanbevolen een maximale breedte van 600 pixels aan te houden. Tegenwoordig, met de hoge resoluties van tablets en het gebruik op desktops, kan een hogere resolutie wenselijk zijn.

Afbeeldingen importeren en gebruiken

Zet de cursor in het linkerscherm op Images. Open het popup menu met de rechtermuisknop en kies ‘Bestaande bestanden toevoegen’. Je kunt dan alle afbeeldingen uit die ene map importeren.

Ga nu naar een plek in je tekst waar een afbeelding moet komen. Zet de cursor tussen de code </p>, van het einde van een alinea en <p>, het begin van een volgende alinea. Type daarna de volgende regel of kopieer en plak het:

<img src=”../Images/afbeelding.jpg” alt=”plaatje van” width=”100%” /><br />

Verander ‘afbeelding.jpg’ in de bestandsnaam van de afbeelding die je daar wilt hebben. En vervang ‘plaatje van’ door een korte omschrijving van de afbeelding.

Daarna kun je naar de volgende plek waar je een afbeelding wilt. (voor audio en video gebruik je op dezelfde manier een andere instructie; zie onder bij meer informatie: codes en instructies)

Hierboven zag je in de coderegel een code voor de breedte (width=”100%”). De afbeelding wordt dan zo groot mogelijk getoond. Wil je een vaste maat opgeven, dan kan dat door een percentage op te geven of het aantal pixels (bijv.: width=”550px”). Je kunt ook een hoogte opgeven (bijv. height=”330px”). Gebruik je ze allebei, houd dan wel de verhouding van de afbeelding aan, anders krijg je een lachspiegeleffect.

Epub validatie

Je hebt wellicht al gezien, bij het schakelen tussen Boek- en Codeweergave, dat Sigil automatisch code kan herstellen. Een vergeten </p> wordt dan door Sigil hersteld. Maar zo eenvoudig herstellen van verkeerde code of instellingen kan niet met alles.

Daarom is het goed af en toe de functie Epub validatie te gebruiken, in ieder geval als je klaar bent en je boek voor de laatste keer opslaat. Sigil toont dan welke problemen het is tegengekomen. Dat kunnen ongebruikte afbeeldingen zijn, links die niet bestaan en andere fouten.

Epub validatie vind je onder de menukeuze Gereedschappen in de menubalk.

Klaar

Ok, je bent klaar. Waarschijnlijk lukte het ook de verfraaide epub in 30 minuten te maken. Wellicht ben je over het resultaat nog steeds niet helemaal tevreden.

Kijk dan bij codes en instructies. Wellicht kun je het daarmee al een stuk meer naar je zin kan maken.

Want de basiskennis heb je nu. Codes in de tekst bepalen waar je iets wilt en met de instructies in het stylesheet vertel je wat je daar wilt.

Experimenteren

En niemand die het ziet, je mag experimenteren. Zorg dat je een kopie hebt, of bewaar de epub onder een andere naam en gebruik eens wat codes, verander wat getallen, probeer eens een andere instructie. Houd er overigens rekening mee dat ereaders een epub niet allemaal op dezelfde manier tonen; ze interpreteren codes soms op hun eigen manier (wat natuurlijk niet zou moeten).

Verschillende platforms

Het is daarom beslist handig om je epub tenslotte te beoordelen op verschillende platforms en apparaten. Dat kan bijvoorbeeld met een ereader plugin in je webbrowser. Google heeft daarvoor de app Readium, Firefox de addon ePUB reader. Controleer of bij een veranderd bestand het ebook echt vernieuwd. In veel gevallen is het verstandiger om het epub-bestand opnieuw in te lezen (te openen, dus niet de ‘vernieuw-knop’ te gebruiken; soms kun je de sneltoets cache-leegmaken gebruiken Ctrl+Alt+r).

Verder kun je je epub inlezen op ereaders, tablets van verschillende leveranciers en dergelijke. Mijn ervaring is dat het niet per se nodig is dit heel uitgebreid te doen. Maar problemen voorkomen is beter. Je hebt immers liever complimenten over de inhoud van je tekst, dan commentaar over je epub.

Meer informatie:

Ik heb een pdf gemaakt met enkele codes en instructies. Ook vind je in de pdf enkele links naar andere bronnen. Voor naslag gebruik ik zelf al jaren de HTML handleiding van Hans de Jong. Voor stylesheet codering kijk je bij CSS eigenschappen en voor algemene informatie onder HTML bij Stylesheets.