Français | Aide | Connexion

Veuillez évaluer votre expérience sur cette page


Très satisfait

Satisfait

Déçu

Merci ! Vos commentaires nous seront très utiles.

Si vous rencontrez un problème, n’hésitez pas à nous contacter pour obtenir de l’aide.

Rubriques d'aide

Contactez-nous

Des commentaires ? Vous ne trouvez pas la réponse dans nos pages d'aide ?

Contactez-nous

Créer des livres à mise en page fixe avec pop-ups d'images ou cases virtuelles

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

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.

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:orientation sont portrait, landscape 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"/>

Obligatoire pour les cases virtuelles dans les mangas qui se lisent de droite à gauche ; facultatif pour les autres livres à mise en page fixe. 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 vertical-rl. La valeur par défaut est horizontal-lr.

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.

<itemref idref="page-id" properties="page-spread-left"/>

Obligatoire pour les cases virtuelles dans les bandes dessinées et les mangas ; facultatif pour les autres livres à mise en page fixe. Permet aux éditeurs de préciser la mise en page (formats synthétiques) au niveau de la page, celle-ci pouvant varier tout au long du livre. Les propriétés de page doivent être spécifiées dans les éléments itemref (enfants de l'élément <spine> dans le fichier OPF).

Les valeurs acceptées sont page-spread-left, page-spread-right, page-spread-center, facing-page-left, facing-page-right et layout-blank. La valeur layout-blank peut être utilisée seule ou associée à d'autres valeurs acceptées.

La valeur par défaut est page-spread-center.

<meta name="book-type" content="comic"/>

Obligatoire pour tous les romans graphiques ; facultatif pour les autres livres à mise en page fixe. 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 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 :

Facteur d'agrandissement

Quand l'utiliser

Résolution d'image nécessaire

100 %

Évitez d'utiliser ce facteur d'agrandissement. Il ne permet pas d'agrandir l'image et pose un problème d'accessibilité pour les utilisateurs.

1 920 x 1 200 pixels

125 %

N'utilisez ce facteur d'agrandissement que lorsqu'il est absolument nécessaire pour agrandir une case de très grande taille. Il permet à l'utilisateur de voir une scène d'action de grande taille, mais n'offre qu'un agrandissement limité.

soit 2 400 x 1 500 pixels

150 %

Ce facteur d'agrandissement est celui par défaut, à appliquer de préférence. Utilisez-le autant que possible.

soit 2880 x 1800 pixels

200 %

Utilisez ce facteur d'agrandissement pour le texte de petite taille.

soit 3840 x 2400 pixels

250 %

N'utilisez ce facteur d'agrandissement que lorsque deux pages physiques sont côte à côte dans le fichier HTML et affichées en même temps, et que par conséquent, la taille du contenu affiché est considérablement réduite. L'inconvénient est que la case agrandie ne représente qu'une petite partie de la page d'origine.

soit 4800 x 3000 pixels

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

    L'expérience de lecture Guided View (vue guidée) a été développée par comiXology. Vous pouvez découvrir ici une présentation visuelle de l'expérience Guided View.

    Guided View est automatiquement appliqué aux bandes dessinées Kindle compatibles et utilise le code Panel View (affichage case à case) existant pour positionner correctement les cases en mode Guided View (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.


Une erreur inattendue s’est produite. Veuillez réessayer ultérieurement.
Votre session a expiré

Merci de vous connecter pour continuer

Connexion
edit