Les romans graphiques, les mangas et les bandes dessinées (que nous appellerons ici « romans graphiques ») sont les livres à mise en page fixe avec pop-ups d'images ou cases virtuelles les plus courants. Ils sont similaires aux livres pour enfants, mais présentent des difficultés particulières, car ils tendent à être plus longs et à présenter un contenu plus complexe.

Les romans graphiques comprennent des images extrêmement détaillées qui s'affichent sur un écran de 1 920 x 1 200 pixels. Pour surmonter cette difficulté et d'autres problèmes d'accessibilité, Amazon vous encourage à utiliser du contenu sur mesure et la fonctionnalité d'affichage case à case Kindle, ce qui permet d'optimiser le contenu pour une expérience de lecture haute résolution. En savoir plus sur Kindle Comic Creator.

Ce format prend en charge la composition améliorée, à condition qu'il n'y ait pas de texte hybride dans l'ebook (Voir plus d'informations sur le texte hybride).

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 relatives aux images
• Affichage case à case (agrandissement local)
• Cases virtuelles dans les bandes dessinées et les mangas
• Optimisation du contenu pour les romans graphiques
• Règles relatives à la mise en forme du texte
• La vue guidée

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 d'images ou cases virtuelles ne s'appliquent pas aux autres formats, comme les livres à mise en page fixe avec pop-ups textuels.

Règles relatives aux images

Lorsqu'ils sont optimisés pour le Kindle Fire HD 8,9" de 2013, les romans graphiques doivent s'adapter à ses proportions, soit 1920 x 1200. La résolution d'image différera en fonction du facteur d'agrandissement utilisé pour l'affichage case à case Kindle.

Néanmoins, Amazon recommande de prévoir une résolution qui assure une expérience de lecture de haute qualité à un agrandissement X 2. Les images doivent être au format JPEG. Amazon conseille d'utiliser une résolution d'image d'au moins 300 ppi.

Il existe cinq facteurs d'agrandissement standard :

Pour obtenir une bonne qualité d'image dans les romans graphiques, vous devez respecter les règles relatives à la résolution indiquées dans cette section, tout en conservant un format d'image cohérent. Veillez surtout à optimiser les images afin de préserver la netteté du dessin d'arrière-plan et la lisibilité du texte. Ces deux recommandations vous permettent d'obtenir un roman graphique d'excellente qualité.

Affichage case à case (agrandissement local)

La fonctionnalité d'affichage case à case des romans graphiques offre une expérience de lecture unique. Cette option résout les problèmes d'accessibilité et permet aux utilisateurs de suivre facilement le déroulement de l'action sur chaque page haute résolution. Les utilisateurs peuvent quitter l'affichage case à case à tout moment pour afficher la page dans son intégralité. Un exemple d'affichage case à case est présenté dans les images de cette section.

L'utilisateur active l'affichage case à case en touchant deux fois une « zone à activer ». La zone active (élément source) est alors masquée, et l'affichage case à case (élément cible) s'affiche.

Pour prendre en charge l'affichage case à case, vous devez suivre les étapes ci-dessous :

1. Définissez la zone à activer en créant un élément de conteneur (<div>) bien défini qui inclut un élément d'ancrage (<a>). L'élément <div> permet de déterminer la taille et la position de la zone à activer. L'élément <a> est configuré de manière à occuper la totalité du conteneur <div> et doit être associé à 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 l'élément HTML d'affichage case à case représentant la zone agrandie
   2. "ordinal":<integer:reading order> = ordre de lecture des zones d'agrandissement (ordre dans lequel les cases s'afficheront au cours de la lecture)
