# Sandbox : les aperçus

> Les onglets Canvas, PDF, Folio, HTML et EPUB 3 de la zone d’aperçu principale : ce que chacun montre et ce qu’il permet de faire

- Version HTML: https://postext.dev/fr/docs/sandbox-previews
- Dernière mise à jour: 2026-10-16
- Temps de lecture: 16 min
- Autres langues: [en](https://postext.dev/en/docs/sandbox-previews.md), [es](https://postext.dev/es/docs/sandbox-previews.md), [ca](https://postext.dev/ca/docs/sandbox-previews.md), [de](https://postext.dev/de/docs/sandbox-previews.md), [it](https://postext.dev/it/docs/sandbox-previews.md), [pt](https://postext.dev/pt/docs/sandbox-previews.md), [zh](https://postext.dev/zh/docs/sandbox-previews.md), [ja](https://postext.dev/ja/docs/sandbox-previews.md), [ar](https://postext.dev/ar/docs/sandbox-previews.md)

## En bref

Cette page présente la partie droite du Sandbox, où apparaissent les pages terminées. Cinq onglets montrent le même livre de cinq façons : en images de pages, en fichier PDF, en livre 3D que l’on feuillette, en page web et en livre numérique EPUB. Changer d’onglet ne refait pas la mise en page : chaque onglet montre les mêmes pages. La page explique ce que montre chaque onglet et ce que vous pouvez y faire.

## Zone d’aperçu principale

La partie droite de l’interface affiche le rendu. Cinq onglets sont disponibles, un par mode de rendu, dans cet ordre : **Canvas**, **PDF**, **Folio**, **HTML** et **EPUB 3**. Changer d’onglet ne relance pas la mise en page : le même VDT alimente chaque moteur de rendu, si bien que le contenu affiché est cohérent d’un mode à l’autre. L’onglet Folio n’est proposé que là où le navigateur dispose de WebGL2 et où l’écran n’est pas celui d’un téléphone (voir [Onglet Folio](https://postext.dev/fr/docs/sandbox-previews.md#onglet-folio)).

Chaque zone d’aperçu exécute la chaîne de mise en page dans un **Web Worker** dédié (`postext/worker`). Un hook `useLayoutWorker` propre à chaque zone d’aperçu détient la référence du worker, lui transmet les polices sous forme d’`ArrayBuffer` transférables, et pilote les constructions avec une **annulation où la dernière demande l’emporte** : une frappe ou le déplacement d’un curseur interrompt l’`AbortSignal` de la construction précédente avant que la suivante ne commence, de sorte qu’une frappe rapide n’accumule jamais de travail périmé sur le thread principal. Démonter une zone d’aperçu libère son worker et rejette toute construction en attente. Voir [Configuration → Exécuter la mise en page dans un Web Worker](https://postext.dev/fr/docs/configuration-programmatic-usage.md#mise-en-page-dans-un-web-worker) pour le schéma d’intégration utilisé ici.

> **Figure: Un VDT, cinq sorties**
> Le Markdown et la configuration du Sandbox alimentent un unique VDT en mémoire. Canvas, PDF, Folio, HTML et EPUB 3 font chacun leur rendu à partir de ce même VDT, si bien que chaque onglet montre la même mise en page.
>
> *Un seul VDT alimente les cinq onglets de sortie.*

### Onglet Canvas

Affiche un aperçu matriciel du document dans un élément HTML5 `<canvas>`. Il donne une représentation fidèle au pixel près de l’aspect du document composé final, y compris le positionnement précis du texte, la disposition des colonnes et le placement des ressources.

Une barre d’outils en haut de la zone d’aperçu du canvas offre :

- **Contrôles de zoom** : zoom avant et arrière (×1,25 par pas, de ×0,25 à ×4). Zoomer à la main désactive le mode d’ajustement.
- **Modes d’ajustement** : ajuster à la largeur ou à la hauteur de la page. Ils s’activent et se désactivent ; l’ajustement se recalcule automatiquement quand la fenêtre est redimensionnée.
- **Modes d’affichage** : page simple (une page par rangée) ou double page (disposition de livre où la première page apparaît à droite, en recto, et où les pages suivantes sont associées en doubles pages). Un livre relié à droite (`page.binding`, chinois vertical) montre ses doubles pages dans l’autre sens : la page 1 seule à gauche, puis `[3 | 2]`, `[5 | 4]`. Sur une page verticale, un clic tombe sur le caractère situé sous le pointeur, et le curseur est une barre en travers de la colonne.
- **Aperçu d’impression** (icône `Printer`) : montre les pages telles qu’elles seront imprimées, désactivé par défaut et mémorisé par le navigateur : chaque couleur séparée selon le profil de sortie de *Préparation pour l’impression* et affichée sur le blanc propre du papier, les grandes surfaces noires en noir enrichi ; un PDF forcé en niveaux de gris s’affiche en encre noire seule. Seul ce qui s’imprime apparaît : ni repères d’écran ni contours (les constats du contrôle en amont sont dans **Vérifications**). L’onglet Folio partage cet interrupteur. Il repeint les pages et ne les remet jamais en page.

Les pages sont dessinées à la demande via `IntersectionObserver` : seules les pages visibles (plus une marge de 200 px) sont dessinées sur le canvas, ce qui limite l’usage de la mémoire GPU pour les longs documents.

### Onglet PDF

Produit un vrai PDF du document courant avec le package `postext-pdf` et l’affiche dans une visionneuse PDF du navigateur intégrée. Le PDF est reconstruit automatiquement au premier montage et à chaque régénération ultérieure, à partir du même VDT qui alimente les onglets Canvas et HTML : les coupures de ligne, les limites de page et le placement des ressources correspondent donc au pixel près entre les trois moteurs de rendu, jusqu’à la compression des dernières lignes trop pleines que Knuth–Plass accepte parfois.

Une barre d’outils flottante en bas à droite de la zone d’aperçu offre :

- **Recalculer** (icône `RefreshCw`) : reconstruit le PDF à partir du Markdown et de la configuration courants. Utile après avoir changé un réglage qui ne déclenche pas de lui-même une reconstruction, ou quand les polices ont fini de se charger.
- **Télécharger** (icône `Download`) : enregistre le PDF courant sur le disque. Le nom du fichier est tiré du premier titre H1 du document (à défaut, `document.pdf`).
- **Imprimer** (icône `Printer`) : ouvre la boîte de dialogue d’impression du navigateur sur la visionneuse PDF intégrée, ce qui, dans la plupart des navigateurs, permet d’imprimer ou d’enregistrer de nouveau en PDF.
- **Chapitre courant / Livre entier** (sélecteur à gauche de la barre d’onglets, pour les livres de plus d’un chapitre) : produit tous les chapitres en un seul PDF continu au lieu du chapitre actif placé à la suite de ceux qui le précèdent (par défaut). Le changer régénère le PDF. Le canvas a son propre sélecteur (voir [Livres et chapitres](https://postext.dev/fr/docs/sandbox-books-saving.md#livres-et-chapitres)).

En coulisse, le Sandbox utilise une fonction utilitaire `createPdfFontProvider()` qui récupère sur le CDN jsdelivr de Fontsource des fichiers WOFF2 statiques par graisse, ceux-là mêmes avec lesquels ses aperçus sont mesurés, les décompresse en TTF dans le navigateur et transmet les octets à `pdf-lib` via `renderToPdf`. Des polices statiques par graisse (plutôt qu’une seule police variable) sont nécessaires pour que le texte gras soit réellement intégré dans la graisse grasse. Voir [Produire des PDF](https://postext.dev/fr/docs/configuration-pdf-output.md#générer-des-pdf) pour le même schéma utilisé hors du Sandbox.

### Onglet Folio

Montre le livre comme un objet imprimé : les pages mises en page par le moteur, reliées et posées ouvertes sur un bureau, en 3D (`postext-folio`, three.js). Les pages sont les images peintes par le canvas lui-même, affichées texel pour pixel, si bien que le texte est aussi net que dans l’onglet Canvas ; ce qui change, c’est tout ce qui les entoure. Le papier, la reliure, le bureau et la lumière viennent du groupe **Folio** du panneau Maquette (la configuration `folio`), et une série `:::paper` dans le texte imprime ses pages sur une autre sorte de papier (voir [Format de document › `:::paper`](https://postext.dev/fr/docs/document-format-directives.md#paper)).

- **Ce qui est mis en page.** L’onglet Folio suit le sélecteur **Chapitre courant / Livre entier** du canvas. Un chapitre est montré comme une partie de son livre : les pages qui le précèdent et le suivent sont comptées dans l’épaisseur des deux blocs de pages, et le chapitre s’ouvre du bon côté de la double page. Un livre relié à droite (`page.binding: 'right'`, ou un livre vertical) est posé en miroir et tourne ses feuillets vers la gauche.
- **Tourner les pages.** Prenez une page par son bord et faites-la passer de l’autre côté ; lâchez-la au-delà de la moitié et elle tourne, en deçà elle retombe. Un clic sur une page la tourne (la page de droite vers l’avant, celle de gauche vers l’arrière), de même que les boutons ‹ › de la barre d’outils et les touches fléchées, Page précédente/suivante, Début et Fin quand le livre a le focus. Chaque feuillet se courbe selon son papier : le papier bible s’enroule serré, le bristol tourne en un large arc, le carton et les couvertures tournent comme des plaques rigides.
- **Grands sauts.** Une page située à plus de dix pages (tapée dans le champ de page, désignée par le permalien, atteinte par un lien ou par le curseur du panneau Texte) est atteinte en un seul mouvement : le bloc des pages intermédiaires se soulève d’un tenant, aussi épais que ces pages, et se rabat de l’autre côté. Jusqu’à dix pages, les feuillets tournent un par un.
- **Faire le tour du livre.** Un glisser avec le bouton droit fait tourner la vue autour du livre, jusqu’à 70° depuis la verticale : pour voir le dos, la tranche ou l’épaisseur du bloc. La vue reste où vous la laissez, même pendant que les pages tournent, jusqu’à ce que **Réinitialiser la vue** la ramène doucement à la vue que donnent les réglages (*Inclinaison* et *Rotation*). **Enregistrer comme vue par défaut** enregistre la vue telle que vous la voyez dans ces réglages, si bien que le livre s’ouvre ainsi et que Réinitialiser la vue y revient.
- **Action du pointeur.** Trois boutons de la barre d’outils choisissent ce que fait le bouton gauche (un doigt, un stylet) sur le livre : **Tourner les pages à la main**, par défaut, comme ci-dessus ; **Faire pivoter la vue**, comme un glisser avec le bouton droit, pour un pavé tactile ou une tablette ; **Sélectionner du texte**, qui fonctionne comme dans l’onglet Canvas sur le livre tel qu’on le voit, incliné ou pivoté : un clic place le curseur dans le panneau Texte, un glisser sélectionne, un double-clic prend un mot, un clic sur un lien le suit. Le choix est mémorisé ; H, O et S le changent quand le livre a le focus.
- **Suivre l’éditeur.** Le curseur et la sélection du panneau Texte sont dessinés sur les pages, et y restent pendant la saisie : la page montre la modification dès qu’elle est remise en page. Déplacer le curseur de l’éditeur vers une page non affichée tourne le livre jusqu’à elle.
- **Couvertures.** Avec *Couvertures : Un emboîtage autour des pages*, le livre est relié dans un emboîtage de toile, de carte ou de cuir de la couleur de couverture. Avec *Les pages du document*, la première page est la première de couverture et la dernière page (quand elle tombe sur une page de gauche) la quatrième de couverture : le livre reste fermé jusqu’à ce qu’on tourne la couverture, et tourner le dernier feuillet le referme. Un livre épais s’ouvre avec son dos dressé entre les deux blocs.
- **La barre d’outils.** Une barre flottante comme celle du canvas : **Recalculer**, **Réinitialiser la vue**, **Enregistrer comme vue par défaut**, les trois modes du pointeur, **Aperçu d’impression** (l’épreuve du canvas, sur le blanc du papier du profil de sortie, si bien que la teinte du papier du livre est mise de côté pendant ce temps ; le même interrupteur que celui du canvas), l’épingle, ‹ › et le champ de page, qui prend un numéro de page du livre et tourne jusqu’à sa double page. La page de droite de la double page ouverte est celle que nomme le permalien (`view=folio&page=N`).
- **Les réglages s’appliquent aussitôt.** Les réglages de Folio ne font pas partie de la mise en page : changer le papier, la reliure ou la lumière redessine le livre sans remettre une seule page en page.
- **Où il est proposé.** L’onglet exige WebGL2 et un écran dont le petit côté mesure au moins 600 px : sur un téléphone, le livre en 3D demande plus de mémoire que le navigateur n’en accorde à un onglet, si bien que l’onglet n’y est pas affiché (ni dans un navigateur sans WebGL2). Dans un panneau de moins de 560 px de large, le livre montre une page à la fois ; le feuillet tourne toujours par-dessus le dos. Quand le système demande de réduire les animations, les doubles pages changent sans tourner.
- **Vidéos sur la page.** Un clic sur l’affiche d’une vidéo la lit sur la page, dans n’importe lequel des trois modes du pointeur, et l’image continue de bouger pendant que le feuillet tourne et se courbe. Un autre clic la met en pause ; en lancer une autre arrête la première, sauf si *Lire en même temps que d’autres vidéos* est activé ; la vidéo s’arrête quand le livre s’immobilise sur une double page qui ne la montre plus. Espace lit ou met en pause la vidéo de la double page ouverte. Une vidéo dont *Lecture automatique* est activée démarre d’elle-même la première fois que sa double page s’affiche, avec le son une fois que vous avez cliqué sur la page (en sourdine avant, et un clic rétablit le son) ; c’est le cas des deux vidéos du guide. Les fichiers téléversés et les vidéos à une adresse (MP4, HLS) se lisent ainsi quand leur serveur autorise les lectures cross-origin ; les vidéos YouTube et Vimeo tournent la page comme avant (voir [Format de document › Vidéos sur les pages de Folio](https://postext.dev/fr/docs/document-format-resources.md#les-vidéos-sur-les-pages-de-folio)).
- **Alternatives textuelles.** Chaque page est dessinée comme une image ; son nom accessible renvoie à l’onglet HTML et au panneau Texte pour son texte.

### Onglet HTML

Affiche le rendu de postext dans un conteneur Shadow DOM, ce qui garantit une isolation complète des styles par rapport à la page hôte. Le CSS éditorial (typographie, espacements, filets de colonne) est injecté dans la racine fantôme, si bien qu’il ne peut ni être affecté par les styles de l’application environnante ni s’y répandre.

Les liens Markdown sont actifs ici et dans le PDF (voir [Format de document › Liens](https://postext.dev/fr/docs/document-format-inline.md#liens)). Dans cet onglet, cliquer sur un lien ouvre sa cible dans un nouvel onglet du navigateur, de sorte que le Sandbox reste ouvert ; les renvois `:ref` sautent toujours à l’intérieur du document.

Les vidéos se lisent ici : une vidéo YouTube ou Vimeo dans le lecteur de la plateforme, un fichier ou une adresse dans le lecteur du navigateur (un flux HLS via hls.js là où le navigateur ne lit pas le HLS lui-même), avec les options de lecteur du *Style des vidéos* du panneau Maquette et de chaque vidéo. Les clics sur un lecteur vont au lecteur, pas à l’éditeur. Avec **Dans la visionneuse HTML** réglé sur *Affiche*, l’onglet montre l’affiche imprimée, avec un lien vers la vidéo.

Une barre d’outils en haut de la zone d’aperçu offre :

- **Contrôles de la taille du texte** : réduire ou agrandir le texte courant en préservant chaque mesure relative de la configuration.
- **Modes de colonnes** : une seule (une haute colonne qui défile) ou plusieurs (le nombre de colonnes dont la largeur se rapproche le plus de la longueur de ligne configurée, avec un défilement horizontal aimanté entre les pages). Un document à deux colonnes garde ses pages à deux colonnes, mais la visionneuse peut afficher un nombre impair de colonnes (trois plutôt que deux étirées ou quatre écrasées) quand c’est l’ajustement le plus proche ; la dernière appartient alors à la page suivante, à moitié visible. Un document ou une section en *Plusieurs colonnes* s’affiche aussi en pages à deux colonnes : trois à huit colonnes d’impression seraient des lamelles à la largeur d’un écran, aussi la visionneuse compose-t-elle son texte à deux colonnes par page et en montre-t-elle autant côte à côte que la longueur de ligne le permet. Un livre relié à droite (`page.binding`) fait défiler ses pages de droite à gauche en mode plusieurs colonnes : la visionneuse s’ouvre à l’extrémité droite et la flèche ‹ mène à la page suivante. Un livre composé verticalement ne se lit qu’en mode plusieurs colonnes : le bouton **Une colonne** est désactivé, avec une infobulle qui en donne la raison, et le choix que vous aviez enregistré revient avec le prochain livre horizontal.

La géométrie des colonnes est pilotée par la section **Lecteur web (HTML)** du panneau Maquette (**Maquette → Export**) : `maxCharsPerLine` fixe la longueur de ligne cible en caractères du caractère du texte courant, `columnGap` l’écart horizontal entre les colonnes en mode plusieurs colonnes, et `optimalLineBreaking` active ou désactive Knuth–Plass dans la visionneuse. Voir la [référence de configuration de la visionneuse HTML](https://postext.dev/fr/docs/configuration-fonts-colors-viewers.md#visionneuse-html) et l’[exemple d’intégration](https://postext.dev/fr/docs/configuration-html-folio-epub.md#intégrer-la-visionneuse-html) de bout en bout pour le même schéma qu’utilise le Sandbox en interne.

### Onglet EPUB 3

Écrit le livre entier sous forme de fichier EPUB 3 avec le package `postext-epub`, l’affiche dans une liseuse à l’intérieur de l’onglet et le télécharge. Le fichier est construit dans le navigateur à partir de la même mise en page chapitre par chapitre que celle qu’utilise l’onglet PDF pour **Livre entier**, si bien que ses numéros de page, ses notes, ses renvois, sa table des matières et son index sont ceux qu’imprime le PDF. L’onglet n’a pas de sélecteur **Chapitre courant / Livre entier**, puisqu’un EPUB contient toujours le livre entier. À la place, à gauche de la barre d’onglets, il propose le rendu (sous forme d’icônes sur un téléphone).

EPUB 3 a deux rendus, désignés par la propriété `rendition:layout` du package :

- **Mise en page fixe** (`pre-paginated`, souvent appelée FXL) : chaque page telle qu’elle est imprimée. Chaque page est un document à part, au format de la page, et le texte se trouve là où le PDF le place, dans les polices du livre, mais reste du vrai texte que l’on peut sélectionner, rechercher et faire lire à voix haute. Les doubles pages s’associent comme à l’impression, et un livre relié à droite (arabe, chinois vertical) se tourne de droite à gauche. Ce rendu conserve la maquette : colonnes, flottants, titres courants, ouvertures, coupures de ligne exactes. Choisissez-le pour les livres dont les pages sont conçues comme des pages, tels que les livres illustrés, les manuels, les catalogues et les magazines, et pour les systèmes de lecture à grand écran. Sur un petit écran, la page est réduite, et le lecteur zoome pour la lire.
- **Recomposable** (par défaut sur les téléphones et les ordinateurs, et valeur par défaut d’EPUB) : le texte, les figures et les tableaux dans l’ordre de lecture, recomposés par le système de lecture pour son écran et pour le caractère, le corps et les marges que choisit le lecteur. Les paragraphes sont reconstruits à partir des lignes mises en page (les traits d’union ajoutés en fin de ligne sont retirés), les figures et les tableaux suivent le texte qui les cite, les encadrés deviennent des apartés, les notes de bas de page renvoient aux notes en fin de chaque chapitre et inversement, et les numéros des pages imprimées sont conservés comme repères de page. Une feuille de style tirée de la maquette donne leur aspect aux titres, aux encadrés, aux tableaux et aux légendes, mais la géométrie de la page disparaît : pas de colonnes, pas de titres courants, pas de coupures de ligne fixes. Choisissez-le pour le texte suivi, comme les romans, les essais et les rapports, et pour les téléphones et les liseuses à encre électronique.

Tant qu’aucun n’a été choisi, l’onglet s’ouvre en mise en page fixe sur une tablette comme un iPad, dont l’écran a la place de la page imprimée, et en recomposable partout ailleurs. Le choix est mémorisé d’une visite à l’autre (`postext-sandbox-epub-layout`), et le changer réécrit aussitôt le fichier.

- **Génération.** L’EPUB est écrit la première fois que l’onglet s’ouvre, puis chaque fois qu’on appuie sur **Recalculer**. Une barre de progression compte les chapitres en cours de mise en page, puis les étapes de l’écriture (polices, images et couverture ; pages ou chapitres ; package), et les lecteurs d’écran annoncent quand le fichier est prêt ou a échoué. Après une modification, une flèche à côté de **Recalculer** signale que le fichier ne correspond plus au texte, comme dans l’onglet PDF. Quitter l’onglet ou changer de rendu arrête une génération en cours. Un long livre prend quelques secondes, pendant lesquelles la page ne répond pas.
- **Ce que contient le fichier.** Les métadonnées viennent du front matter du premier chapitre : `title`, `subtitle`, `author` (un nom ou une liste), `publishDate` ou `date`, `isbn` ou `identifier`, `publisher`, `rights` et `description` ; la langue vient de la `locale` de la configuration. Un livre sans identifiant en reçoit un tiré du projet (ou du livre d’exemple et de sa langue), de sorte que chaque EPUB d’un même livre garde une seule identité dans la bibliothèque d’un lecteur. Chaque famille de police que nomme la maquette est intégrée : les tranches de Google Fonts uniquement là où le livre imprime des caractères qu’elles contiennent, les familles personnalisées sauf si elles sont marquées comme non redistribuables. Les images entrent telles qu’elles sont enregistrées, jamais sous la forme de l’original d’impression du PDF ; chaque SVG emporte les polices que nomme son texte (familles personnalisées comme familles Google), sauf les familles marquées comme non redistribuables, qui sont signalées. Les fichiers vidéo entrent sous `media/` et se lisent dans le lecteur de la liseuse ; un fichier sans ses octets se lit depuis son adresse de production, que le package déclare comme ressource distante, et une vidéo YouTube ou Vimeo est son affiche avec un lien vers la vidéo. La couverture est l’image propre du livre quand c’est un bitmap d’au moins 600 px de large, sinon la première page rendue en 1 600 px de large sans sa marge de traits de coupe.
- **La liseuse.** L’onglet ouvre le fichier qu’il vient d’écrire, les octets mêmes que vous téléchargez, et non un aperçu séparé. La mise en page fixe montre une page, ou une double page quand le panneau est assez large, mise à l’échelle pour tenir ; le livre recomposable se pagine un écran à la fois (de haut en bas pour le chinois vertical), et ses pages se suivent d’un chapitre à l’autre. Les liens du livre déplacent la liseuse ; les liens web et mail s’ouvrent dans un nouvel onglet du navigateur. ← / →, Page précédente / Page suivante, Début et Fin tournent les pages, et dans un livre de droite à gauche ← avance.
- **La barre d’outils.** Une barre flottante comme celle de l’onglet PDF : **Recalculer**, l’épingle, **Télécharger l’EPUB** avec la taille du fichier (le fichier porte le titre du livre), un bouton d’avertissements quand l’écriture a signalé quelque chose, **Sommaire** (une liste de sauts tirée de la table des matières du livre), **Agrandir le texte** et **Réduire le texte** (recomposable seulement, en gardant votre position), ‹ › et, en mise en page fixe, le champ de page. Le champ de page compte les pages dans l’ordre de lecture du fichier, la couverture étant la 1 ; les cadres nomment chaque page par son numéro imprimé.
- **Avertissements.** Le bouton d’avertissements liste ce que le fichier n’a pas pu reprendre tel que le livre l’a : une image sans fichier enregistré (un cadre vide prend sa place), une famille, une graisse ou un style sans police intégrée (les systèmes de lecture en substituent une), une famille omise parce qu’elle ne peut pas être redistribuée, et tout ce que le rendu ne peut pas exprimer. Les mêmes messages vont à la console du navigateur.
- **Vérifier le fichier.** Les deux rendus du guide et des livres d’exemple passent [W3C EPUBCheck](https://www.w3.org/publishing/epubcheck/) 5.4 sans erreur ni avertissement. Pour vérifier votre propre livre, téléchargez-le et lancez `epubcheck book.epub`, ou lisez-le dans Apple Books, Thorium Reader ou Calibre.

Voir [Livres EPUB](https://postext.dev/fr/docs/configuration-html-folio-epub.md#livres-epub-postext-epub) pour écrire les mêmes fichiers depuis votre propre code.