Quick and Dirty HTML/CSS in ePUB - handleiding voor...
Transcript of Quick and Dirty HTML/CSS in ePUB - handleiding voor...
Quick and Dirty HTML/CSS in ePUB - handleiding voor beginners
Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers. Je hoeft niets te weten
van HTML, CSS of zelfs ePUB’s. Je hebt geen tijd om uitgebreide handleidingen door te nemen, maar
je wilt wel boeken maken die lijken op de mooie versies die je tegenkomt.
Dan is dit de handleiding voor jou.
HTML in een paar stappen HTML (een afkorting voor Hypertext Markup Language) is het startpunt om een ePUB te maken.
HTML is het bestandsformaar waarin webpagina’s zijn geschreven en zijn de bron van de ePUB. Dit
klinkt ingewikkeld, maar is het niet. Eigenlijk gebruikt ePUB XHTML, maar het verschil met HTML is
voor deze handleiding klein genoeg.
In feite zijn HTML documenten gewoon tekst met zogenaamde tags om de opmaak vast te leggen.
Het verschil tussen een tag en gewone tekst is eenvoudig te zien. Een tag staat tussen kromme
haken, “<” en “>”. Zo is <p> bijvoorbeeld een tag die het begin van een nieuwe paragraaf aangeeft en
is </p> de tag die het einde van een paragraaf aangeeft. In principe is er voor elke begintag ook een
eindtag. De eindtag wordt altijd vooraf gegaan door een “/” slash. Hierop zijn uitzonderingen, maar
daarover later meer.
Je kunt nu beginnen met het schrijven van je eerste HTML document. We zullen Notepad of een
andere simpele tekstverwerker gebruiken hiervoor. Gebruik niet MS Word of Open Office, die zijn
hier veel te zwaar voor. Open de editor en typ het volgende:
<h1>Dit is een niveau 1 titel</h1>
<h2>1 – Een niveau 2 titel</h2>
<p>Eerste paragraaf.</p>
<p>Tweede paragraaf.</p>
<h2>2 – Nog een niveau 2 titel</h2>
<p>Eerste paragraaf.</p>
<p>etc...</p>
In rood zijn alle tags, de rest is standaard tekst. Er is te zien, dat de tekst als het ware opgesloten zit
tussen begin- en eindtags. De tags <h1></h1>, <h2></h2> geven niveau 1 of 2 titels of kopteksten en
subtitels. Er zijn maximaal zes niveau’s voor de titels, dus h1 t/m h6.
Sla het document op als ‘1.html’. Zorg ervoor dat de naam werkelijk 1.html is en niet ‘1.html.txt’. In
Notepad kan dit door de optie ‘save as’ te kiezen. Vul bij de naam in “1.html” (met
aanhalingstekens!) en bij type ‘All files’. Als je de optie ‘Encoding’ zie, kies dan voor UTF-8.
Als je het bestand ‘1.html’ nu opent in Internet Explorer of een andere browser, moet het er
ongeveer zo uitzien:
De opmaak van de tekst en de titels is de standaard van de browser. Deze kun je zelf aanpassen. Dat
komt later uitgebreid terug.
Laten we nu wat eenvoudige opmaak toevoegen. Pas je bestand aan naar de volgende tekst.
<h1>Dit is een niveau 1 titel</h1>
<h2>1 – Een niveau 2 titel</h2>
<p><i>Eerste</i> paragraaf.</p>
<p><b>Tweede</b> paragraaf.</p>
<h2>2 – Nog een niveau 2 titel</h2>
<p><u>Eerste</u> paragraaf.</p>
<p>etc...</p>
De rode tags beteken het volgende. De <i></i> staat voor italic, oftewel schuinschrift. De <b></b>
voor vetgedrukt en <u></u> voor onderstrepen. Sla dit op als ‘2.html’ en open dit bestand. Het zou
er ongeveer als volgt uit moeten zien:
Nu moet eigenlijk een HTML document anders beginnen. De afspraak is, dat er wordt begonnen met
informatie over het bestand zelf. Ook deze informatie wordt gegeven door middel van tags. Pas
‘1.html’ aan zoals onderstaat staat aangegeven en sla dit op als ‘3.html’.
<html>
<head>
<meta name="Title" content="HTML micro tutorial" />
<meta name="Author" content="Toxaris" />
</head>
<body>
<h1>Dit is een niveau 1 titel</h1>
<h2>1 – Een niveau 2 titel</h2>
<p>Eerste paragraaf.</p>
<p>Tweede paragraaf.</p>
<h2>2 – Nog een niveau 2 titel</h2>
<p>Eerste paragraaf.</p>
<p>etc...</p>
</body>
</html>
Als je deze nu opent in je browser, zal deze er als volgt uitzien:
Geen verschil met ‘1.html’. Dat komt doordat het informatie velden zijn. Toch zijn de toevoegingen
eigenlijk verplicht voor HTML. De meeste browsers ‘verzinnen’ zelf erbij wat ze niet vinden. Soms
goed, soms niet. Het is beter om het goed te doen, voor de programma’s die dit nodig hebben. Dit
geldt voor alle e-boek readers.
Als we verder kijken naar de rode tags die toegevoegd zijn, zie je dat de hoofdtekst nu tussen
<body></body> tags staat. Dit gedeelte wordt dan ook de ‘body’ van een document genoemd. Boven
de ‘body’ staat de ‘header’. Deze staat tussen de <head></head> tags. Binnen de header bevindt zich
onder andere de metadata. In de metadata wordt informatie over het document opgeslagen. Hierin
kunnen ook verwijzingen staan naar zogenaamde stylesheets, maar dat volgt later. Het document
staat zelf tussen <html></html> tags om aan te geven dat het een HTML document is.
Dit is slechts een hele summiere opsomming over het HTML formaat, maar voor nu is het genoeg.
Voor meer informatie in het Engels, kun je naar de W3Schools.com prima tutorial:
http://www.w3schools.com/html/default.asp.
CSS Basisbeginselen CSS
CSS is een afkorting van Cascading Style Sheets, wat vertaald kan worden als een ‘geschakelde stijl
formulieren’. Dat klinkt nog complexer als HTML, maar dat valt mee. CSS is een methode om de
browser te vertellen hoe elk element, zoals een paragraaf of titel, eruit moet zien.
Er zijn twee mogelijkheden, interne en externe stylesheets. De interne zijn opgenomen in het HTML
bestand, de externe is een apart bestand waarnaar verwezen wordt in de HTML-bestanden. De
interne worden minder gebruikt, omdat deze niet geschikt zijn voor hergebruik in meerdere
bestanden. We zullen hoofdzakelijk externe stylesheets gebruiken.
Open je text-bewerker zoals Notepad en neem onderstaand over.
p {
text-indent: 1.2em;
text-align: justify;
font-size: 1em;
margin-top:0;
margin-bottom:0;
}
h1 {
font-size: 2.5em;
text-decoration: underline;
text-align: center;
font-weight: bold;
text-indent:0;
}
h2 {
font-size: 2em;
font-style: italic;
font-weight: normal;
text-align: left;
text-indent:0;
}
Sla dit op als “style.css”. Let er wederom op, dat het niet “style.css.txt” wordt.
Maak een kopie van het ‘3.html’ bestand en hernoem dit naar ‘4.html’ en open dit in Notepad. Voeg
de rode regel toe.
<head>
<meta name="Title" content="HTML micro tutorial" />
<meta name="Author" content="Toxaris" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Dit is een niveau 1 titel</h1>
<h2>1 – Een niveau 2 titel</h2>
<p>Eerste paragraaf. Nu moet hier wat meer tekst staan om te zien wat het
effect is van de style sheet op de opmaak van de paragraaf.</p>
De eerste toevoeging is de verwijzing naar de stylesheet. Zorg er wel voor, dat zowel “style.css” en
“4.html” in dezelfde map staan. Open het bestand ‘4.html’.
Je kunt nu het volgende zien:
De niveau 1 titel is vetgedrukt, gecentreerd en onderstreept.
De niveau 2 titels zijn in schuinschrift
De paragrafen zijn uitgevuld (justify) en springen in. Ook is er geen witregel tussen de
paragrafen.
Ga nu terug naar het ‘style.css’ document en probeer te herleiden welke attributen behoren bij
welke opmaak. Over het algemeen is dit eenvoudig te zien, hoewel de basistaal engels is. Een
uitzondering is de eenheid ‘em’. Om dit te begrijpen, moet je 1em zien als 100%. Zo is de <h1> letter
grootte 250% en de <h2> is 200%. Dit is relatief en in verhouding met de lettergrootte van de
paragrafen van 100%. Het is beter om ‘em’ te gebruiken in plaats van andere mogelijkheden. Reden
is, dat ‘em’ evenredig vergroot en verkleint wordt met de vergrotingsmogelijkheden van de e-boek
readers.
Deze aanpassingen kunnen ook rechtstreeks in de HTML bestanden worden gedaan voor elk
element. Er zijn verschillende redenen om het op deze manier te doen:
1. Een aanpassing in de opmaak van een element in CSS wordt toegepast op alle elementen van
hetzelfde type in het document.
2. De bijbehorende HTML bestanden zien er schoner uit en zijn makkelijker te lezen
3. De stylesheets zijn herbruikbaar
4. Door het vervangen/veranderen van de stylesheet, is het mogelijk om snel het uiterlijk van
het boek aan te passen
De “class” selector De volgende stap is het gebruik van de “class” selector. In het eerste voorbeeld werd de opmaak van
het basiselement aangepast. Het is echter niet onvoorstelbaar dat er meerdere verschillende
opmaken nodig zijn voor bepaalde elementen. Dit kun je ondervangen met de “class” selector.
Open het “style.css” document en voeg onderstaan toe.
.center {
text-align: center;
text-indent: 0;
}
.left {
text-align: left;
text-indent: 0;
}
.right {
text-align: right;
text-indent: 0;
}
Open nu het “4.html” bestand en pas het body gedeelte als volgt aan.
<h1>Dit is een niveau 1 titel</h1>
<h2>1 – Een niveau 2 titel</h2>
<p>Eerste paragraaf.. Nu moet hier wat meer tekst staan om te zien wat het effect is van de style
sheet op de opmaak van de paragraaf.</p>
<p>Tweede paragraaf.</p>
<h2>2 – Nog een niveau 2 titel</h2>
<p>Dit is een normale paragraaf met geen special opmaak met een class selector.</p>
<p class="center">Een gecentreerde paragraaf.</p>
<p class="left">Een links uitgelijnde paragraaf.</p>
<p class="right">Een rechts uitgelijne paragraaf.</p>
Na opslaan en openen in de browser, moet het ongeveer als onderstaand uitzien.
Je kunt zien dat de eerste paragraaf van de 2e niveau 2 titel normaal is, dat wil zeggen uitgelijnd en
met inspring. De andere paragrafen zien eruit zoals beschreven voor die selector. De waarden van de
“class” selector overschrijven de attributen van de standaard waarden. Standaardwaarden die niet
overschreven worden, blijven actief.
De attributen van elke tag kunnen worden aangepast. Zo kunnen ook headers worden aangepast
met dezelfde selectors.
Als je meer wilt weten over CSS, kun je veel meer vinden op
http://www.w3schools.com/css/css_intro.asp
Pas wel op. Een foutje in je stylesheet kan ertoe leiden dat de gehele stylesheet genegeerd wordt. Je
kunt je stylesheet valideren via de site http://jigsaw.w3.org/css-validator/.
En nu? Een volledige presentatie van HTML en CSS vallen buiten de doelstellingen van dit document. Deze
basis is echter genoeg voor het begin. Het bekijken van goed opgemaakte boeken kunnen je helpen
om het beter te begrijpen. In de appendices staan meer voorbeelden.
Het ePUB formaat
De basisbeginselen van het ePUB formaat Het ePUB formaat is beschreven door de IPDF, de beheerders van het formaat. De volledige
specifatie staat op hun site, http://idpf.org/epub.
Wat je weten moet van een ePUB document.
1. Een ePUB document is een gecomprimeerd (zip) bestand. De meeste compressie
programma’s (zoals Winzip of Winrar) kunnen dit zonder problemen openen. Je kunt het ook
hernoemen van ‘.epub’ naar ‘.zip’ om dit mogelijk te maken. Let op, het is wel op een
speciale manier gemaakt. Pas dus niet zomaar iets aan ,want dat kan ertoe leiden dat het
niet langer leesbaar is.
De structuur die je ziet kan verschillen per boek. De onderstaande structuur is de aanbevolen
structuur, maar is niet verplicht. De mappen zijn in blauw en de bestanden zijn groen.
eboek.epub
META-INF
container.xml
OEBPS
Fonts
Images
Styles
Text
content.opf
toc.ncx
mimetype
Aangezien we niet de ePUB’s handmatig gaan samenstellen, zijn we op zich niet zo
geïnteresseerd in de betekenis van elk bestand en map. Sigil, een programma wat we later
gaan gebruiken, maakt deze bestanden en structuur voor ons aan. Sommige liggen erg voor
de hand.
De Fonts map bevat eventuele lettertypes voor gebruik in het boek. Gebruik
spaarzaam!
De Images map bevat alle tekeningen en plaatjes in het boek
De Styles map bevat alle CSS stylesheets
De Text map bevat alle (x)html bestanden van het boek.
2. De inhoud van het boek is opgeslagen in een of meerdere “.html” of “.xhtml” bestanden in
de “Text” map. Het type xhtml is bijna hetzelfde als html voor onze doeleinden. Het is aan te
bevelen om het boek te splitsen in meerdere bestanden. Bijvoorbeeld een voor de kaft en
per hoofdstuk. Dit is niet verplicht, maar sommige e-boek readers hebben beperkingen op de
grootte van de bestanden en kunnen ze anders niet openen.
3. Je kunt een of meerdere CSS stylesheets gebruiken
4. Je kunt een een inhoudsopgave maken. Deze kan worden aangeroepen door de software van
de e-boek reader of lees applicatie. Het is niet nodig om een aparte inhoudsopgave in het
boek zelf te maken. Dit wordt wel een ‘inline TOC’ genoemd. Sommige mensen doen dit wel,
maar nodig is het niet. Sommige mensen vinden het zelfs storend om dit erin te hebben.
5. Je kunt metadata in je ePUB opslaan. Voorbeelden van meta data zijn titel, auteur,
producent, omschrijving, uitgever, onderwerp, ISBN, etc. Overigens zijn titel en auteur
verplicht.
6. Je kunt links opnemen in je documenten voor makkelijke navigatie. Voorbeeld hiervan zijn
eindnoten.
7. Je kunt afbeeldingen overal in het document plaatsen.
8. Kop- en voetteksten zijn niet mogelijk. Dit staat wel in de specificaties, maar wordt eigenlijk
door elke reader genegeerd.
9. Voetnoten zijn niet mogelijk, eindnoten wel. Dit zijn in feite gewoon links.
10. Elke e-boek reader of applicatie gebruikt zijn eigen lettertypes. Hierdoor kunnen boeken er
soms iets anders uitzien. Je kunt fonts toevoegen aan je ePUB. Niet alle e-boek readers of
applicaties ondersteunen dit.
11. Kijk uit met het direct bewerken van de bestanden ‘content.opf’ en ‘toc.ncx’. Een fout hierin
zal er meestal toe leiden dat het boek niet meer leesbaar of zelfs te openen is.
Sigil Sigil is een programma wat gebruikt kan worden om ePUB boeken te maken. Het bevindt zich nog in
de ontwikkelfase, maar is zeer bruikbaar. Het is beschikbaar voor veel systemen (Windows, Apple en
Linux), open source en gratis te gebruiken.
Op dit moment importeert Sigil HTML, TXT en ePUB bestanden. De uitvoer is altijd ePUB. Je kunt aan
een bestaande ePUB altijd bestaande (x)html bestanden, stylesheets en andere bestanden
toevoegen. De laatste stabiele versie is momenteel 0.5.3. Hoewel het over het algemeen prima
werkt, is het aan te raden regelmatig je werk op te slaan, zeker voor grote zoek en vervang acties.
Het kan zijn dat het programma crasht.
Ons HTML werkbestand We zullen nu een groter HTML bestand gebruiken voor Sigil. Sla dit bestand op als “5.html”.
<html>
<head>
<meta name="Title" content="Boek Titel" />
<meta name="Author" content="Schrijver" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Boek Titel</h1>
<h1>Schrijver</h1>
<h2>Deel 1</h2>
<h3>Hoofdstuk 1</h3>
<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze
paragraaf zou niet moeten inspringen.</p>
<p>Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
<p>Laatste paragraaf van dit deel. Een nieuw gedeelte volgt.</p>
<p class="scenechange">* * *</p>
<p class="first">Eerste paragraaf van een nieuw gedeelte binnen hetzelfde
hoofdstuk. Deze paragraaf heeft dan ook geen inspring. </p>
<p>Etc., etc.</p>
<h3>Hoofdstuk 2</h3>
<p class="first">Eerste paragraaf van het tweede hoofdstuk van deel 1. Deze
paragraaf zou niet moeten inspringen.</p>
<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
<h3>Hoofdstuk 3</h3>
<p class="first">Eerste paragraaf van het derde hoofdstuk van deel 1. Deze
paragraaf zou niet moeten inspringen.</p>
<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
<h3>Hoofdstuk 4</h3>
<p class="first">Eerste paragraaf van het vierde hoofdstuk van deel 1. Deze
paragraaf zou niet moeten inspringen.</p>
<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
<h2>Deel 2</h2>
<h3>Hoofdstuk 1</h3>
<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 2. Deze
paragraaf zou niet moeten inspringen.</p>
<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
<h3>Hoofdstuk 2</h3>
<p class="first">Eerste paragraaf van het tweede hoofdstuk van deel 2. Deze
paragraaf zou niet moeten inspringen.</p>
<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te
maken met de vorige paragraaf. Als een alternatief zouden we een regel
tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op
het scherm en veel mensen vinden dit niet mooi.</p>
</body>
</html>
Ons CSS bestand Sla onderstande code op als “style.css”.
p {
text-indent: 2em;
text-align: justify;
font-size: 1em;
margin-top:0;
margin-bottom:0;
}
h1 {
font-size: 2.5em;
text-align: center;
font-weight: bold;
text-indent:0;
}
h2 {
font-size: 2em;
text-align: center;
font-style: italic;
font-weight: normal;
}
h3 {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
h4 {
text-align: center;
}
.first {
text-indent: 0;
}
.scenechange {
text-indent: 0;
text-align: center;
margin-top:1em;
margin-bottom: 1em;
}
Als je nu het bestand “5.html” opent, zou dit er ongeveer als volgt uit moeten zien.
Open het bestand nu in Sigil (recht klikken en openen met Sigil). Dat ziet ongeveer als volgt uit:
Dit is wat “Book view” genoemd. Dit is vergelijkbaar met wat te zien is in een internet browser. Deze
presentatie is geschikt voor kleine correcties zoals typfouten en dergelijke. Voor ander werk zoals
nieuwe paragrafen, hoofdstukken en titels, lege regels en opmaak kun je deze presentatie beter niet
gebruiken.
Druk op het ‘<>’ icoontje, ga in het menu naar ‘View Code View’ of druk op F11. Dan zie je
ongeveer onderstaand scherm.
Dit is de veel krachtigere “code view” presentatie. Dit is onze orginele HTML code, een beetje
aangepast door Sigil. Sigil heeft ervoor gezorgt, dat het nu XHTML is geworden, wat nodig is voor een
ePUB. In deze presentatie maak je de meeste bewerkingen. De kleur coderingen maken het lezen van
de code een stuk makkelijker.
De map ‘Styles’ aan de linkerkant kun je uitklappen en daar zie je onze stylesheet terug. Als je er
dubbel op klikt, wordt deze geopend in een nieuw tabblad.
Zoals je ziet, zijn hierin geen veranderingen aangebracht. Als je op ‘Tools Meta Editor’ op het
menu klikt (of F8), krijg je de meta data bewerkingstool.
Dit is een verplicht onderdeel van een ePUB. Zonder dit gedeelte is de ePUB niet correct. Doordat we
in ons HTML bestand dit reeds hadden opgenomen, wordt dit automatisch ingevuld. Indien dit niet in
de bron staat, moet dit handmatig worden ingevuld. De taal staat standaard op Engels. Deze kan
zonder problemen op ‘Dutch’ worden gezet. Door middel van de knoppen ‘Add Basic’ en ‘Add Adv’
kan andere metadata worden toegevoegt zoals bijvoorbeeld omschrijving en ISBN. De metadata
wordt opgeslagen in het “content.opf” bestand.
Via ‘tools TOC Editor’ in het menu wordt de inhoudsopgave bewerker gestart. Hierin kan worden
aangegeven of hoofdstukken wel of niet worden opgenomen in de inhoudsopgave. In Sigil 0.4 is deze
optie niet meer beschikbaar, maar staat deze aan de rechterkant van het scherm.
Sigil gebruikt de kopteksten (h1 t/m h6) om de inhoudsopgave op te stellen. Deze inhoudsopgave
wordt opgeslagen in het “navmap” gedeelte van de “toc.ncx”.
Sla nu de epub op via ‘File Save As’ in het menu.
Een kaft toevoegen Je kunt een kaft toevoegen. De formaten “jpg”, “gif” en “png” zijn toegestaan. De meeste readers
hebben een scherm van ongeveer 590x750 pixels. Het kan op 2 manieren worden gedaan.
Je kunt de cursor in het begin zetten in de “Book View” presentatie. Selecteer nu “insert Image” in
het menu en selecteer het plaatje. Het plaatje wordt nu toegevoegd aan het boek. Het plaatje zelf
wordt geplaatst in de map “Images” aan de linkerkant.
Echter, het zou mooier zijn als plaatjes meeschalen met de schermgrootte. Dit kan door middel van
een zogenaamd plaatje. Het gaat wat ver om hier diep op in te gaan. Klik rechts op de map “Text”
aan de linkerkant en kies “Add new item”. Noem deze “cover.xhtml” en zorg dat deze bovenaan de
lijst staat. Dubbelklik hierop en ga naar de “codeview” presentatie. Neem onderstaande code over.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="100%"
preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 800"
width="100%">
<image height="800" width="573" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>
Klik nu rechts op de map “Images” aan de linkerkant en kies “Add existing item” en kies je plaatje.
Hernoem deze tot ‘cover.jpg’. Pas de waarden in de ‘viewBox’ en tussen de <image></image> tags
aan naar de werkelijke resolutie.
Splitsen van tekst Zoals eerder gezegt hebben nogal wat readers een beperking met betrekking tot de grootte van de
(x)HTML bestanden. Hierdoor is het beter, ook voor de snelheid, om het HTML bestand te splitsen.
Wat vaak wordt gebruikt is:
1. Kaft
2. Boek titel/Auteur
3. Een bestand voor elk hoofdstuk
Om dit te doen moet je naar de “Codeview” presentatie gaan. Ga naar de plek waar je wilt splitsen
en druk op het icoon of drukt op Ctrl+Enter. Als je klaar bent, zie je iets als onderstaand:
Een afgesplitst bestand wordt automisch “SectionXXXX.xhtml” genoemd. Dit kun je hernoemen als je
wilt. Als je op deze manier splitst, worden de verwijzingen naar bijvoorbeeld de CSS stylesheet
meegenomen.
Basis opmaak Je kunt de opmaak doen zoals je wilt. Er zijn echter een aantal stijlvormen die vaak terugkomen.
Paragrafen moeten een duidelijk eind en begin hebben. Hiervoor wordt vaak
inspringen gebruikt.
Volledig uitvullen is prettiger dan links uitvullen
Geen lege regels tussen paragrafen als er geen sceneovergang is
Hieronder volgt een tabel met veel gebruikte attributen in CSS met bijbehorende uitleg. Sommige
attributen hebben toevoegingen. Deze kunnen soms worden weggelaten.
Attribuut Uitleg
Margin lege ruimte, marge. De toevoeging kan weggelaten worden. Dan geldt de waarde voor alle marges. Als je deze op 0 zet, heb je geen ruimte tussen de paragrafen.
margin-top marge boven de tekst
margin-bottom marge onder de tekst
margin-left marge links van de tekst
margin-right marge rechts van de tekst
text-indent Inspring van de tekst voor de eerste regel.
text-align kan verschillende waardes hebben zoals ‘justify’ (volledig uitvullen), ‘left’ of ‘right’ (respectievelijk link en rechts uitlijnen) of ‘center’ (centreren)
font-size Grootte van de letter. Zet deze standaard op 1em.
font-style Als deze gezet wordt op ‘italic’ wordt er schuinschrift aangezet.
font-weight Als deze wordt gezet op ‘bold’, wordt de tekst dik afgebeeld.
line-height Waarde is meestal ‘normal’. Hiermee kun je de afstand tussen de regels vergroten.
Voet- en eindnoten Voetnoten worden niet echt ondersteund. Eindnoten wel. Bij een eindnoot wordt er een link
gemaakt tussen een locatie en de noot zelf. Helaas heeft Sigil nog geen editor hiervoor en moet dit
met de hand. Dat gebeurt in de ‘Code View’ presentatie.
Een eindnoot is een verwijzing naar een verduidelijking. In tegenstelling tot voetnoten (die helaas
niet mogelijk zijn in ePUB’s), staan deze ergens anders. Je kunt ervoor kiezen om deze aan het eind
van een hoofdstuk te plaatsen of aan het eind van een boek. Voor dit voorbeeld, nemen we aan dat
we een apart bestand hebben, genaamd ‘eindnoten.xhtml’.
In principe is een eindnoote een link naar een ander document, een gewone hyperlink. Het is aan te
raden om ook een verwijzing/hyperlink terug te maken. Niet elke reader heeft een terug-knop.
Een link maakt gebruik van zogenaamde ‘anchors’. Deze moeten uniek zijn en mogen niet met een
nummer beginnen.
Laten we onderstaande code eens bekijken. In rood is de werkelijke verwijzing naar de eindnoot
opgenomen.
<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze
paragraaf zou niet moeten inspringen.</p>
<p>Tweede paragraaf. Deze paragraaf moet wel inspringen<sup><a id="endref1"
href="../Text/eindnoten.xhtml#end1">1</a></sup> om onderscheid te maken met
de vorige paragraaf. Als een alternatief zouden we een regel tussen de
paragrafen kunnen maken, maar dat zou veel ruimte verspillen op het scherm
en veel mensen vinden dit niet mooi.</p>
Hierbij is wordt de verwijzing in te tekst iets kleiner en boven de tekst geplaats. De verwijzing zelf
krijgt als ‘anchor’ de naam ‘endref’ mee. De verwijzing verwijst naar het ‘eindnoten.xhtml’ bestand
en specifieker naar de ‘anchor’ met de naam ‘end1’.
In het ‘eindnoten.xhtml’ bestand zou dit er als volgt uitzien:
<p><a id="end1" href="../Text/eindnoten.xhtml#endref1">1</a> Inspringen
betekent wat witruimte voordat de zin begint.</p>
Hier zie je dat de eindnoot zelf als ‘anchor’ de naam ‘end1’ heeft en de link verwijst naar de ‘anchor’
met de naam ‘endref1’. Zo is een kruislink gemaakt.
Let op. In HTML gebruik je ‘name=’ in plaats van ‘id=’. In XHTML moet dit ‘id=’ zijn.