Sommige boeken hebben elementen met een vaste afmeting en tekstpositie waardoor lettertypen niet kunnen worden vergroot en verkleind of tekst niet zoals gewenst kan teruglopen. Koffietafelboeken en plaatjesboeken voor kinderen hebben bijvoorbeeld paginagrote afbeeldingen met tekst die precies in relatie tot de achtergrondillustraties is geplaatst. Dit geldt echter niet alleen voor dit soort boeken.

In boeken met een vaste opmaak wordt tekst met aanpasbare opmaak niet ondersteund. Vaste opmaak dient alleen te worden gebruikt wanneer het hele boek een vaste opmaak heeft. Boeken kunnen niet gedeeltelijk een aanpasbare of gedeeltelijk een vaste opmaak hebben. Lees meer informatie over het maken van dit type e-book met Kindle Kid's Book Creator.

Verbeterde typografie wordt momenteel niet ondersteund door deze indeling.

Belangrijk: geneste ankertags worden niet ondersteund in boeken met een vaste opmaak. Boeken met een vaste opmaak en geneste ankertags worden onderdrukt.

Inhoudsopgave

• Richtlijnen voor metagegevens
• Richtlijnen voor omslagafbeelding
• Richtlijnen voor tekst
• Vereisten voor content
• HTML- en CSS-richtlijnen
• Boeken met vaste opmaak en tekstpop-ups maken met meerdere achtergrondafbeeldingen en tekst

---

Richtlijnen voor metagegevens

Het OPF-bestand specificeert de metagegevens die noodzakelijk zijn voor boeken met een vaste opmaak. Hoewel ze op elkaar lijken, zijn er belangrijke verschillen tussen de diverse indelingen met een vaste opmaak. Tenzij anders aangegeven, moeten de richtlijnen voor boeken met een vaste opmaak met tekstpop-ups niet worden toegepast op andere boeken, zoals boeken met een vaste opmaak met afbeeldingspop-ups of virtuele panelen.

Metagegevens	Beschrijving
Je kunt de opmaak opgeven met een van de volgende metagegevensvelden: 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Verplicht. Geeft aan dat het boek een vaste opmaak heeft. Geldige waarden voor rendition:layout-metagegevens zijn reflowable of pre-paginated. De standaardwaarde is reflowable. Geldige waarden voor fixed-layout-metagegevens zijn true of false. De standaardwaarde is false.
<meta name="original-resolution" content="1024x600"/>	Verplicht. Geeft de resolutie van het originele ontwerp van de content aan ("1024x600" is slechts een voorbeeld). De afmetingen in pixels kunnen elk positieve gehele getal zijn. Deze waarden moeten in verhouding zijn tot de algemene beeldverhouding van de oorspronkelijke content.
Je kunt de afdrukstand opgeven met een van de volgende metagegevensvelden: 1) <meta property="rendition:orientation">landscape</meta> 2) <meta name="orientation-lock" content="landscape"/> Opmerking: dit wordt momenteel niet ondersteund in iOS.	Optioneel (maar aanbevolen). Geldige waarden voor rendition:layout-metagegevens zijn portrait, landscape of auto. Zet de afdrukstand van het boek vast op staand (portret) of liggend (landschap). Als de waarde auto is, worden zowel staand als liggend ondersteund. De standaardwaarde is auto. Geldige waarden voor orientation-lock-metagegevens zijn portrait, landscape of none. Zet de afdrukstand van het boek vast op staand (portret) of liggend (landschap). Als de waarde none is, worden zowel staand als liggend ondersteund. De standaardwaarde is none.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Optioneel. Definieert de weergavevolgorde van de pagina's, de leesmodus en de navigatie van de reader (inclusief Kindle Tekstpop-Up, Kindle Paneelweergave en Kindle Virtuele panelen). Geldige waarden zijn horizontal-lr, horizontal-rl, vertical-lr en vertical-rl. Als de paginarichting van-links-naar-rechts is of niet is opgegeven, is het standaardgedrag horizontal-lr. Gebruik de waarde horizontal-rl om de paginarichting in te stellen op van rechts naar links. Gebruik de waarde vertical-rl om de paginarichting in te stellen op van rechts naar links voor Chinese, Japanse en Koreaanse boeken.
<meta name="book-type" content="children"/>	Optioneel voor kinderboeken. Verwijdert e-readerfuncties (bijvoorbeeld delen) die wellicht niet relevant zijn voor bepaalde boeken zoals e-books voor kinderen. Geldige waarden zijn children of comic.

