Stylesheet CSS

Stylesheet kennis bij een epub maken

De afgelopen maanden kreeg ik weer veel telefoontjes en mails over berichten. Het bericht ‘een epub maken in 30 minuten’ was daarbij het meest voorkomende onderwerp, of ‘jouw epub in 10 minuten’. De problemen die mensen tegenkomen bij een epub maken lopen uiteen. Maar ik herken vooral een gebrek aan basiskennis.

Bij alles wat je wilt leren is basiskennis het belangrijkst, volgens mij. Als het goed is herken je daarmee een patroon, structuur et cetera. De rest is een invuloefening en daarmee tijdwinst. Aanvullend voordeel is het snel kunnen oplossen van problemen.

De basiskennis van een epub maken ligt bij de werking van stylesheets. En ik realiseer me dat ik bij de bovengenoemde berichten daar nauwelijks aandacht aan heb besteed. Afgelopen week kwam daar ergernis bij over een epub die ik ontving van een grote uitgever. Dus toch maar weer even informatie over een epub maken, met de nadruk op stylesheet kennis. Basiskennis dus.

Een epub maken met stylesheet

Een epub maken is niet meer dan het samenbrengen van een gecodeerd bestand en een stylesheet. Ik ga hier even uit van een tekstbestand, maar het kan ook een tekstbestand zijn met afbeeldingen, video’s en dergelijke. Met dat laatste kom je echter al in de fase na basiskennis.

Basiskennis

Het gaat bij een epub maken natuurlijk om de tekst, het verhaal dat je wilt delen met lezers. In die tekst zet je codes om aan te geven wat er op die specifieke plek in de tekst moet gebeuren. Dat gebeurt in een tekstverwerker als Word ook, alleen zie je die codes dan niet. Maar ook daarin heb je zaken voor een tekst ingesteld, zoals paginagrootte, lettertype, vet en cursief et cetera.

Bij een epub staat wat er in een tekst moet gebeuren bij een bepaalde code in een stylesheet (een stijllblad). Dat is op zijn minst één bestand (met extensie CSS). Wanneer de epub in een e-reader of tablet wordt geopend zie je alleen de presentatie van je tekst. Maar de e-reader kijkt telkens in het stylesheet om te zien hoe het die tekst moet tonen, door naar de codering te kijken.

Codering van tekst en stylesheet

Hoe ziet die codering er dan uit? Veel mensen laten zich daardoor overrompelen. Er wordt veel te ingewikkeld over gedacht. We hebben het over basiskennis. Dus is het antwoord in beginsel: JIJ bepaalt de codering. Als de code die je in de tekst gebruikt maar overeenkomt met die in het stylesheet.

Wanneer jij in de tekst de code ‘dikke-man’ wilt gebruiken voor het aangeven van vet in je tekst, dan kan dat. Als je maar ook in het stylesheet die code gebruikt om te vertellen wat de e-reader moet doen op de plek van die code in de tekst.

Dus stel in je gecodeerde tekst staat:
We waren in een <dikke-man>heel goed</dikke-man> restaurant.

Dan moet je ook in het stylesheet die code gebruiken bij definitie van de code. Alleen dan wordt het resultaat:
We waren in een heel goed restaurant.

LET OP!!! Bij codering staat de code tussen “groter en kleiner dan”-tekens. En er is een begincode en eindcode. Bij die laatste gebruik je een slash (/). Plaats je geen eind code, dan weet de e-reader niet waar het moet stoppen met de opmaak die bij de code hoort. De kans is groot dat alle tekst daarna in vet wordt getoond.

Stylesheet

De codering in je tekst kun je dus in principe zelf bepalen. Maar de termen om aan te geven wat er moet gebeuren bij die codes liggen wel vast. Dat is logisch, anders zou je een Babylonische spraakverwarring krijgen tussen e-readers, epub lezende apps en dergelijke.

Er zijn een paar honderd van die termen, waarbij bij sommige meerdere instellingen mogelijk zijn. Laat je daardoor echter niet afschrikken. Want je hebt er maar een paar nodig en ze hebben logische benamingen (wel Engels).

