# Sandbox: les previsualitzacions

> Les pestanyes Canvas, PDF, Folio, HTML i EPUB 3 del viewport principal: què mostra cadascuna i què permet fer

- Versió HTML: https://postext.dev/ca/docs/sandbox-previews
- Última actualització: 2026-10-16
- Temps de lectura: 16 min
- Altres idiomes: [en](https://postext.dev/en/docs/sandbox-previews.md), [es](https://postext.dev/es/docs/sandbox-previews.md), [de](https://postext.dev/de/docs/sandbox-previews.md), [fr](https://postext.dev/fr/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 poques paraules

Aquesta pàgina explica la part dreta del Sandbox, on apareixen les pàgines acabades. Cinc pestanyes mostren el mateix llibre de cinc maneres: com a imatges de pàgina, com a fitxer PDF, com a llibre en 3D que pots fullejar, com a pàgina web i com a llibre electrònic EPUB. Canviar de pestanya no torna a compondre el llibre, així que totes mostren les mateixes pàgines. La pàgina explica què mostra cada pestanya i què hi pots fer.

## Viewport principal

El costat dret de la interfície mostra la sortida renderitzada. Hi ha cinc pestanyes disponibles, una per cada mode de renderització, en aquest ordre: **Canvas**, **PDF**, **Folio**, **HTML** i **EPUB 3**. Canviar de pestanya no torna a executar la composició: el mateix VDT alimenta tots els backends, de manera que el contingut que veus és coherent entre els modes. La pestanya Folio només s'ofereix on el navegador té WebGL2 i la pantalla no és la d'un mòbil (consulta [Pestanya Folio](https://postext.dev/ca/docs/sandbox-previews.md#pestanya-folio)).

Cada viewport executa el pipeline de composició dins d'un **Web Worker** dedicat (`postext/worker`). Un hook `useLayoutWorker` per viewport té el handle del worker, envia les fonts com a `ArrayBuffer`s transferibles i dirigeix els builds amb **cancel·lació last-wins** — una pulsació de tecla o un arrossegament de slider avorta l'`AbortSignal` del build anterior abans que comenci el següent, per la qual cosa escriure de pressa no acumula mai feina obsoleta al fil principal. Desmuntar un viewport allibera el seu worker i rebutja qualsevol build pendent. Consulta [Configuració → Executar la composició en un Web Worker](https://postext.dev/ca/docs/configuration-programmatic-usage.md#executar-la-composició-en-un-web-worker) per al patró d'integració que s'usa aquí.

> **Figura: Un únic VDT, cinc sortides**
> El markdown i la configuració del sandbox alimenten un únic VDT en memòria. Canvas, PDF, Folio, HTML i EPUB 3 es renderitzen a partir del mateix VDT, de manera que totes les pestanyes mostren la mateixa maquetació.
>
> *Un mateix VDT alimenta les cinc pestanyes de sortida.*

### Pestanya Canvas

Renderitza una previsualització rasteritzada del document en un element HTML5 `<canvas>`. Això ofereix una representació precisa al píxel de com es veurà el document compost final, inclosa la col·locació exacta del text, la maquetació per columnes i la col·locació de recursos.

Una barra d'eines a la part superior del viewport de canvas proporciona:

- **Controls de zoom** — Augmentar i reduir el zoom (1,25x per pas, interval 0,25x–4x). El zoom manual desactiva el mode d'ajust.
- **Modes d'ajust** — Ajustar a l'amplada o a l'alçada de la pàgina. S'activen/desactiven; l'ajust es recalcula automàticament en redimensionar la finestra.
- **Modes de vista** — Pàgina única (una pàgina per fila) o doble pàgina (maquetació estil llibre, on la primera pàgina apareix a la dreta com a recto i les següents s'aparellen com a dobles pàgines). Un llibre enquadernat per la dreta (`page.binding`, xinès vertical) mostra els plecs al revés: la pàgina 1 sola a l'esquerra i després `[3 | 2]`, `[5 | 4]`. En una pàgina vertical, un clic cau al caràcter que hi ha sota el punter i el cursor és una barra que travessa la columna.
- **Simula la impressió** (icona `Printer`) — Mostra les pàgines tal com s'imprimiran. Està desactivada per defecte i el navegador la recorda: cada color separat amb el perfil de sortida de *Preparació per a impremta* i mostrat sobre el blanc del paper, i les masses negres grans en negre enriquit; un PDF forçat a escala de grisos es veu només en tinta negra. Només el que s'imprimeix: ni guies de pantalla ni requadres (les incidències del preflight són a **Revisió**). La pestanya Folio comparteix l'interruptor. Torna a pintar les pàgines i no les torna a compondre mai.

Les pàgines es renderitzen de manera mandrosa mitjançant `IntersectionObserver` — només les pàgines visibles (més un marge de 200 px) es dibuixen al canvas, cosa que manté baix l'ús de memòria de GPU per a documents llargs.

### Pestanya PDF

Genera un PDF real del document actual mitjançant el paquet `postext-pdf` i el mostra dins del visor PDF integrat del navegador. El PDF es reconstrueix automàticament en muntar la pestanya per primera vegada i en cada regeneració posterior, amb el mateix VDT que alimenta les pestanyes de canvas i HTML — de manera que els salts de línia, les fronteres entre pàgines i la col·locació de recursos coincideixen al píxel entre els tres backends, inclosa la compressió de les línies finals sobreplenes que Knuth–Plass accepta ocasionalment.

Una barra d'eines flotant a la cantonada inferior dreta del viewport proporciona:

- **Regenerar** (icona `RefreshCw`) — Reconstrueix el PDF a partir del markdown i la configuració actuals. Útil després de canviar un ajust que no dispara un rebuild automàticament, o quan les fonts acaben de carregar-se.
- **Baixar** (icona `Download`) — Desa el PDF actual al disc. El nom del fitxer es deriva del primer encapçalament H1 del document (amb `document.pdf` com a valor per defecte).
- **Imprimir** (icona `Printer`) — Obre el diàleg d'impressió del navegador sobre el visor PDF integrat, que en la majoria de navegadors permet imprimir o tornar a desar com a PDF.
- **Capítol actual / Llibre complet** (selector a l'esquerra de la barra de pestanyes, llibres amb més d'un capítol) — Genera tots els capítols com un únic PDF continu en lloc del capítol actiu a continuació dels anteriors (l'opció predeterminada). Canviar-lo regenera el PDF. El canvas té el seu propi selector (consulta [Llibres i capítols](https://postext.dev/ca/docs/sandbox-books-saving.md#llibres-i-capítols)).

Internament el sandbox fa servir un helper `createPdfFontProvider()` que baixa els fitxers WOFF2 estàtics per pes des de la CDN de Fontsource a jsdelivr, els mateixos amb què es mesuren les seves previsualitzacions, els descomprimeix a TTF al navegador i lliura els bytes a `pdf-lib` a través de `renderToPdf`. S'usen fonts estàtiques per pes (en lloc d'una única font variable) perquè el text en negreta s'incrusti realment amb el pes bold. Consulta [Generació de PDF](https://postext.dev/ca/docs/configuration-pdf-output.md#generació-de-pdf) per al mateix patró fora del sandbox.

### Pestanya Folio

Mostra el llibre com a objecte imprès: les pàgines que compon el motor, enquadernades i obertes sobre una taula, en 3D (`postext-folio`, three.js). Les pàgines són les mateixes que pinta el canvas, mostrades tèxel a píxel, de manera que el text es veu tan nítid com a la pestanya Canvas; el que canvia és tot el que les envolta. El paper, l'enquadernació, la taula i la llum surten del grup **Folio** del tauler Disseny (la configuració `folio`), i una tanda `:::paper` del text imprimeix les seves pàgines en un altre paper (consulta [Format del document › `:::paper`](https://postext.dev/ca/docs/document-format-directives.md#paper)).

- **Què compon.** La pestanya Folio segueix el selector **Capítol actual / Llibre complet** del canvas. Un capítol es mostra com a part del seu llibre: les pàgines anteriors i posteriors compten en el gruix dels dos blocs de pàgines, i el capítol s'obre al costat del plec que li correspon. Un llibre enquadernat per la dreta (`page.binding: 'right'`, o un llibre vertical) apareix en mirall i passa els fulls cap a l'esquerra.
- **Passar pàgines.** Agafa una pàgina per la vora i arrossega-la; si la deixes anar passada la meitat, el full passa, i si no, torna al seu lloc. Un clic en una pàgina la passa (la de la dreta endavant, la de l'esquerra enrere), igual que els botons ‹ › de la barra d'eines i, amb el llibre enfocat, les fletxes del teclat, Re Pàg/Av Pàg, Inici i Fi. Cada full es corba segons el seu paper: el paper bíblia s'enrotlla tancat, la cartolina passa en un arc ampli, i el cartró i les cobertes giren com a planxes rígides.
- **Salts llargs.** Una pàgina a més de deu pàgines de distància (escrita al camp de pàgina, indicada a l'enllaç permanent, assolida per un enllaç o pel cursor del tauler Text) s'assoleix d'una vegada: el bloc de pàgines intermedi s'aixeca sencer, amb el gruix d'aquestes pàgines, i es deixa caure a l'altre costat. Fins a deu pàgines, els fulls passen un a un.
- **Envoltar el llibre.** Arrossegar amb el botó dret gira la vista al voltant del llibre, fins a 70° des de la vertical, per veure el llom, el tall davanter o el gruix del bloc. La vista es queda on la deixes, també mentre passen les pàgines, fins que **Restablir la vista** la torna suaument a la vista de la configuració (*Inclinació* i *Gir*). **Desar com a vista per defecte** desa en aquesta configuració la vista tal com la veus, de manera que el llibre s'obre així i Restablir la vista hi torna.
- **Què fa el punter.** Tres botons de la barra trien què fa el botó esquerre (un dit, un llapis) sobre el llibre: **Passar pàgines a mà**, el mode per defecte, com s'ha descrit més amunt; **Orbitar la vista**, el mateix que arrossegar amb el botó dret, per a un trackpad o una tauleta; **Seleccionar text**, que funciona com a la pestanya Canvas sobre el llibre tal com es veu, inclinat o orbitat: un clic posa el cursor al tauler Text, un arrossegament selecciona, un doble clic agafa una paraula i un clic en un enllaç el segueix. L'elecció es recorda; H, O i S la canvien quan el llibre té el focus.
- **Segueix l'editor.** El cursor i la selecció del tauler Text es dibuixen sobre les pàgines i hi continuen mentre escrius: la pàgina mostra l'edició tan bon punt es torna a compondre. Portar el cursor de l'editor a una pàgina que no és a la vista passa el llibre fins a aquesta pàgina.
- **Cobertes.** Amb *Cobertes: Una tapa al voltant de les pàgines*, el llibre va en una tapa de tela, cartolina o pell del color de la coberta. Amb *Les pàgines del document*, la primera pàgina és la coberta i l'última (si cau en una pàgina esquerra) la contracoberta: el llibre queda tancat fins que es passa la coberta, i en passar l'últim full es torna a tancar. Un llibre gruixut s'obre amb el llom aixecat entre els dos blocs.
- **La barra d'eines.** Una barra flotant com la del canvas: **Recalcular**, **Restablir la vista**, **Desar com a vista per defecte**, els tres modes del punter, **Simula la impressió** (la prova del canvas, sobre el blanc del paper del perfil de sortida, de manera que mentrestant es deixa de banda el to del paper del llibre; el mateix interruptor que el del canvas), el botó per fixar la barra, ‹ › i el camp de pàgina, que accepta un número de pàgina del llibre i passa al seu plec. La pàgina dreta del plec obert és la que indica el permalink (`view=folio&page=N`).
- **La configuració s'aplica a l'instant.** La configuració de Folio no forma part de la composició: canviar el paper, l'enquadernació o la llum redibuixa el llibre sense tornar a compondre cap pàgina.
- **On s'ofereix.** La pestanya necessita WebGL2 i una pantalla amb el costat curt d'almenys 600 px: en un mòbil, el llibre en 3D ocupa més memòria de la que el navegador dona a una pestanya, així que allà no apareix (tampoc en un navegador sense WebGL2). En un tauler de menys de 560 px d'amplada, el llibre mostra una pàgina cada vegada i el full continua girant sobre el llom. Si el sistema demana menys moviment, els plecs canvien sense passar el full.
- **Vídeos a la pàgina.** Un clic a la portada d'un vídeo el reprodueix a la mateixa pàgina, en qualsevol dels tres modes del punter, i la imatge continua en moviment mentre el full passa i es corba. Un altre clic el posa en pausa, engegar-ne un altre atura el primer, llevat que *Reproduir al costat d'altres vídeos* estigui activat, i el vídeo s'atura quan el llibre queda quiet en un plec on ja no apareix. La barra d'espai reprodueix o posa en pausa el vídeo del plec obert. Un vídeo amb *Reproducció automàtica* activada s'engega sol la primera vegada que es mostra el seu plec, amb so si ja has fet clic a la pàgina (abans comença sense so, i un clic li activa el so); els dos vídeos de la guia ho fan. Els fitxers pujats i els vídeos que es reprodueixen des d'una adreça (MP4, HLS) funcionen així quan el seu servidor permet lectures des d'un altre origen; un clic a la portada d'un vídeo de YouTube o de Vimeo passa la pàgina, com fins ara (consulta [Format del document › Vídeos a les pàgines de Folio](https://postext.dev/ca/docs/document-format-resources.md#vídeos-a-les-pàgines-de-folio)).
- **Alternatives textuals.** Cada pàgina es dibuixa com a imatge; el seu nom accessible remet a la pestanya HTML i al tauler Text per llegir-ne el text.

### Pestanya HTML

Renderitza la sortida de postext dins d'un contenidor Shadow DOM, que garanteix un aïllament complet d'estils respecte a la pàgina amfitriona. El CSS editorial (tipografia, espaiat, filets de columna) s'injecta dins del shadow root perquè no el puguin afectar els estils de l'aplicació circumdant ni s'hi pugui filtrar.

Els enllaços Markdown són actius aquí i al PDF (consulta [Format del document › Enllaços](https://postext.dev/ca/docs/document-format-inline.md#enllaços)). En aquesta pestanya, si fas clic en un, la seva destinació s'obre en una pestanya nova del navegador, perquè el Sandbox continuï obert; les cites `:ref` continuen saltant dins del document.

Aquí els vídeos es reprodueixen: un vídeo de YouTube o de Vimeo al reproductor de la plataforma, i un fitxer o una adreça al del navegador (un flux HLS, amb hls.js on el navegador no reprodueix HLS pel seu compte), amb les opcions de reproductor de l'*Estil de vídeo* del tauler Disseny i de cada vídeo. Els clics sobre un reproductor van al reproductor, no a l'editor. Amb **Al visor HTML** a *Portada*, la pestanya mostra la portada impresa, enllaçada amb el vídeo.

Una barra d'eines a la part superior del viewport ofereix:

- **Controls d'escala de font** — Redueix o augmenta el text del cos tot conservant cada mesura relativa de la configuració.
- **Modes de columna** — Columna única (una sola columna alta i desplaçable verticalment) o multicolumna (el nombre de columnes l'amplada de les quals s'acosta més a la mesura configurada, amb scroll-snap horitzontal entre pàgines). Un document a dues columnes conserva les seves pàgines de dues columnes, però el visor pot mostrar un nombre senar de columnes — tres en lloc de dues d'estirades o quatre d'estretes — quan aquest és l'ajust més proper; l'última pertany llavors a la pàgina següent, visible a mitges. Un document o una secció en *Diverses columnes* també es mostra en pàgines de dues columnes: de tres a vuit columnes d'impremta serien tires primíssimes a l'amplada de la pantalla, així que el visor compon el text a dues columnes per pàgina i en mostra tantes l'una al costat de l'altra com permet la mesura. Un llibre enquadernat per la dreta (`page.binding`) ordena les seves pàgines de dreta a esquerra en mode multicolumna: el visor s'obre per l'extrem dret i la fletxa ‹ passa a la pàgina següent. Un llibre compost en vertical només es llegeix en mode multicolumna: el botó **Columna única** queda desactivat, amb una indicació que explica per què, i l'elecció que vas desar torna amb el llibre horitzontal següent.

La geometria de les columnes la controla la secció **Lector web (HTML)** del tauler Disseny: `maxCharsPerLine` defineix la mesura objectiu en caràcters de la font del cos, `columnGap` l'espai horitzontal entre columnes en mode multi i `optimalLineBreaking` activa o desactiva l'algorisme Knuth–Plass dins del visor. Consulta la [referència de configuració del Visor HTML](https://postext.dev/ca/docs/configuration-fonts-colors-viewers.md#visor-html) i l'[exemple d'integració complet](https://postext.dev/ca/docs/configuration-html-folio-epub.md#integrar-el-visor-html) — el mateix patró que fa servir internament el sandbox.

### Pestanya EPUB 3

Escriu el llibre sencer com un fitxer EPUB 3 amb el paquet `postext-epub`, el mostra en un lector dins de la pestanya i el baixa. El fitxer es genera al navegador a partir de la mateixa maquetació capítol a capítol que fa servir la pestanya PDF amb **Llibre complet**, de manera que els números de pàgina, les notes, les referències creuades, el sumari i l'índex alfabètic són els que imprimeix el PDF. La pestanya no té el selector **Capítol actual / Llibre complet**, perquè un EPUB conté sempre el llibre sencer. En lloc seu, a l'esquerra de la barra de pestanyes, ofereix la **Maquetació de l'EPUB** (amb icones al mòbil).

EPUB 3 té dues maquetacions, que el paquet declara amb la propietat `rendition:layout`:

- **Maquetació fixa** (`pre-paginated`, en anglès *fixed layout* o FXL): cada pàgina tal com s'imprimeix. Cada pàgina és un document amb la mida de la pàgina, i el text és on el posa el PDF, amb les lletres del llibre, però continua sent text: es pot seleccionar, cercar i llegir en veu alta. Les pàgines s'aparellen com al llibre imprès, i un llibre enquadernat per la dreta (àrab, xinès vertical) avança de dreta a esquerra. Conserva el disseny: columnes, flotants, capçaleres, obertures i els talls de línia exactes. Tria-la per a llibres amb pàgines dissenyades com a pàgines, com llibres il·lustrats, de text, catàlegs i revistes, i per a lectors de pantalla gran. En una pantalla petita la pàgina es veu reduïda i cal ampliar-la per llegir.
- **Maquetació fluida** (la predeterminada en mòbils i ordinadors, i la de l'EPUB per defecte; en anglès *reflowable*): el text, les figures i les taules en ordre de lectura, que el lector torna a compondre per a la seva pantalla i per a la lletra, la mida i els marges que triï qui llegeix. Els paràgrafs es reconstrueixen a partir de les línies maquetades (es treuen els guions afegits a final de línia), les figures i les taules segueixen el text que les cita, els requadres passen a ser apartats, les notes a peu de pàgina enllacen amb les notes al final de cada capítol i tornen, i els números de pàgina impresos queden com a marques de pàgina. Un full d'estil derivat del disseny dona l'aspecte als títols, requadres, taules i peus, però la geometria de la pàgina desapareix: sense columnes, sense capçaleres, sense talls de línia fixos. Tria-la per a text seguit, com novel·les, assajos i informes, i per a mòbils i lectors de tinta electrònica.

Mentre no se'n tria cap, la pestanya s'obre en maquetació fixa en una tauleta com l'iPad, que té pantalla per a la pàgina impresa, i en maquetació fluida a la resta. L'elecció es recorda entre visites (`postext-sandbox-epub-layout`), i en canviar-la el fitxer es torna a escriure de seguida.

- **Generació.** L'EPUB s'escriu la primera vegada que s'obre la pestanya i de nou en prémer **Recalcular**. Una barra de progrés compta els capítols que es maqueten i després els passos de l'escriptor (lletres, imatges i coberta; les pàgines o els capítols; el paquet), i els lectors de pantalla anuncien quan el fitxer és a punt o ha fallat. Després d'una edició, una fletxa al costat de **Recalcular** indica que el fitxer ja no correspon al text, com a la pestanya PDF. Sortir de la pestanya o canviar de maquetació atura una generació en curs. Un llibre llarg triga uns segons, durant els quals la pàgina no respon.
- **Què entra al fitxer.** Les metadades surten del front matter del primer capítol: `title`, `subtitle`, `author` (un nom o una llista), `publishDate` o `date`, `isbn` o `identifier`, `publisher`, `rights` i `description`; l'idioma surt del `locale` de la configuració. Un llibre sense identificador en rep un derivat del projecte (o del llibre d'exemple i el seu idioma), de manera que tots els EPUB del mateix llibre conserven una sola identitat a la biblioteca del lector. S'incrusten totes les famílies que anomena el disseny: de Google Fonts, només els trams que contenen caràcters que el llibre imprimeix; les famílies pròpies, llevat de les marcades com a no redistribuïbles. Les imatges hi entren tal com estan desades, mai com el màster PDF d'impremta; cada SVG porta les variants que anomena el seu text (tant de famílies pròpies com de Google), llevat de les famílies marcades com a no redistribuïbles, de les quals s'avisa. Els fitxers de vídeo hi entren a `media/` i es reprodueixen al reproductor del lector; un fitxer sense els seus bytes es reprodueix des de la seva adreça de producció, que el paquet declara com a recurs remot, i un vídeo de YouTube o de Vimeo és la seva portada enllaçada amb el vídeo. La coberta és la imatge del mateix llibre si és un mapa de bits d'almenys 600 px d'amplada; si no, la primera pàgina dibuixada a 1.600 px d'amplada sense el marge de les marques de tall.
- **El lector.** La pestanya obre el fitxer que acaba d'escriure, els mateixos bytes que es baixen, no una previsualització a part. La maquetació fixa mostra una pàgina, o un plec quan el tauler és prou ample, ajustada a l'espai; el llibre fluid es pagina pantalla a pantalla (de dalt a baix en xinès vertical), i les pàgines continuen d'un capítol al següent. Els enllaços del llibre mouen el lector; els enllaços web i de correu s'obren en una altra pestanya del navegador. ← / →, Re Pàg / Av Pàg, Inici i Fi passen les pàgines, i en un llibre de dreta a esquerra ← avança.
- **La barra d'eines.** Una barra flotant com la de la pestanya PDF: **Recalcular**, el botó per fixar la barra, **Baixar l'EPUB** amb la mida del fitxer (que porta el títol del llibre com a nom), un botó d'avisos quan l'escriptor ha informat d'alguna cosa, **Índex** (una llista de salts a partir del sumari del llibre), **Augmentar la mida de la lletra** i **Reduir la mida de la lletra** (només en maquetació fluida, sense perdre el lloc), ‹ › i, en maquetació fixa, el camp de pàgina. El camp compta les pàgines en l'ordre de lectura del fitxer, amb la coberta com a 1; els marcs anomenen cada pàgina amb el seu número imprès.
- **Avisos.** El botó d'avisos enumera el que el fitxer no ha pogut portar tal com ho té el llibre: una imatge sense fitxer desat (al seu lloc queda un marc buit), una família, un pes o un estil sense variant incrustada (els lectors la substitueixen), una família que queda fora perquè no es pot redistribuir i qualsevol cosa que la maquetació no pugui expressar. Els mateixos missatges van a la consola del navegador.
- **Comprovar el fitxer.** Les dues maquetacions de la guia i dels llibres d'exemple passen [W3C EPUBCheck](https://www.w3.org/publishing/epubcheck/) 5.4 sense errors ni avisos. Per comprovar el teu llibre, baixa'l i executa `epubcheck llibre.epub`, o llegeix-lo a Apple Books, Thorium Reader o Calibre.

Consulta [Llibres EPUB](https://postext.dev/ca/docs/configuration-html-folio-epub.md#llibres-epub-postext-epub) per escriure els mateixos fitxers des del teu codi.