---

Richtlijnen voor omslagafbeelding

Kindle-boeken met een aanpasbare opmaak gebruiken geen achteromslag, maar een achterblad vormt bij kinderboeken een soort afsluiting van het verhaal. Het is een goed idee om een achteromslag op te nemen als onderdeel van het ontwerp van kinderboeken. (Andere boeken die deze indeling gebruiken, hoeven geen achteromslag te verstrekken.) Verwijder streepjescodes, prijsvermeldingen en reclame van het achterblad. Tekstpop-ups zijn vereist voor de verhaaltekst op de achteromslag en aanbevolen, maar niet vereist voor andere tekst op de achteromslag.

---

Richtlijnen voor tekst

Bij boeken met een vaste opmaak kunnen gebruikers geen verschillende lettertypen kiezen. Door CSS @font-face te gebruiken en lettertypen mee te leveren bij het boek, wordt gewaarborgd dat het uiterlijk van het boekontwerp op alle apparaten en schermen consistent is. Dit zorgt ervoor dat de exacte lettertypen die voor de bron zijn gebruikt ook in het boek met een vaste opmaak worden gebruikt. Ook wordt de HTML-tekst vloeiender weergegeven wanneer wordt geschakeld tussen de paginaweergave en de weergave voor gebiedsvergroting.

Voorbeeld:

@font-face { font-family: "Arial"; /* hiermee wordt de naam van het te gebruiken lettertype toegewezen */ src: url(../fonts/arial.otf); /* voegt het bestand voor het juiste lettertype toe */ }

Tip voor toegankelijkheid: Dunne lettertypen zijn lastiger leesbaar en kunnen invloed hebben op het contrast van de tekst met de achtergrond. Amazon raadt je aan om geen dunne lettertypen in de hoofdtekst van je manuscript te gebruiken.

---

Vereisten voor content

Vereiste 1: HTML-bestandsstructuur gebruiken

Content met een vaste opmaak moet één HTML-bestand hebben voor elke pagina die wordt weergegeven op een Kindle-apparaat. Dit kun je bereiken door één afbeelding in het HTML-bestand te gebruiken of door het HTML-bestand te gebruiken om twee afbeeldingen samen te voegen tot één pagina als de vergrendelde weergaverichting is ingesteld op liggend.

Vergrendeling van staande afdrukstand:

1 afdrukpagina = 1 HTML-bestand

Voorbeeld:

Vergrendeling van liggende afdrukstand:

2 afdrukpagina's (1 afbeelding van 2 pagina's) = 1 HTML-bestand

Voorbeeld:

Vereiste 2: Gebiedsvergroting (pop-ups) gebruiken

Bij content met een vaste opmaak kan de gebruiker de tekengrootte niet wijzigen; als je toestaat dat de tekengrootte wordt gewijzigd, kan content wegvallen die belangrijk is voor het verhaal. Op de Kindle wordt gebiedsvergroting (pop-ups) gebruikt om tekst met een vaste opmaak te vergroten zonder dat de oorspronkelijke opmaak wordt aangepast. Zie de afbeelding aan het einde van deze sectie voor een voorbeeld van gebiedsvergroting.

