Certains livres présentent des éléments à position et dimensions fixes où le texte ne peut pas être redimensionné ni réparti différemment. Par exemple, les livres pour enfants et les beaux livres grand format incluent des images en plein écran, avec du texte positionné très précisément par rapport aux images d'arrière-plan, même si ce format n'est pas exclusif à ce type de livre.

Les livres à mise en page fixe ne prennent pas en charge le texte réajustable et ne peuvent être utilisés que si l'ensemble du livre est adapté à une mise en page fixe. Les livres ne peuvent pas être partiellement réajustables ou partiellement mis en page fixe. Pour en savoir plus sur la création de ce type d'eBooks avec Kindle Kid's Book Creator, reportez-vous à la section.

À l'heure actuelle, ce format ne prend pas en charge la composition améliorée.

Important : les balises d'ancrage imbriquées ne sont pas prises en charge dans les livres à mise en page fixe. Les livres à mise en page fixe comportant des balises d'ancrage imbriquées seront supprimés.

Table des matières

• Règles applicables aux métadonnées
• Règles applicables à l'image de couverture
• Règles applicables à la mise en forme du texte
• Exigences relatives au contenu
• Règles applicables aux balises HTML et CSS
• Créer des livres à mise en page fixe avec pop-ups textuels comprenant des images d'arrière-plan et du texte couvrant plusieurs pages

---

Règles applicables aux métadonnées

Le fichier OPF spécifie les métadonnées nécessaires aux livres à mise en page fixe. Malgré leur similitude, les différents types de formats à mise en page fixe présentent des différences majeures. Sauf indication contraire, les informations relatives aux livres à mise en page fixe avec pop-ups textuels ne s'appliquent pas aux autres formats, comme les livres à mise en page fixe avec pop-ups d'images ou cases virtuelles.

Métadonnées	Description
La mise en page peut être définie à l'aide de l'un des champs de métadonnées suivants : 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Obligatoire. Indique que le livre a une mise en page fixe. Les valeurs acceptées pour les métadonnées rendition:layout sont reflowable ou pre-paginated. La valeur par défaut est reflowable. Les valeurs acceptées pour les métadonnées fixed-layout sont true ou false. La valeur par défaut est false.
<meta name="original-resolution" content="1024x600"/>	Obligatoire. Indique la résolution d'origine du contenu (« 1024x600 » n'est qu'un exemple). Les dimensions en pixels peuvent être exprimées par n'importe quel entier positif. Ces valeurs doivent conserver les proportions générales du contenu d'origine.
L'orientation peut être définie à l'aide de l'un des champs de métadonnées suivants : 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> Remarque : actuellement non pris en charge dans iOS.	Facultatif (mais recommandé). Les valeurs acceptées pour les métadonnées rendition : layout sont portrait, paysage ou auto. Cette option verrouille l'orientation du livre en mode portrait ou paysage. Si la valeur choisie est auto, les modes portrait et paysage sont tous deux pris en charge. La valeur par défaut est auto. Les valeurs acceptées pour les métadonnées orientation-lock sont portrait, landscape ou none. Cette option verrouille l'orientation du contenu en mode portrait ou paysage. Si la valeur choisie est none, les modes portrait et paysage sont tous deux pris en charge. La valeur par défaut est none.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Facultatif. Définit l'ordre dans lequel les pages sont affichées, le mode de lecture et le type de navigation (y compris pour les pop-ups textuels Kindle, l'affichage case à case Kindle et les cases virtuelles Kindle). Les valeurs acceptées sont horizontal-lr, horizontal-rl, vertical-lr et verticalrl. Le comportement par défaut s'applique lorsque les pages progressent de gauche à droite (valeur horizontal-lr) ou que le sens de progression n'est pas spécifié. Utilisez la valeur horizontal-rl pour définir le sens de la progression des pages de droite à gauche. Utilisez la valeur vertical-rl pour définir le sens de la progression des pages de droite à gauche pour les livres chinois, japonais et coréens.
<meta name="book-type" content="children"/>	Facultatif, destiné aux livres pour enfants. Supprime certaines fonctionnalités (par exemple, le partage) qui ne sont pas nécessairement pertinentes dans les livres pour enfants et autres contenus similaires. Les valeurs acceptées sont children ou comic.

---

Règles applicables à l'image de couverture

Bien que les livres Kindle de format réajustable n'incluent pas de quatrième de couverture, celle-ci permet, dans un contenu pour enfants, de mieux marquer la fin de l'histoire. Il est donc préférable d'inclure une quatrième de couverture dans la conception des livres pour enfants. (Il n'est pas nécessaire de fournir une quatrième de couverture pour les autres livres utilisant ce format.) Supprimez tout code-barres, prix et contenu promotionnel de l'image de quatrième de couverture. Des pop-ups textuels sont obligatoires pour le texte narratif sur la quatrième de couverture et recommandés, mais non obligatoires, pour les autres types de texte sur la quatrième de couverture.

---

Règles applicables à la mise en forme du texte

Les livres à mise en page fixe ne permettent pas aux utilisateurs de choisir ni de modifier les polices de caractères. L'utilisation de l'élément CSS @font-face et l'inclusion de polices de caractères dans l'ouvrage garantissent que la présentation du livre sera cohérente sur tous les appareils et tous les écrans. Ainsi, vous vous assurez que le livre à mise en page fixe utilisera exactement les mêmes polices de caractères que le texte source, mais aussi que le rendu du texte HTML se fera de façon plus fluide lors du passage de l'affichage par page à l'agrandissement local.

Exemple :

@font-face { font-family: "Arial"; /* indique le nom de la police à utiliser */ src: url(../fonts/arial.otf); /* inclut le fichier contenant la police en question */ }

Astuce d'accessibilité : Les polices fines sont plus difficilement lisibles et peuvent avoir un impact sur le contraste perçu entre le texte et l'arrière-plan. Amazon recommande d'éviter d'utiliser des polices fines pour le corps du texte de votre manuscrit.

---

Exigences relatives au contenu

Exigence n°1 : utiliser une structure de fichiers HTML

Pour une mise en page fixe, les éditeurs doivent obligatoirement créer un fichier HTML par page représentée sur l'appareil Kindle. Pour ce faire, utilisez une image dans le fichier HTML ou le fichier HTML lui-même pour assembler deux images à afficher sur une page lorsque le verrouillage de l'orientation est défini en mode paysage.

Verrouillage en mode portrait :

1 page d'impression = 1 fichier HTML

Exemple :

Verrouillage en mode paysage :

2 pages d'impression (1 image double) = 1 fichier HTML

Exemple :

Exigence n°2 : utiliser la fonction d'agrandissement local (pop-ups)

Le contenu à mise en page fixe ne permet pas à l'utilisateur de modifier la taille de la police, car cela risquerait de faire disparaître du contenu important pour le déroulement de l'histoire. Le format Kindle offre une fonctionnalité d'agrandissement local (via des pop-ups), qui permet d'agrandir un texte à mise en page fixe sans pour autant modifier la mise en page d'origine. Un exemple d'agrandissement local est présenté à la fin de cette section.

Sur les appareils à écran tactile, l'utilisateur peut lancer l'agrandissement local en touchant deux fois une « zone active ». (Sur les appareils sans écran tactile, la flèche vers le haut du bouton de navigation permet de sélectionner une zone. L'utilisateur peut alors appuyer sur la touche centrale pour activer un pop-up textuel Kindle ou l'affichage case à case Kindle.) Lors de l'agrandissement local, la zone active (élément source) est masquée et la zone agrandie (élément cible) est affichée. Lorsqu'un eBook est configuré pour prendre en charge l'agrandissement local, KindleGen détecte automatiquement le code associé et définit la valeur des métadonnées de l'agrandissement dans le fichier OPF sur "true".

Pour prendre en charge l'agrandissement local dans votre livre, vous devez suivre la procédure ci-dessous :

1. Définissez la zone active en créant un élément HTML d'ancrage (<a>) bien défini autour du texte à agrandir. L'ancre doit spécifier la classe app-amzn-magnify. Vous devez également associer à cette ancre les attributs suivants, enregistrés dans un objet JSON dans la valeur data-app-amzn-magnify :
   1. "targetId":"<string:elementId>" = ID d'élément unique de la zone d'agrandissement (dont la position et la taille de police sont définies dans le fichier CSS)
   2. "sourceId":"<string:elementId>" = ID d'élément unique de la source à agrandir
   3. "ordinal":<integer:reading order> = ordre de lecture des zones d'agrandissement (ordre dans lequel les cases s'afficheront au cours de la lecture). Cet attribut est obligatoire pour tous les textes qui intègrent la fonctionnalité d'agrandissement local.
2. Lorsque l'agrandissement est activé, le texte source ne s'affiche plus. Créez un élément <div> cible, positionné et aligné de manière à recouvrir complètement le texte agrandi tout en laissant visible, autant que possible, l'image d'arrière-plan. Ainsi, lorsqu'un utilisateur active l'agrandissement local, le texte source ne disparaît pas de la page. Veillez également à ne pas placer de pop-up textuel contre le bord droit ou le bord inférieur de l'écran. En fonction du type d'appareil, il est possible que du contenu dépasse de l'écran si des pop-ups sont trop proches de l'un des bords. Avant de publier votre contenu, vérifiez son affichage sur autant d'appareils différents que possible.
3. La taille du texte dans la balise <div> d'agrandissement local doit être définie sur 150 % de la taille normale du texte de la page. Il existe plusieurs exceptions à cette règle :
   • N'appliquez pas cette règle lorsque le texte de la page est d'une taille telle qu'un agrandissement de 150 % nuirait à la lisibilité au lieu de l'améliorer. L'agrandissement local n'est pas nécessaire pour du texte d'une hauteur d'au moins 4 mm dans le contenu pour enfants, ou d'une hauteur d'au moins 2 mm pour les autres contenus sur un appareil de 7".
   • De même, n'hésitez pas à augmenter la taille du texte de plus de 150 % si vous estimez que cela est nécessaire pour offrir une meilleure lisibilité dans la zone <div> d'agrandissement local. Par exemple, si la taille du texte de la page est de 45 %, le texte de la zone <div> d'agrandissement local peut nécessiter un agrandissement à 225 % pour être lisible.

Exemple de page à mise en page fixe

Même page, avec l'agrandissement local activé

Exemple :

<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>

---

Règles applicables aux balises HTML et CSS

Utiliser la technique du reset CSS

Appliquez une remise à zéro (reset) CSS aux livres à mise en page fixe. Un reset CSS supprime les styles incohérents que les navigateurs appliquent automatiquement, tels que les tailles de police, les marges, etc. L'ajout d'un reset CSS, tel que le reset YUI, élimine ces incohérences, ce qui permet aux concepteurs de partir d'un modèle de style fiable.

Fichiers CSS pour les livres à mise en page fixe

Pour accélérer le passage d'une page à l'autre dans les livres à mise en page fixe, divisez les fichiers CSS de sorte que chaque groupe de pages HTML dispose de son propre fichier CSS. Chaque fichier CSS ne doit contenir que des informations directement utilisées par le fichier HTML associé.

Optimiser le contenu pour le plein écran

Les livres Kindle sont lus sur de nombreux types d'appareils (par exemple, des tablettes Fire et d'autres smartphones et tablettes) aux dimensions d'écran très variées. La résolution du Kindle Fire HD 8,9" de 2013 est de 1920 x 1200 pixels. Si possible, créez votre contenu en fonction de ces proportions.

Pour une expérience de lecture optimale, Amazon recommande fortement aux éditeurs de concevoir leur contenu à mise en page fixe, de manière à ce qu'il occupe tout l'espace disponible sur l'écran. Si les proportions ou la taille du contenu sont différentes, les appareils et applications Kindle ajusteront l'échelle d'affichage afin de remplir l'écran, et le contenu sera centré et entouré de marges blanches (cadre).

Les contenus à mise en page fixe ou comportant beaucoup d'images sont davantage susceptibles d'être agrandis, car les clients optent dans ce cas pour l'affichage case à case ou pour des appareils grand écran. Une bonne pratique consiste à utiliser la plus haute résolution d'image possible. Amazon recommande de soumettre des images dimensionnées pour permettre un agrandissement X 2 sans perte de qualité. Par exemple, si le contenu est destiné à être lu sur le Kindle Fire HD 8,9" de 2013, la taille d'image en pixels doit être d'au moins 3 840 × 2 400 (afin de respecter les proportions de l'écran et de permettre un agrandissement X 2). Utilisez toujours l'outil Kindle Previewer pour contrôler la qualité du contenu.

Utiliser de grandes zones à activer pour l'agrandissement local dans les livres à mise en page fixe avec pop-ups textuels

L'objectif principal de l'agrandissement local est de favoriser l'accessibilité, et cette fonctionnalité est encore plus efficace lorsque la zone à activer est plus grande que la zone à agrandir. Pour activer une zone plus étendue, vous pouvez ajouter une marge intérieure de 20 à 40 pixels à vos éléments d'ancrage app-amzn-magnify, en veillant toutefois à ce que les différentes zones à activer ne se chevauchent pas.

Utiliser l'attribut position:absolute pour placer du texte sur une image