2. Créez un élément <div> cible dimensionné et positionné de façon à afficher l'action qui reflète le mieux la zone à activer.
   
   

   Capture d'écran d'un contenu à mise en page fixe

   Capture d'écran du même contenu avec l'affichage case à case activé

   Exemple :

   <div> <img src="images/page_002.jpg" alt="Images de bande dessinée" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="Images de bande dessinée"/> </div> </div>

   
   

   ---

   Cases virtuelles dans les bandes dessinées et les mangas

   La fonctionnalité Cases virtuelles est activée dans les bandes dessinées et les mangas lorsque l'éditeur n'a pas lui-même défini de cases. L'élément de métadonnées RegionMagnification permet de savoir si l'éditeur a fourni ou non des informations relatives aux cases. Si l'éditeur a inclus des cases ainsi définies sur les pages, l’affichage virtuel Case à case de Kindle n'est pas activé.

   Par défaut, chaque page est divisée en quatre cases, en fonction de la valeur de l'élément primary-writing-mode. Les exemples ci-dessous indiquent l'ordre des cases.

   Exemple :

   Mode portrait :

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Mode paysage :

   

   Vertical-lr and Horizontal-lr, Horizontal-rl et Vertical-rl

   Certains appareils prennent en charge les formats synthétiques :

   

   Vertical-rl, Vertical-lr

   Exigence nº 1 : utiliser un format synthétique lorsque le verrouillage de l'orientation est défini sur « Aucun »

   Si l'orientation n'est pas verrouillée, le contenu doit être conçu pour s'afficher aussi bien en mode portrait qu'en mode paysage. Certains appareils affichent un format synthétique avec deux pages côte à côte en mode paysage. Chaque page conçue pour s'afficher au format synthétique doit avoir une page associée définie en mode paysage. En mode portrait, les pages associées sont ignorées.

   Les pages à utiliser au format synthétique doivent être signalées par les propriétés page-spread-left et page-spread-right. Chaque page de gauche doit être associée à une page de droite, et vice versa. Les pages uniques peuvent être centrées sur l'appareil en mode paysage à l'aide de la propriété page-spread-center.

   

   En mode portrait, les deux pages sont affichées séparément :

   

   Si aucune propriété n'est spécifiée ou si une page est signalée par la propriété page-spread-left sans la propriété page-spread-right correspondante (ou inversement), Kindle suppose que la propriété appropriée est page-spread-center et centre les pages lorsque l'appareil est en mode paysage.

   Dans l'exemple suivant, l'élément primary-writing-mode est défini sur l'attribut horizontal-lr ou vertical-lr.

   Exemple :

   <spine> <itemref idref="page1" /> <!--REMARQUE : associé à properties="page-spread-center" --> <itemref idref="page2" /> <!-- REMARQUE : associé à properties="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!!-- REMARQUE : partie gauche du format synthétique --> <itemref idref="page4" properties="page-spread-right"/> <!-- REMARQUE : partie droite du format synthétique --> </spine>

   Dans l'exemple suivant, l'élément primary-writing-mode est défini sur l'attribut horizontal-lr ou vertical-lr.

   Exemple :

   <spine> <itemref idref="page1"/> <!-- REMARQUE : associé à properties="facing-page-right" --> <itemref idref="page2" /> <!!-- REMARQUE : associé à properties="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!!-- REMARQUE : partie droite du format synthétique --> <itemref idref="page4" properties="page-spread-left"/> <!!-- REMARQUE : partie gauche du format synthétique --> </spine>

   Dans le cas où une page de gauche n'a pas de page de droite correspondante (ou inversement), l'éditeur peut insérer une page HTML vierge et lui attribuer la propriété layout-blank, sauf s'il s'agit de la dernière page. S'il le souhaite, l'éditeur peut faire figurer le titre et le filigrane du livre sur cette page vierge.

   Les pages associées à la propriété layout-blank ne sont affichées qu'en mode paysage et sont ignorées en mode portrait.

   Dans certains cas, l'éditeur peut souhaiter insérer une page vierge qui sera affichée aussi bien en mode portrait qu'en mode paysage. Si tel est le cas, n'utilisez pas la propriété layout-blank. Servez-vous des règles énoncées précédemment pour le format synthétique et référencez un fichier d'image contenant une image JPEG blanche.

   Dans l'exemple suivant, l'élément primary-writing-mode est défini sur l'attribut horizontal-lr ou vertical-lr.

   Exemple :

   <spine> <itemref idref="page1" /> <!!-- REMARQUE : associé à properties="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!!-- REMARQUE : associé à properties="page-spread-right". Ignoré en mode portrait. <itemref idref="page2" properties="page-spread-left"/> <!!-- REMARQUE : partie gauche du format synthétique --> <itemref idref="page3" properties="page-spread-right"/> <!!-- REMARQUE : partie droite du format synthétique --> </spine>

   
   

   ---

   Optimisation du contenu pour les romans graphiques

   Optimisation des zones à activer

   En pratique, les zones à activer doivent couvrir 100 % de l'écran. Ainsi, l'utilisateur peut agrandir le contenu chaque fois qu'il touche deux fois une zone du roman graphique.

   
   

   Optimisation des cases d'affichage

   Par défaut, les cases d'affichage doivent représenter 150 % de la zone à activer. Vous pouvez utiliser des cases d'affichage de tailles différentes pour mettre l'accent sur une action particulière de la zone à activer.

   Placez les cases d'affichage de façon à ce qu'elles recouvrent l'image d'arrière-plan correspondante. Elles doivent être positionnées sur les cases de base et alignées sur les marges, dans la mesure du possible.

   Si le contexte reste le même pour plusieurs cases, il est acceptable de définir des cases qui se chevauchent légèrement.

   

   Si vous utilisez le facteur d'agrandissement par défaut de 150 %, les scènes d'action doivent souvent être divisées en deux cases d'affichage (généralement gauche et droite ou haut et bas). Cette solution est plus agréable pour l'utilisateur que l'utilisation d'un facteur d'agrandissement plus faible, car elle ne nuit pas à l'accessibilité et permet une lecture dans une résolution supérieure.

   Divisez les zones à activer de façon à ce que la première zone représente entre 50 et 75 % de la largeur totale, et que la deuxième zone occupe la surface restante pour atteindre les 100 %. Ainsi, lorsque l'utilisateur touche deux fois une zone proche du milieu de la case d'action, il voit d'abord la première case, puis la deuxième.

   Pour faciliter le suivi de l'action, les cases d'affichage doivent afficher une petite partie en commun.

   Première case d'affichage d'une scène d'action divisée en deux cases

   Deuxième case d'affichage d'une scène d'action divisée en deux cases

   
   

   ---

   Règles relatives à la mise en forme du texte

   Pour les livres à mise en page fixe avec pop-ups d'images : Les images doivent mesurer au moins 300 ppi, et le texte doit être net et lisible, sans pixilisation ni flou. Les majuscules doivent avoir une hauteur d'au moins 2 mm dans les fenêtres contextuelles, lorsqu'elles sont visualisées sur un appareil 7 pouces. En termes de meilleures pratiques, cela signifie généralement un agrandissement de 150 % ou plus.

   Pour les mises en page fixes avec cases virtuelles : Les images doivent mesurer au moins 300 ppi et le texte doit être net et lisible, sans pixilisation ni flou lorsqu'elles sont agrandies à 2 mm de haut, sur un appareil de 7 pouces.

   Pour afficher de grandes quantités de texte, Amazon suggère un traitement hybride, à mi-chemin entre le roman graphique et le livre pour enfants. Amazon recommande de limiter l'utilisation de ce traitement hybride aux sections de texte trop conséquentes pour être agrandies efficacement. Le texte hybride doit reproduire la mise en forme du texte d'origine en termes de hauteur de ligne, d'italiques et/ou de caractères gras, et d'apparence générale. Cela assure une meilleure expérience à l'utilisateur.

   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.

   La composition améliorée ne prend pas en charge les romans graphiques contenant du texte hybride.

   

   Exemple de code HTML pour texte hybride :

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ab aquiline regem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   Exemple de code CSS pour texte hybride :

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; font-size: 150%; font-family: "Arial"; }

   
   

   ---

   Guided view (vue guidée)

   Guided View est une série d'améliorations apportées à l'expérience de lecture d'eBook de bandes dessinées, désormais disponibles pour certaines bandes dessinées Kindle. Ces améliorations permettent aux lecteurs d'afficher une bande dessinée case par case, de manière adaptée aux appareils mobiles et dans le respect du mouvement naturel de l'œil de l'utilisateur lors de la lecture d’une bande dessinée. Guided View anime le mouvement case à case à chaque glissement, afin de donner une indication claire de la manière dont l'histoire progresse sur chaque page. Les fonctionnalités de la vue guidée sont les suivantes :

   • Une expérience de lecture guidée case à case, selon l'ordre défini par l'éditeur
   • Cases affichées en plein écran et centrées
   • Couleurs de masque personnalisées autour de chaque case affichée en plein écran

   
   

   La vue guidée est automatiquement appliquée aux bandes dessinées Kindle compatibles et utilise le code propre à l’affichage case à case existant pour positionner correctement les cases en mode Vue guidée. Amazon travaille continuellement à rendre Guided View compatible avec davantage de titres. Cette fonctionnalité sera automatiquement activée pour votre livre Kindle dès que possible.