De gebruiker activeert gebiedsvergroting door tweemaal te tikken op een 'actief gebied' op apparaten met een touchscreen. (Als de gebruiker op apparaten zonder touchscreen op de pijl-omhoog van de vijfrichtingsknop drukt en op de middelste knop drukt, wordt de weergave Kindle Tekstpop-Up of Kindle Paneelweergave geactiveerd.) Tijdens gebiedsvergroting wordt het actieve gebied (bronelement) verborgen en het vergrotingsgebied (doelelement) weergegeven. Als een e-book gebiedsvergroting ondersteunt, detecteert KindleGen automatisch de code voor gebiedsvergroting en wordt de metagegevenswaarde voor gebiedsvergroting in het OPF-bestand ingesteld op ‘true’.

Voor de ondersteuning van gebiedsvergroting zijn de volgende stappen vereist:

1. Stel het actieve gebied in door een goed gedefinieerd HTML-ankerelement (<a>)te maken rond de tekst die je wilt vergroten. Met het anker moet de klasse app-amzn-magnify worden gedefinieerd. De volgende kenmerken van het anker moeten ook in een JSON-object zijn opgeslagen als onderdeel van de waarde data-app-amzn-magnify:
   1. "targetId":"<string:elementId>" = unieke element-id van het vergrotingsgebied (positie en tekengrootte worden ingesteld in CSS-bestand)
   2. "sourceId":"<string:elementId>" = unieke element-id van de bron die wordt vergroot
   3. "ordinal":<integer:reading order> = leesvolgorde van de vergrote gebieden (de volgorde waarin panelen worden weergegeven als onderdeel van de doorlopende leesvolgorde). Dit is vereist voor alle tekst waarvoor gebiedsvergroting wordt gebruikt.
2. Wanneer vergroting is geactiveerd, wordt de brontekst niet meer weergegeven. Maak een <div>-doelelement dat zodanig is uitgelijnd dat de tekst die wordt vergroot en geplaatst, volledig wordt bedekt om de achtergrondillustratie van de pagina zo min mogelijk te bedekken. Wanneer een gebruiker dan gebiedsvergroting activeert, verdwijnt de brontekst niet uit de paginaweergave. Het is ook belangrijk om een pop-upvenster niet direct tegen de rechter- of onderrand van het scherm te plaatsen. Door verschillen tussen apparaattypen kan een fout wegens contentoverflow optreden als pop-upvensters te dicht bij deze randen staan. Controleer de content vóór publicatie op zoveel mogelijk apparaten.
3. De tekengrootte van tekst in <div> van gebiedsvergroting moet worden ingesteld op 150% van de normale tekengrootte op de pagina. Hiervoor gelden diverse uitzonderingen:
   • Eén uitzondering is wanneer de tekst op de pagina zo groot is dat een vergroting tot 150% de leesbaarheid verslechtert in plaats van verbetert. Gebiedsvergroting is niet noodzakelijk voor een tekst met een minimale hoogte van 4 mm in content voor kinderen of voor tekst met een minimale hoogte van 2 mm in content die niet voor kinderen is op een apparaat van 7".
   • Een andere uitzondering is wanneer de tekst op de pagina met meer dan 150% moet worden vergroot om de leesbaarheid in <div> van gebiedsvergroting te verbeteren. Als bijvoorbeeld de tekengrootte van de tekst op de pagina 45% is, moet de tekengrootte van de tekst in <div> van gebiedsvergroting mogelijk worden vergroot tot 225% om de tekst leesbaar te maken.

Voorbeeldpagina met vaste opmaak

Zelfde voorbeeldpagina met gebiedsvergroting geactiveerd

Voorbeeld:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

HTML- en CSS-richtlijnen

CSS-reset toepassen

Pas een CSS-reset toe op boeken met een vaste opmaak. Met een CSS-reset worden de inconsistente stijlen verwijderd die automatisch in browsers worden toegepast, zoals lettergrootten en marges, enzovoort. Door een CSS-reset toe te voegen, zoals de YUI-reset, worden deze inconsistenties verwijderd zodat ontwerpers een betrouwbare stijlsjabloon kunnen toepassen.

CSS-bestanden voor boeken met een vaste opmaak