Accolades

In een tekst werk je met de “groter en kleiner dan”-tekens. Bij het stylesheet gebruik je accolades’, dus { en }, om de termen tussen te plaatsen.

Het voorbeeld van de code van de <dikke-man> om vet te maken wordt in het stylesheet (let op de punt ervoor):
.dikke-man { font-weight: bold }

De term is dus ‘font-weight’, de waarde is ‘bold’. De waarde kan ook een getal zijn, waarmee je het lettergewicht aangeeft. Daarmee zou je een letter nog vetter kunnen maken, maar ook dunner.

Wil je bijvoorbeeld ook cursief gebruiken, dan wordt het in het stylesheet:
.dikke-man { font-weight: bold; font-style: italic; }.

Je gebruikt een puntkomma om de termen te scheiden. Bij de laatste is het niet per se nodig, maar het is een goede gewoonte er wel eentje te zetten. Het resultaat is overigens:
We waren in een heel goed restaurant.

Wil je extra nadruk, dan kun je bijvoorbeeld ‘heel goed’ in een kleur zetten of de lettergrootte veranderen. De code in de tekst blijft gelijk (dus: <dikke-man>heel goed</dikke-man>). In het stylesheet voeg een term toe. Bijvoorbeeld een kleur:
.dikke-man { font-weight: bold; font-style: italic; color: #b10058 }

Resultaat: We waren in een heel goed restaurant.

Kijk verder bij het kopje P, DIV en SPAN

Nauwkeurig werken

Ik constateer dat de meeste problemen waarover mensen mailen en bellen gebaseerd zijn op onnauwkeurig werken. Dat kan zijn doordat ze overzicht verliezen door ongestructureerd werken. Maar vaker zijn het typefoutjes of vergeten tekens.

Wanneer je bijvoorbeeld hierboven achter ‘italic’ geen puntkomma plaatst krijg je een foutmelding, omdat er nog een term achteraan komt en er geen scheiding is aangebracht. Het is ook belangrijk consequent te zijn met hoofdletters en kleine letters. In de tekst <H1> gebruiken en in het stylesheet h1 geeft een fout.

Het principe

In feite is hierboven de basiskennis verteld. De termen kun je immers gewoon opzoeken. En wanneer je een voorbeeld epub opent, kun je de opbouw zien. Die is vanzelfsprekend altijd hetzelfde. De basiskennis kun je overigens ook gebruiken bij websites. Dat zijn ook gecodeerde tekstpagina’s (in dat geval met extensie html of php) die naar een stylesheet kijken voor de presentatie.

Een voordeel van het zelf maken vanuit weinig een epub opbouwen is dat je veel meer controle hebt over de codering. En ook later gemakkelijk wijzigingen kunt uitvoeren. Dat laatste is vooral handig bij bijzondere wensen, die bijvoorbeeld niet zijn uit te voeren binnen een opmaakprogramma.

Het handigst is nu te kijken naar een voorbeeld epub om de opbouw te zien, bijvoorbeeld in Sigil. Wanneer je daar een nieuw epub aanmaakt, wordt de basisopbouw van een pagina direct zichtbaar. Je tekst zet dan eenvoudig je tekst de code <body> en </body>.

P, DIV en SPAN

Een epub maken is een eenvoudig gebruik van een gecodeerd tekstbestand en een stylesheet met de code-beschrijving. Bij een website zijn de spelregels iets strakker. Met de basiskennis hierboven verwacht ik dat je daarin een volgende stap kunt zetten.

P, DIV en SPAN zijn nog wel interessant bij het maken van een epub. Je zet de code namelijk niet in de tekst als <dikke-man>. De formulering moet in vrijwel alle gevallen iets uitgebreider. Daarvoor gebruik je <P>, <DIV> en <SPAN>. Er zijn meer mogelijkheden, maar voor een epub maken is dit voldoende.

Grof gesteld gebruik je <P> om een groot gedeelte tekst onder te brengen, bijvoorbeeld een zin of alinea. En <SPAN> om een klein stukje tekst te definiëren, dus bijvoorbeeld een cursief in een zin.

Het hierboven gebruikte vet in een zin zou je dus met<SPAN> definiëren en de opmaak van de zin met <P>. In de tekst ziet het er zo uit:

<p class=”alinea”>We waren in een <span class=”dikke-man”>heel goed</span>restaurant.</div>

Waarbij je de code “alinea” vanzelfsprekend in je stylesheet hebt gedefinieerd. Bijvoorbeeld met de witruimte tussen alinea’s, een inspringende beginregel et cetera. Meestal worden <p>, <div> en <span> met kleine letters geschreven, zoals in het voorbeeld. Gebruik het dan wel consequent voor zowel begin- als eindcode.

In het stylesheet zou het er alsvolgt uit kunt zien:

.dikke-man { font-weight: bold; font-style: italic; color: #b10058; }
.alinea {font-size: 5em; line-height: 1em; margin-bottom: 1.5em;}

<P> en <DIV>

Er is nauwelijks verschil tussen het gebruik van <P> en <DIV>. P staat voor paragraph oftewel alinea. Het wordt gewoonlijk gebruikt voor tekst. Div staat voor devide oftewel verdeel. Gangbaar is het te gebruiken als in een tekst een deel in een andere stijl moet. Daardoor lijkt het in het gebruik meer op <SPAN> dan op <P>.

De ergernis

In het begin van dit bericht schreef ik over de ergernis over de opmaak van een epub door een grote uitgever. Als lezer heb je er geen last van. Maar ik vind het slordig. Kijk even naar het plaatje hieronder:

een epub maken en stylesheet

Voorbeeld met veel en daardoor onoverzichtelijke code.

Je ziet dat het is als het bos waarin je de bomen niet meer ziet. Ik heb de tekst waarom het gaat omcirkeld, er staat: vertellen over hun leven met deze aandoening. Een leven dat niet gemakkelijk

In mijn code had het kunnen zijn:

<p class=”alinea”> vertellen over hun leven met deze aandoening. Een leven dat niet gemakkelijk</p>

In het stylesheet had ik er alles mee kunnen doen wat nodig is. Voor de lezers zouden beide opmaak hetzelfde zijn; ze zouden in de presentatie het verschil niet zien. En als ik iets wilde veranderen was dat gemakkelijk en controleerbaar uit te voeren.

Aanvullende informatie

  • In een eerder bericht schreef ik over mijn ergernis bij het gebruik van Calibre. Dat programma is tegenwoordig gelukkiger veel gebruikersvriendelijker. Het zijn nu vooral slechte ontwerpers die zorgen voor lelijk opgemaakte epubs. Ze denken met een beetje kennis van Adobe InDesign of QuarkXPress tot prachtige dingen in staat te zijn. Over die ontwerpers kan ik nog wel een boekje open doen.
  • Voor het maken van een epub kun je dus gebruik maken van de gratis programma’s Sigil of Calibre.
  • Een overzicht van alle ’termen’ die je kunt gebruiken in je stylesheet vind je bij W3School CSS. Wil je het diepe in met Stylesheets kijk dan naar de uitgebreide informatie op die site.
  • Een goede bron voor codes en dergelijke is ook het oude, vertrouwde Handleiding HTML (bijv. de rubriek CSS over stylesheets)
  • De afbeelding in de header toont een pagina met opbouw in stylesheet taal. Het is echter niet per se die van een epub. Wanneer je enige kennis hebt van stylesheets kun je de taal ook gebruiken bij een website en andere toepassingen.
Print deze pagina
Bovenstaand bericht is geschreven op 7 augustus 2021 door in de categorie 2021, Algemeen

Vorige en volgende berichten

« Ouder: Nieuwer: »

Een willekeurig bericht

Ik schrijf op deze site over allerlei onderwerpen. Soms is het heel persoonlijk, soms vooral informatief of beschouwend. Hieronder een willekeurig bericht uit ruim 2000 berichten.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *