# Sandbox: las vistas previas

> Las pestañas Canvas, PDF, Folio, HTML y EPUB 3 del viewport principal: qué muestra cada una y qué permite hacer

- Versión HTML: https://postext.dev/es/docs/sandbox-previews
- Última actualización: 2026-10-16
- Tiempo de lectura: 16 min
- Otros idiomas: [en](https://postext.dev/en/docs/sandbox-previews.md), [ca](https://postext.dev/ca/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 pocas palabras

Esta página explica la parte derecha del Sandbox, donde aparecen las páginas terminadas. Cinco pestañas muestran el mismo libro de cinco formas: como imágenes de página, como archivo PDF, como libro en 3D que puedes hojear, como página web y como libro electrónico EPUB. Cambiar de pestaña no vuelve a componer el libro, así que todas muestran las mismas páginas. La página explica qué muestra cada pestaña y qué puedes hacer en ella.

## Viewport principal

El lado derecho de la interfaz muestra la salida renderizada. Hay cinco pestañas disponibles, una por cada modo de renderizado, en este orden: **Canvas**, **PDF**, **Folio**, **HTML** y **EPUB 3**. Cambiar de pestaña no vuelve a ejecutar la composición: el mismo VDT alimenta a todos los backends, de modo que el contenido que ves es consistente entre los modos. La pestaña Folio solo se ofrece donde el navegador tiene WebGL2 y la pantalla no es la de un móvil (consulta [Pestaña Folio](https://postext.dev/es/docs/sandbox-previews.md#pestaña-folio)).

Cada viewport ejecuta el pipeline de composición dentro de un **Web Worker** dedicado (`postext/worker`). Un hook `useLayoutWorker` por viewport posee el handle del worker, envía las fuentes como `ArrayBuffer`s transferibles y dirige los builds con **cancelación last-wins** — una pulsación de tecla o un arrastre de slider aborta el `AbortSignal` del build anterior antes de que empiece el siguiente, por lo que teclear rápido nunca acumula trabajo obsoleto en el hilo principal. Desmontar un viewport libera su worker y rechaza cualquier build pendiente. Consulta [Configuración → Ejecutar la composición en un Web Worker](https://postext.dev/es/docs/configuration-programmatic-usage.md#ejecutar-la-composición-en-un-web-worker) para el patrón de integración que se usa aquí.

> **Figura: Un único VDT, cinco salidas**
> El markdown y la configuración del sandbox alimentan un único VDT en memoria. Canvas, PDF, Folio, HTML y EPUB 3 se renderizan desde ese mismo VDT, de modo que todas las pestañas muestran la misma maquetación.
>
> *Un mismo VDT alimenta las cinco pestañas de salida.*

### Pestaña Canvas

Renderiza una vista previa rasterizada del documento en un elemento HTML5 `<canvas>`. Esto ofrece una representación precisa al píxel de cómo se verá el documento compuesto final, incluida la colocación exacta del texto, la maquetación por columnas y la colocación de recursos.

Una barra de herramientas en la parte superior del viewport de canvas proporciona:

- **Controles de zoom** — Aumentar y reducir el zoom (1,25x por paso, rango 0,25x–4x). El zoom manual desactiva el modo de ajuste.
- **Modos de ajuste** — Ajustar al ancho o al alto de la página. Se activan/desactivan; el ajuste se recalcula automáticamente al redimensionar la ventana.
- **Modos de vista** — Página única (una página por fila) o doble página (maquetación estilo libro, donde la primera página aparece a la derecha como recto y las siguientes se emparejan como dobles páginas). Un libro encuadernado por la derecha (`page.binding`, chino vertical) muestra los pliegos al revés: la página 1 sola a la izquierda y luego `[3 | 2]`, `[5 | 4]`. En una página vertical, un clic cae en el carácter que hay bajo el puntero y el cursor es una barra que cruza la columna.
- **Simular impresión** (icono `Printer`) — Muestra las páginas como se imprimirán. Está desactivada por defecto y el navegador la recuerda: cada color se separa con el perfil de salida de *Preparación para imprenta* y se muestra sobre el blanco del propio papel, y las masas negras grandes salen en negro enriquecido; un PDF forzado a escala de grises se ve solo en tinta negra. Solo lo que se imprime: ni guías de pantalla ni recuadros (lo que encuentra el preflight está en **Revisión**). La pestaña Folio comparte el interruptor. Vuelve a pintar las páginas, nunca las maqueta de nuevo.

Las páginas se renderizan de forma perezosa mediante `IntersectionObserver` — solo las páginas visibles (más un margen de 200 px) se dibujan en canvas, manteniendo el uso de memoria de GPU bajo para documentos largos.

### Pestaña PDF

Genera un PDF real del documento actual mediante el paquete `postext-pdf` y lo muestra dentro del visor PDF integrado del navegador. El PDF se reconstruye automáticamente al montar la pestaña por primera vez y en cada regeneración posterior, usando el mismo VDT que alimenta a las pestañas de canvas y HTML — de modo que los saltos de línea, las fronteras entre páginas y la colocación de recursos coinciden al píxel entre los tres backends, incluida la compresión de las líneas finales sobrellenas que Knuth–Plass acepta ocasionalmente.

Una barra de herramientas flotante en la esquina inferior derecha del viewport proporciona:

- **Regenerar** (icono `RefreshCw`) — Reconstruye el PDF a partir del markdown y la configuración actuales. Útil tras cambiar un ajuste que no dispara un rebuild automáticamente, o cuando las fuentes acaban de terminar de cargarse.
- **Descargar** (icono `Download`) — Guarda el PDF actual en disco. El nombre del archivo se deriva del primer encabezado H1 del documento (con `document.pdf` como valor por defecto).
- **Imprimir** (icono `Printer`) — Abre el diálogo de impresión del navegador sobre el visor PDF integrado, que en la mayoría de navegadores permite imprimir o volver a guardar como PDF.
- **Capítulo actual / Libro completo** (selector a la izquierda de la barra de pestañas, libros con más de un capítulo) — Genera todos los capítulos como un único PDF continuo en lugar del capítulo activo continuando a los anteriores (lo predeterminado). Cambiarlo regenera el PDF. El canvas tiene su propio selector (consulta [Libros y capítulos](https://postext.dev/es/docs/sandbox-books-saving.md#libros-y-capítulos)).

Internamente el sandbox usa un helper `createPdfFontProvider()` que descarga los archivos WOFF2 estáticos por peso desde la CDN de Fontsource en jsdelivr, los mismos con los que se miden sus vistas previas, los descomprime a TTF en el navegador y entrega los bytes a `pdf-lib` a través de `renderToPdf`. Se usan fuentes estáticas por peso (en lugar de una única fuente variable) para que el texto en negrita se incruste realmente con el peso bold. Consulta [Generación de PDF](https://postext.dev/es/docs/configuration-pdf-output.md#generación-de-pdf) para el mismo patrón fuera del sandbox.

### Pestaña Folio

Muestra el libro como objeto impreso: las páginas que compone el motor, encuadernadas y abiertas sobre una mesa, en 3D (`postext-folio`, three.js). Las páginas son las mismas que pinta el canvas, mostradas téxel a píxel, así que el texto se ve tan nítido como en la pestaña Canvas; lo que cambia es todo lo que las rodea. El papel, la encuadernación, la mesa y la luz salen del grupo **Folio** del panel Diseño (la configuración `folio`), y una tanda `:::paper` del texto imprime sus páginas en otro papel (consulta [Formato del documento › `:::paper`](https://postext.dev/es/docs/document-format-directives.md#paper)).

- **Qué compone.** La pestaña Folio sigue el selector **Capítulo actual / Libro completo** del canvas. Un capítulo se muestra como parte de su libro: las páginas anteriores y posteriores cuentan en el grosor de los dos bloques de páginas, y el capítulo se abre en el lado del pliego que le corresponde. Un libro encuadernado por la derecha (`page.binding: 'right'`, o un libro vertical) aparece en espejo y pasa las hojas hacia la izquierda.
- **Pasar páginas.** Toma una página por su borde y arrástrala; si la sueltas pasada la mitad, la hoja pasa, y si no, vuelve a su sitio. Un clic en una página la pasa (la de la derecha hacia delante, la de la izquierda hacia atrás), igual que los botones ‹ › de la barra de herramientas y, con el libro enfocado, las flechas del teclado, Re Pág/Av Pág, Inicio y Fin. Cada hoja se curva según su papel: el papel biblia se enrolla cerrado, la cartulina pasa en un arco amplio, y el cartón y las cubiertas giran como planchas rígidas.
- **Saltos largos.** Una página a más de diez páginas de distancia (escrita en el campo de página, nombrada en el enlace permanente, alcanzada por un enlace o por el cursor del panel Texto) se alcanza de una vez: el bloque de páginas intermedio se levanta entero, con el grosor de esas páginas, y se deja caer al otro lado. Hasta diez páginas, las hojas pasan una a una.
- **Rodear el libro.** Arrastrar con el botón derecho gira la vista alrededor del libro, hasta 70° desde la vertical, para ver el lomo, el corte delantero o el grosor del bloque. La vista se queda donde la dejas, también mientras pasan las páginas, hasta que **Restablecer la vista** la devuelve con suavidad a la vista de los ajustes (*Inclinación* y *Giro*). **Guardar como vista por defecto** guarda en esos ajustes la vista tal como la ves, de modo que el libro se abre así y Restablecer la vista vuelve a ella.
- **Qué hace el puntero.** Tres botones de la barra eligen qué hace el botón izquierdo (un dedo, un lápiz) sobre el libro: **Pasar páginas a mano**, el modo por defecto, como arriba; **Orbitar la vista**, lo mismo que arrastrar con el botón derecho, para un trackpad o una tableta; **Seleccionar texto**, que funciona como en la pestaña Canvas sobre el libro tal como se ve, inclinado u orbitado: un clic pone el cursor en el panel Texto, un arrastre selecciona, un doble clic toma una palabra y un clic en un enlace lo sigue. La elección se recuerda; H, O y S la cambian cuando el libro tiene el foco.
- **Sigue al editor.** El cursor y la selección del panel Texto se dibujan sobre las páginas y siguen ahí mientras escribes: la página muestra la edición en cuanto se vuelve a componer. Llevar el cursor del editor a una página que no está a la vista pasa el libro hasta ella.
- **Cubiertas.** Con *Cubiertas: Una tapa alrededor de las páginas*, el libro va en una tapa de tela, cartulina o piel del color de la cubierta. Con *Las páginas del documento*, la primera página es la cubierta y la última (si cae en una página izquierda) la contracubierta: el libro queda cerrado hasta que se pasa la cubierta, y al pasar la última hoja se vuelve a cerrar. Un libro grueso se abre con el lomo levantado entre los dos bloques.
- **La barra de herramientas.** Una barra flotante como la del canvas: **Recalcular**, **Restablecer la vista**, **Guardar como vista por defecto**, los tres modos del puntero, **Simular impresión** (la prueba del canvas, sobre el blanco del papel del perfil de salida, así que mientras tanto se deja a un lado el tono del papel del libro; el mismo interruptor que el del canvas), el botón para fijar la barra, ‹ › y el campo de página, que acepta un número de página del libro y pasa a su pliego. La página derecha del pliego abierto es la que nombra el permalink (`view=folio&page=N`).
- **Los ajustes se aplican al momento.** Los ajustes de Folio no forman parte de la composición: cambiar el papel, la encuadernación o la luz redibuja el libro sin volver a componer ninguna página.
- **Dónde se ofrece.** La pestaña necesita WebGL2 y una pantalla cuyo lado corto mida al menos 600 px: en un móvil, el libro en 3D ocupa más memoria de la que el navegador da a una pestaña, así que allí no aparece (tampoco en un navegador sin WebGL2). En un panel de menos de 560 px de ancho, el libro muestra una página cada vez y la hoja sigue girando sobre el lomo. Si el sistema pide menos movimiento, los pliegos cambian sin pasar la hoja.
- **Vídeos en la página.** Un clic en la portada de un vídeo lo reproduce en la página, en cualquiera de los tres modos del puntero, y la imagen sigue moviéndose mientras la hoja pasa y se curva. Otro clic lo pausa; al poner en marcha otro vídeo se detiene el primero, salvo con *Reproducir junto a otros vídeos* activado, y el vídeo se detiene cuando el libro se queda quieto en un pliego donde ya no aparece. La barra espaciadora reproduce o pausa el vídeo del pliego abierto. Un vídeo con *Reproducción automática* activada arranca solo la primera vez que se muestra su pliego, con sonido si ya has hecho clic en la página (antes, sin sonido, y un clic se lo da); así están los dos vídeos de la guía. Los archivos subidos y los vídeos en una dirección (MP4, HLS) se reproducen así cuando su servidor permite lecturas entre orígenes; los de YouTube y Vimeo pasan la página como antes (consulta [Formato del documento › Vídeos en las páginas de Folio](https://postext.dev/es/docs/document-format-resources.md#vídeos-en-las-páginas-de-folio)).
- **Alternativas textuales.** Cada página se dibuja como imagen; su nombre accesible remite a la pestaña HTML y al panel Texto para leer su texto.

### Pestaña HTML

Renderiza la salida de postext dentro de un contenedor Shadow DOM, garantizando un aislamiento completo de estilos respecto a la página anfitriona. El CSS editorial (tipografía, espaciado, filetes de columna) se inyecta dentro del shadow root para que no pueda verse afectado por los estilos de la aplicación circundante ni filtrarse hacia ellos.

Los enlaces Markdown están activos aquí y en el PDF (consulta [Formato del documento › Enlaces](https://postext.dev/es/docs/document-format-inline.md#enlaces)). En esta pestaña, al hacer clic en uno, su destino se abre en una pestaña nueva del navegador, para que el Sandbox siga abierto; las citas `:ref` siguen saltando dentro del documento.

Los vídeos se reproducen aquí: uno de YouTube o Vimeo en el reproductor de la plataforma, un archivo o una dirección en el del navegador (un flujo HLS mediante hls.js cuando el navegador no reproduce HLS por sí mismo), con las opciones de reproductor del *Estilo de vídeo* del panel Diseño y las de cada vídeo. Los clics sobre un reproductor van al reproductor, no al editor. Con **En el visor HTML** en *Portada*, la pestaña muestra la portada impresa, enlazada con el vídeo.

Una barra de herramientas en la parte superior del viewport ofrece:

- **Controles de escala de fuente** — Reduce o aumenta el texto del cuerpo conservando cada medida relativa de la configuración.
- **Modos de columna** — Columna única (una sola columna alta y desplazable verticalmente) o multi-columna (el número de columnas cuyo ancho más se acerca a la medida configurada, con scroll-snap horizontal entre páginas). Un documento a dos columnas conserva sus páginas de dos columnas, pero el visor puede mostrar un número impar de columnas — tres en lugar de dos estiradas o cuatro apretadas — cuando ese es el ajuste más cercano; la última pertenece entonces a la página siguiente, visible a medias. Un documento o una sección en *Varias columnas* también se muestra en páginas de dos columnas: de tres a ocho columnas de imprenta serían tiras finísimas al ancho de la pantalla, así que el visor compone su texto a dos columnas por página y muestra tantas una junto a otra como permite la medida. Un libro encuadernado por la derecha (`page.binding`) ordena sus páginas de derecha a izquierda en modo multi-columna: el visor se abre por el extremo derecho y la flecha ‹ pasa a la página siguiente. Un libro compuesto en vertical solo se lee en modo multi-columna: el botón **Columna única** queda desactivado, con una indicación que explica por qué, y la elección que guardaste vuelve con el siguiente libro horizontal.

La geometría de las columnas está controlada por la sección **Lector web (HTML)** del panel Diseño: `maxCharsPerLine` define la medida objetivo en caracteres de la fuente del cuerpo, `columnGap` el espacio horizontal entre columnas en modo multi y `optimalLineBreaking` alterna el algoritmo Knuth–Plass dentro del visor. Consulta la [referencia de configuración del Visor HTML](https://postext.dev/es/docs/configuration-fonts-colors-viewers.md#visor-html) y el [ejemplo de integración completo](https://postext.dev/es/docs/configuration-html-folio-epub.md#integrar-el-visor-html) — el mismo patrón que usa internamente el sandbox.

### Pestaña EPUB 3

Escribe el libro entero como un archivo EPUB 3 con el paquete `postext-epub`, lo muestra en un lector dentro de la pestaña y lo descarga. El archivo se genera en el navegador a partir de la misma maquetación capítulo a capítulo que usa la pestaña PDF con **Libro completo**, así que sus números de página, notas, referencias cruzadas, índice general e índice alfabético son los que imprime el PDF. La pestaña no tiene el selector **Capítulo actual / Libro completo**, porque un EPUB contiene siempre el libro entero. En su lugar, a la izquierda de la barra de pestañas, ofrece la maquetación del EPUB (con iconos en el móvil).

EPUB 3 tiene dos maquetaciones, que el paquete declara con la propiedad `rendition:layout`:

- **Maquetación fija** (`pre-paginated`, en inglés *fixed layout* o FXL): cada página tal como se imprime. Cada página es un documento con el tamaño de la página, y el texto está donde lo pone el PDF, con las letras del libro, pero sigue siendo texto: se puede seleccionar, buscar y leer en voz alta. Las páginas se emparejan como en el libro impreso, y un libro encuadernado por la derecha (árabe, chino vertical) avanza de derecha a izquierda. Conserva el diseño: columnas, flotantes, cabeceras, aperturas y los cortes de línea exactos. Elígela para libros cuyas páginas están diseñadas como páginas, como libros ilustrados, de texto, catálogos y revistas, y para lectores de pantalla grande. En una pantalla pequeña la página se ve reducida y hay que ampliarla para leer.
- **Maquetación fluida** (la predeterminada en móviles y ordenadores, y la de EPUB por omisión; en inglés *reflowable*): el texto, las figuras y las tablas en orden de lectura, que el lector vuelve a componer para su pantalla y para la letra, el tamaño y los márgenes que elija quien lee. Los párrafos se reconstruyen a partir de las líneas maquetadas (se quitan los guiones añadidos al final de línea), las figuras y las tablas siguen al texto que las cita, los recuadros pasan a ser apartes, las notas al pie enlazan con las notas al final de cada capítulo y vuelven, y los números de página impresos quedan como marcas de página. Una hoja de estilo derivada del diseño da su aspecto a los títulos, recuadros, tablas y pies, pero la geometría de la página desaparece: sin columnas, sin cabeceras, sin cortes de línea fijos. Elígela para texto corrido, como novelas, ensayos e informes, y para móviles y lectores de tinta electrónica.

Mientras no se elige ninguna, la pestaña se abre en maquetación fija en una tableta como el iPad, cuya pantalla tiene sitio para la página impresa, y en maquetación fluida en todo lo demás. La elección se recuerda entre visitas (`postext-sandbox-epub-layout`), y al cambiarla el archivo se vuelve a escribir enseguida.

- **Generación.** El EPUB se escribe la primera vez que se abre la pestaña y de nuevo al pulsar **Recalcular**. Una barra de progreso cuenta los capítulos que se maquetan y después los pasos del escritor (letras, imágenes y cubierta; las páginas o los capítulos; el paquete), y los lectores de pantalla anuncian cuándo el archivo está listo o ha fallado. Tras una edición, una flecha junto a **Recalcular** indica que el archivo ya no corresponde al texto, como en la pestaña PDF. Salir de la pestaña o cambiar de maquetación detiene una generación en curso. Un libro largo tarda unos segundos, durante los cuales la página no responde.
- **Qué entra en el archivo.** Los metadatos salen del front matter del primer capítulo: `title`, `subtitle`, `author` (un nombre o una lista), `publishDate` o `date`, `isbn` o `identifier`, `publisher`, `rights` y `description`; el idioma sale del `locale` de la configuración. Un libro sin identificador recibe uno derivado del proyecto (o del libro de ejemplo y su idioma), de modo que todos los EPUB del mismo libro conservan una sola identidad en la biblioteca del lector. Se incrustan todas las familias que nombra el diseño: de Google Fonts, solo los tramos que contienen caracteres que el libro imprime; las familias propias, salvo las marcadas como no redistribuibles. Las imágenes entran tal como están guardadas, nunca como el máster PDF de imprenta; cada SVG lleva las variantes que nombra su texto (tanto de familias propias como de Google), salvo las familias marcadas como no redistribuibles, de las que se avisa. Los archivos de vídeo entran en `media/` y se reproducen en el reproductor del lector; un archivo sin sus bytes se reproduce desde su dirección de producción, que el paquete declara como recurso remoto, y un vídeo de YouTube o Vimeo es su portada enlazada con el vídeo. La cubierta es la imagen del propio libro si es un mapa de bits de al menos 600 px de ancho; si no, la primera página dibujada a 1600 px de ancho sin el margen de las marcas de corte.
- **El lector.** La pestaña abre el archivo que acaba de escribir, los mismos bytes que se descargan, no una vista previa aparte. La maquetación fija muestra una página, o una doble página cuando el panel es lo bastante ancho, ajustada al espacio; el libro fluido se pagina pantalla a pantalla (de arriba abajo en chino vertical), y sus páginas siguen de un capítulo al siguiente. Los enlaces del libro mueven el lector; los enlaces web y de correo se abren en otra pestaña del navegador. ← / →, Re Pág / Av Pág, Inicio y Fin pasan las páginas, y en un libro de derecha a izquierda ← avanza.
- **La barra de herramientas.** Una barra flotante como la de la pestaña PDF: **Recalcular**, el botón para fijar la barra, **Descargar EPUB** con el tamaño del archivo (que lleva el título del libro como nombre), un botón de avisos cuando el escritor ha informado de algo, **Índice** (una lista de saltos a partir del índice del libro), **Aumentar tamaño de letra** y **Reducir tamaño de letra** (solo en maquetación fluida, sin perder el sitio), ‹ › y, en maquetación fija, el campo de página. El campo cuenta las páginas en el orden de lectura del archivo, con la cubierta como 1; los marcos nombran cada página con su número impreso.
- **Avisos.** El botón de avisos enumera lo que el archivo no ha podido llevar tal como lo tiene el libro: una imagen sin archivo guardado (en su lugar queda un marco vacío), una familia, un peso o un estilo sin variante incrustada (los lectores la sustituyen), una familia que se queda fuera porque no se puede redistribuir y cualquier cosa que la maquetación no pueda expresar. Los mismos mensajes van a la consola del navegador.
- **Comprobar el archivo.** Las dos maquetaciones de la guía y de los libros de ejemplo pasan [W3C EPUBCheck](https://www.w3.org/publishing/epubcheck/) 5.4 sin errores ni avisos. Para comprobar tu libro, descárgalo y ejecuta `epubcheck libro.epub`, o léelo en Apple Books, Thorium Reader o Calibre.

Consulta [Libros EPUB](https://postext.dev/es/docs/configuration-html-folio-epub.md#libros-epub-postext-epub) para escribir los mismos archivos desde tu propio código.