Om de prestaties bij het omslaan van pagina's in boeken met een vaste opmaak te verbeteren, kunnen CSS-bestanden worden gesplitst, zodat elke groep HTML-pagina's een eigen CSS-bestand heeft. CSS-bestanden dienen alleen informatie te bevatten die rechtstreeks wordt gebruikt door de bijbehorende HTML-bestanden.

Content voor volledig scherm optimaliseren

Kindle-boeken worden gelezen op allerlei apparaten (zoals Fire-tablets en smartphones en tablets van andere fabrikanten) en op allerlei schermafmetingen. De 2013 Kindle Fire HD 8.9" heeft een resolutie van 1920 x 1200 pixels. Geef de content waar mogelijk dusdanig vorm dat deze beeldverhouding behouden blijft.

Voor een optimale gebruikerservaring raadt Amazon uitgevers aan om content met een vaste opmaak zo vorm te geven dat de beschikbare schermruimte zo goed mogelijk wordt benut. Als de content een andere beeldverhouding of grootte heeft, wordt deze op de Kindle-apparaten en in Kindle-toepassingen aangepast aan het scherm, gecentreerd en omgeven door een witte marge (letterbox).

Het is waarschijnlijker dat content met een vaste opmaak en andere content met veel afbeeldingen wordt vergroot, omdat klanten liever met Kindle Paneelweergave of op apparaten met een groot scherm lezen. Het is het beste om afbeeldingen met een zo hoog mogelijke resolutie te gebruiken. Amazon raadt aan om afbeeldingen in te dienen die geschaald zijn om minimaal 2x te kunnen vergroten met een hoge kwaliteit. Als je bijvoorbeeld content opmaakt voor de 2013 Kindle Fire HD 8.9”, moeten afbeeldingen minimaal 3840 x 2400 pixels groot zijn. (Dit komt overeen met de beeldverhouding en zou 2x-zoom ondersteunen.) Gebruik altijd Kindle Previewer om de kwaliteit van de content te controleren.

Grote tikbestemmingen voor gebiedsvergroting gebruiken in boeken met een vaste opmaak met tekstpop-ups

Gebiedsvergroting is primair bedoeld om de toegankelijkheid te verbeteren en is effectiever wanneer de tikbestemming groter is dan het gebied dat wordt vergroot. Als je een groter gebied mogelijk wilt maken, kun je een opvulling van 20 tot 40 pixels toevoegen aan de ankerelementen app-amzn-magnify, maar zorg dat de tikbestemmingen elkaar niet overlappen.

Gebruik van position:absolute voor tekst op afbeeldingen

Gebruik het kenmerk position:absolute als je tekst precies op een afbeelding wilt plaatsen. Gebruik dit kenmerk alleen voor boeken die een vaste opmaak nodig hebben, zoals plaatjesboeken voor kinderen waarin tekst een specifieke plaats inneemt ten opzichte van afbeeldingselementen op de achtergrond.

Het toekomstbestendig maken van content met een vaste opmaak met tekstpop-ups

Per definitie wordt vaste opmaak ontworpen voor één schermgrootte. Om ervoor te zorgen dat je content ook in de toekomst goed functioneert, raadt Amazon aan pixels te gebruiken voor tekstgrootte en het plaatsen van tekstblokken. Door de lettergrootte of tekstpositie te definiëren in percentages kan leiden tot het gebruik van gedeelten van pixels en dit kan op verschillende apparaten anders worden geïnterpreteerd.

---

Boeken met vaste opmaak en tekstpop-ups maken met meerdere achtergrondafbeeldingen en tekst

In deze sectie wordt de juiste manier uitgelegd om pagina's met één achtergrondafbeelding en tekst te maken. Hiervoor zijn veel mogelijke oplossingen, maar Amazon wil ervoor zorgen dat de codering gemakkelijk en met een minimum aan inspanning overgezet kan worden. De meegeleverde sjabloon voldoet hieraan doordat de CSS-regels worden bijgewerkt zonder de HTML-code te wijzigen.

Pagina's met twee afbeeldingen naast elkaar gebruiken als de vergrendelde weergaverichting is ingesteld op liggend

