HTML-tags bewerken in de CSS van je eBook

Let op: dit artikel veronderstelt voorkennis van CSS-klassen!

Elk hoofdstuk in een eBook- bestand bestaat uit een collectie HTML-tags. Divs, span-tags en alineatags vormen samen allemaal de samenstelling van de pagina. Meestal wordt de stijl van de inhoud binnen deze tags (de lettertypestijl, letterkleur, marges, enz.) ingesteld in het CSS-bestand en gemarkeerd met een eigen naam (bijv. klasse). De specifieke stijl wordt vervolgens toegepast op de inhoud van de tags door de klassenaam in de HTML van de pagina te plaatsen.

Wanneer je een ePub uit InDesign genereert, wijst InDesign automatisch klassenamen toe aan elk van de verschillende HTML-tags die het op een pagina gebruikt.  Dus elke div zal worden geformatteerd op de volgende manier:

Niet iedereen gebruikt echter InDesign. Wanneer je ePub-bestanden in Calibre of andere programma's maakt, kun je de klassen en de stijl rechtstreeks toepassen in de CSS en HTML van je eBook. Hoewel dit fantastisch is voor maatwerk, zorgt het ook voor situaties zoals de volgende CSS die verschijnt in je eBook:

Technisch gezien is dit niet verkeerd. Misschien werden divs alleen gebruikt in bepaalde secties van je eBook, bijvoorbeeld om de breedte van bepaalde items in het hoofdstuk te regelen (zoals een illustratie of een kop).

Praktisch gezien, echter, moeten div-tags en andere tags niet rechtstreeks worden opgemaakt. Dit omvat span-, h1- en p-tags. Aan deze tags moet altijd een klassenaam zijn gekoppeld. Zoals:

Je zou dan de klasse in het hoofdstuk van je boek als volgt noemen:

Als het gaat om eBooks die worden gelezen op apparaten, kan de opmaak van de werkelijke tags zelf problematisch worden. In tegenstelling tot een webpagina zijn e-readers en apps geen blanco vellen. Ze kunnen een ePub bewerken om specifieke tags toe te voegen voor bladwijzers, juiste voetnootopmaak en andere taken. Dus wanneer je een tag opmaakt in plaats van een klasse, bestaat het risico dat tags die door het e-readerplatform worden ingevoegd, de CSS-code van de tag in je eBook-bestand kunnen lezen.

Een voorbeeld:

Kortom, het is geen goede gewoonte om een ​​HTML-tag rechtstreeks op te maken. In plaats daarvan moet je stijlklassen maken en deze vervolgens toepassen op tags in de hoofdstukpagina's van je eBook.

Niet correct:

Correct: