Reflowable text et Fixed Layout

Bonne nouvelle : le livre électronique semble se démocratiser ces derniers temps. D’une part, une certaine marque a réussi à faire un buzz très respectable il y a quelques semaines avec des annonces visant l’éducation. D’autre part, des médias de masse commencent à s’intéresser au sujet. Résultat, de plus en plus de créateurs se penchent sur le dossier…  Et force est de constater que l’on répète souvent les mêmes choses en discutant avec les « nouveaux entrants ».

Depuis quelques semaines, j’ai l’occasion de revenir sur « reflowable text » et « fixed-layout » à de très nombreuses reprises, et dois également expliquer ce qui se cache derrière ces termes. Logiquement, j’en fais un article aujourd’hui —et hop, plus besoin d’expliquer, y’a plus qu’à faire un lien vers cet article.

Au « commencement », iBooks Author.

Nous ne pouvons pas le nier, beaucoup de personnes découvrent le livre numérique depuis l’annonce d’iBooks Author et des textbooks. Ces livres, au format .ibooks, ont un fonctionnement que je qualifierais d’hybride.

À gauche, le mode paysage qui se comporte comme du fixed-layout. À droite, le mode portrait qui cache tous les objets dans la marge pour se déguiser en reflowable text. Cette image ne vous explique pas grand chose. Nous allons donc tenter de décrire les fonctionnalités de chaque « mise en page » et d’expliquer leur philosophie.

Fixed-Layout

Le but ici est de réaliser un livre avec une mise en page fixe, assurer une disposition précise des éléments. Nous sommes donc sur des réalisations vraiment graphiques. Pensez aux magazines, catalogues, livres d’art (Taschen, TeNeues), livres illustrés pour enfants, etc. C’est quelque chose que nous utilisons lorsque la mise en page est très importante. À certains égards —sur certaines réalisations en tout cas—, on peut comparer le fixed-layout au document PDF.

L’approche philosophique se rapproche de l’impression papier : nous voulons que l’e-book reflète au maximum l’objet livre… sur écran. Par conséquent, le livre fixed-layout sera désigné pour une taille d’écran en particulier ; il faudra d’ailleurs spécifier une taille de page afin que les terminaux puissent redimensionner au mieux.

Toute la notion de beau livre ressort presque naturellement de cette logique puisque vous coderez ce livre fixed-layout pour qu’il soit confortablement et (par extension) réellement lisible avec un nombre limité de terminaux. Pour les autres, il faudra réadapter.

Une réalisation EPUB fixed-layout prévue pour iPad. Sur iPhone, voyez le résultat (inutile de cliquer sur la photo ci-dessous, elle est en taille réelle)…

De plus, qui dit mise en page fixe dit taille de police de caractère fixe. En effet, si vous l’agrandissiez, le texte sortirait du « cadre » du livre. Il vous faudra donc zoomer et naviguer à travers la double-page, ce qui peut vite devenir inconfortable. Amazon a trouvé une autre solution, elle consiste à agrandir le texte d’un tap sur l’écran.

Reflowable Text

Depuis ses débuts, le livre numérique a privilégié cette solution. Pour information, les formats de lecture numérique (EPUB et mobi pour citer les deux principaux) utilisent HTML et CSS, soit les langages utilisés pour les sites internet, domaine où les web-designers ont dû prendre en compte la grande diversité des résolutions des écrans des visiteurs.  De plus, l’accent a été mis sur le confort de lecture : le lecteur choisit la taille de la police de caractère, parfois l’interligne et/ou la marge, etc.

Par reflowable text, on n’entend plus que le texte est imprimé sur l’écran comme il le serait sur une page de papier, mais qu’il devient flux réglable par l’utilisateur dans un « contenant » délimité par la taille de l’écran. Aussi, plus besoin de faire rentrer une page dans un écran de 6 » (quitte à réduire la taille de police), le texte « déborde » en s’affichant sur une nouvelle page. D’ailleurs, vous ne tournez techniquement pas une page, votre liseuse scrolle plutôt comme vous le feriez sur une page internet. C’est aussi là un des très gros avantages d’EPUB sur le format PDF en ce qui concerne la lecture numérique. Pensez qu’il est largement plus facile de remplir une bouteille d’eau en ajustant le débit du robinet que d’essayer de faire rentrer deux litres d’eau dans une bouteille d’un litre et demi — Adobe (le papa de PDF) est passé à EPUB depuis 2007.

Par conséquent, plus de problème de taille d’écran à prendre en compte. Le texte s’ajustera automatiquement, sans concession de taille, de marge, etc. C’est pour cette raison qu’il faut privilégier le reflowable text pour la majorité des livres, livres dont le texte est le plus important et qui ne demandent aucune mise en page complexe ou très graphique. Pour vous en convaincre, observez ces trois photos qui démontrent la polyvalence de cette solution.

Sur iPad (écran 10 »)

Sur iPhone (écran 3.5 »)

Sur Liseuse ( écran 5 »)

Aucun problème à constater. Nous avons là un fichier EPUB « universel » qui peut être lu sur quasiment tous les terminaux de manière très confortable.

Il est très tentant de faire le mauvais choix…

Pour une raison que j’ai assez de mal à comprendre, la philosophie reflowable text n’est pas souvent bien acceptée par un nombre conséquent de personnes. « Ce n’est pas aussi beau qu’un livre papier » entends-je par ci, « je me sens vraiment limité niveau mise en page » ouïs-je par là… Et évidemment, les choses ne se sont pas arrangées avec iBooks Author qui, je trouve, donne de très très mauvaises habitudes aux utilisateurs.

Il faut reconnaître qu’iBooks Author est beaucoup plus user-friendly que l’export EPUB de l’application Pages ou les logiciels de création e-books en général. Du coup, il n’est pas étonnant que des utilisateurs se tournent vers iBA, surtout que leur livre sera plus « joli » et ce, sans effort particulier.

Mais d’un autre côté, faisons une petite liste des contraintes d’un tel choix :

  • livres lisibles uniquement sur iPad - pas sur iPhone ou Mac ;
  • des fichiers plus lourds ,
  • la tentation d’en faire trop niveau graphique avec des choses qui n’ont pas lieu d’être pour un livre purement textuel (images de fond, formes fantaisistes, images interactives parce que c’est cool d’en faire au moins une pour tester la fonction, etc.). Ces choses-là risquent d’handicaper le texte au final ;
  • pas mal de compromis parce qu’il faut gérer les deux orientations (portrait et paysage) même si l’on peut désactiver l’orientation portrait au besoin ;
  • etc.

Bon, rien que le premier point revêt une importance capitale pour moi… d’autant plus que la part de marché d’Apple s’effrite de jour en jour au profit de Kobo et Amazon en Europe. Du coup, faire du ibooks textbook ou de l’EPUB fixed-layout sans raison apparente coupe de plus en plus l’auteur (et/ou éditeur) de la majorité du marché et constitue une perte de temps et donc d’argent —c’est une vision plus financière du problème, je le concède. Ce n’est naturellement pas le meilleur choix si vous souhaitez rendre l’information disponible au plus grand nombre (à considérer que votre livre ne repose pas sur le multimédia)…

Et s’il faut vous convaincre des problématiques du fixed-layout, regardez les images suivantes. Le fichier a été codé en suivant strictement les guidelines Apple.

Sur iPad :

Sur Adobe Digital Editions :

Sur Liseuse :

À gauche, l’image de fond sur laquelle le texte de droite devrait s’afficher. Du coup, certains ne s’embêtent pas et font passer le texte en images…

Comme vous pouvez l’observer, vous offrez une mauvaise expérience de lecture aux utilisateurs qui ne possèdent pas d’iPad.

Bref, si cet article échoue à vous convaincre du bien-fondé du reflowable text et ne vous incite pas à privilégier cette solution, alors je ne pourrai rien faire pour vous…

Pour conclure, j’espère avoir réussi à vous expliquer ces termes obscurs, résumé au mieux la philosophie derrière chaque approche et vous avoir donné les arguments pour que vous puissiez faire votre (bon) choix. C’est aussi pour cette raison que j’ai volontairement codé un « livre à dominante textuelle » en fixed-layout pour l’exemple : normalement, vous avez dû vous demander pourquoi. 😉

À venir : Les bonnes pratiques de formatage reflowable text.