Lorsque le texte doit être positionné sur l'image avec précision, utilisez l'attribut position:absolute. N'utilisez cet attribut que pour les livres nécessitant une mise en page fixe, par exemple les livres d'images pour enfants dont le texte doit être placé à un endroit précis par rapport à des éléments de l'image d'arrière-plan.

Anticiper l'évolution du contenu à mise en page fixe avec pop-ups textuels

Par définition, une mise en page fixe est conçue pour être affichée sur une seule taille d'écran. Si vous souhaitez que votre contenu soit évolutif, Amazon recommande d'utiliser des pixels pour la taille de texte et le positionnement de blocs de texte. La spécification de la taille de police ou de la position du texte en pourcentages peut générer des fractions de pixels qui peuvent être interprétées différemment d'un appareil à l'autre.

---

Créer des livres à mise en page fixe avec pop-ups textuels comprenant des images d'arrière-plan et du texte couvrant plusieurs pages

Cette section explique la marche à suivre correcte pour créer des pages comprenant une image d'arrière-plan unique et du texte. Bien qu'il existe différentes méthodes, l'objectif d'Amazon est de proposer des balises facilement transposables avec un minimum d'efforts. Le modèle fourni répond à cette exigence, car il permet de mettre à jour les règles CSS sans modification du code HTML.

Utiliser des images côte à côte lorsque l'orientation est verrouillée en mode paysage

De nombreux livres présentent des images en mode paysage. D'autres présentent deux images côte à côte en mode paysage.

Dans l'exemple ci-dessous, le format paysage mesure 1 024 x 600 pixels, soit la résolution plein écran du Kindle Fire (1re génération). Pour chaque page, la taille de l'image doit très exactement correspondre à la moitié de la largeur du plein écran, soit 512 x 600 pixels. Les parties uniques de chaque élément sont identifiées par des ID CSS, les parties communes par des classes CSS. L'image de gauche s'affiche sur le côté gauche de la double page. L'image de droite est décalée vers la droite de la page en définissant un style margin-left correspondant à la largeur de l'image de gauche.

Résultat : deux pages côte à côte forment une seule image affichée en mode paysage. Cela diffère du format synthétique, avec lequel une page est visible en mode portrait et deux pages côte à côte apparaissent en mode paysage, une mise en forme exclusivement utilisée dans les bandes dessinées.

HTML :

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

CSS :

/* Zone définie pour les deux pages*/ #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; /* 2 fois la largeur d'une page */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* largeur d'une page */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* largeur d'une page / margin-left: 512px; /* même valeur que celle définie pour la largeur de l'image de gauche */ }

Positionnement des blocs de texte

Définissez une position et une taille de police adaptées à l'aide de pourcentages. Cela permet d'adapter cette position de façon cohérente pour différentes résolutions, afin d'assurer la compatibilité avec une large gamme d'appareils et d'écrans. Chaque paragraphe doit être inclus dans un seul élément <div>, les différentes lignes étant séparées par des éléments <br/>. Si vous devez personnaliser l'interligne, utilisez des déclarations de style CSS plutôt que plusieurs conteneurs <div> ou des balises de saut de ligne supplémentaires.

Voici un exemple d'image sur deux pages qui illustre comment placer du texte sur une image d'arrière-plan. Le texte est positionné dans un bloc fixe, utilise des pourcentages pour les attributs de marge et est aligné et espacé via des propriétés CSS. Les pop-ups textuels doivent être positionnés de manière à couvrir le texte correspondant en arrière-plan.

Alignement du texte

Par défaut, le texte est placé dans le coin supérieur gauche de l'élément HTML qui le contient. De nombreux livres peuvent contenir du texte aligné à droite, en bas ou justifié. Pour déterminer l'alignement le plus adapté, le meilleur moyen consiste à imaginer un cadre autour du texte et à identifier les côtés du paragraphe qui sont associés à une marge (haut, gauche, droite, bas).

N'utilisez jamais d'espace insécable (&nbsp;) pour l'alignement du texte. Privilégiez les attributs CSS top (haut), right (droite), bottom (bas) et left (gauche) pour placer les éléments <div> qui contiennent du texte à position absolue. Indiquez deux côtés adjacents pour positionner chaque élément <div>. Par exemple, vous pouvez associer haut et gauche, mais jamais haut, gauche et bas. Les éléments CSS text-indent et line-height sont utiles pour aligner du texte à l'intérieur d'éléments de bloc HTML.