Veel boeken hebben een liggende weergave die uit één afbeelding bestaat. Bij andere boeken bestaat de liggende weergave uit twee afbeeldingen naast elkaar die samengevoegd zijn.

In onderstaand voorbeeld is de liggende weergave 1024 x 600 pixels, wat de resolutie van het volledige scherm voor de Kindle Fire (1e generatie) is. De afbeeldingen voor elke pagina moeten exact de halve breedte van het volledige scherm hebben: 512 x 600 pixels. De unieke onderdelen van elk element worden met behulp van CSS-id's van een label voorzien; de gemeenschappelijke onderdelen gebruiken CSS-klassen. De linkerafbeelding wordt op de linkerpagina van de twee weergegeven. De rechterafbeelding wordt naar de rechterkant van de pagina verplaatst als je een margin-left-stijl definieert die is ingesteld op de breedte van de linkerafbeelding.

Het eindresultaat is twee pagina's die samengevoegd zijn tot één afbeelding die in de modus Liggend kan worden bekeken. Dit verschilt van een synthetische dubbele-paginaweergave, waarbij één pagina zichtbaar is in de modus Staand en twee pagina's naast elkaar in de modus Liggend. Deze indeling is uniek voor stripboeken.

HTML:

<div class="fs"> <div id="fs9-img" class="lPage"></div> <div id="fs10-img" class="rPage"></div> </div>

CSS:

/* Gebiedsvergroting van toepassing voor beide pagina's */ #fs9-img { background-image: url("../images/005a.jpg"); background-size:100% 100%; } #fs10-img { background-image: url("../images/005b.jpg"); background-size:100% 100%; } div.fs { height: 600px; width: 1024px; /* 2x paginabreedte */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1x schermbreedte */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1x schermbreedte / margin-left: 512px; /* deze waarde is gelijk aan de waarde van de breedte van de linkerafbeelding */ }

Tekstblokken plaatsen

Geef de juiste positie en tekengrootte op in percentages. Hierdoor kan de positie consistent worden geschaald bij verschillende resoluties en wordt compatibiliteit bij meer verschillende apparaten en schermen gewaarborgd. Elke alinea moet worden gegroepeerd binnen één <div>-element, terwijl meerdere regels van elkaar worden gescheiden door <br/>-elementen. Als een aangepaste regelafstand nodig is, kun je deze via CSS-stijldefinities toewijzen in plaats van extra codering toe te voegen zoals meerdere <div>-containers of extra tags voor regeleinden.

Bekijk een voorbeeld dat voortborduurt op het voorbeeld van de afbeelding van 2 pagina's en dat laat ziet hoe tekst moet worden geplaatst op een achtergrondafbeelding: tekst wordt binnen een blok met vaste dubbele pagina's geplaatst, gebruikt percentages voor het marge-kenmerk en wordt uitgelijnd en afgespatieerd via CSS. Tekstpop-ups moeten zo worden geplaatst dat ze de bijbehorende tekst op de achtergrond bedekken.

Tekst uitlijnen

Tekst wordt standaard uitgelijnd ten opzichte van de linkerbovenhoek van het HTML-element dat de tekst bevat. Maar veel boeken hebben tekst die rechts of onder is uitgelijnd, of is uitgevuld. De gemakkelijkste manier om de uitlijning vast te stellen, is een kader rond de tekst voor te stellen en te bepalen welke randen van de alinea bij een marge horen (boven, links, rechts, onder).

Gebruik nooit vaste spaties (&nbsp;) voor tekstuitlijning. Plaats in plaats daarvan <div>-elementen die tekst met een vaste positie bevatten door de CSS-elementen voor boven, rechts, onder en links te gebruiken. Gebruik twee aansluitende kanten om elk <div>-element te plaatsen. Gebruik bijvoorbeeld boven en links, maar nooit boven, links en onder. CSS text-indent en line-height zijn nuttig bij het uitlijnen van tekst binnen HTML-blokelementen.