From c1afd5a6d4542716c922b01ea16923b55d7ee9d6 Mon Sep 17 00:00:00 2001 From: Pablo Moreno Date: Tue, 14 Jul 2026 10:16:47 +0200 Subject: [PATCH] feat: improved printing settings --- css/main.css | 64 ++++++++++++++++++++++++++++++++------------- index.html | 4 +-- js/page-settings.js | 9 +++++++ js/section-types.js | 11 +++++--- js/sections.js | 8 ++++-- 5 files changed, 71 insertions(+), 25 deletions(-) diff --git a/css/main.css b/css/main.css index 496abf1..0b3ce38 100644 --- a/css/main.css +++ b/css/main.css @@ -38,44 +38,72 @@ } /* Al exportar/imprimir, solo se muestra #panel-output (y no sus propios - controles, marcados con .no-print), ocultando el resto de la página. */ + controles, ni el resto de la página), todo ello marcado con .no-print + (#panel-top, la cabecera, las pestañas, "Personalización de página", + el título "Vista previa"...). + Se usa display:none (no visibility:hidden) para ocultarlo: un elemento + en visibility:hidden sigue ocupando su espacio en el documento, así que + con eso todo el contenido oculto (secciones, botones...) seguía + contando para la altura total y generaba varias páginas en blanco de + más al imprimir. */ @media print { - body * { - visibility: hidden; + .no-print { + display: none; } @page { margin: 0; } + /* Pinta toda la hoja (no solo la caja de #panel-output, que puede + quedarse más corta que la página) con el color de fondo elegido en + "Personalización de página". La variable la actualiza + page-settings.js; aquí no se toca nada más de / para no + afectar a la pantalla de edición, solo a la impresión. */ + html, + body, #panel-output, #panel-output * { - visibility: visible; /* Los navegadores no imprimen colores de fondo por defecto (dependen de la opción "Gráficos de fondo" del diálogo de impresión, que el usuario puede tener desmarcada); esto fuerza a respetar los colores - elegidos en una sección de "Nota" aunque esa opción esté desactivada. */ + elegidos en una sección de "Nota" (y el fondo de página) aunque esa + opción esté desactivada. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } - #panel-output .no-print { - display: none; + html, + body { + /* Si no queda un poco de espacio en blanco al final del documento + cuando el contenido no llena una página entera: es el + elemento "raíz" y su fondo (si lo tiene) es el que se usa para + rellenar toda la hoja (por delante del de ), así que Tailwind + o daisyUI podían estar aplicándole ya un color propio con más peso + que esta regla; !important fuerza a que gane siempre el elegido + aquí, tanto en como en . */ + background-color: var(--print-page-bg-color, #ffffff) !important; } + /* Firefox no siempre extiende el fondo de / más allá de su + contenido cuando este no llena una página entera (a diferencia de + Chrome, que sí lo hace); para no depender de eso, se fuerza a que la + propia caja de #panel-output mida al menos una página de alto, así su + propio fondo (el mismo color, ya aplicado en JS) cubre ese hueco + también en Firefox. */ #panel-output { - position: absolute; - top: 0; - left: 0; + min-height: 100vh; width: 100%; border: none; - /* @page tiene margin: 0 (ver más abajo), así que sin esto el contenido - llegaría hasta el borde físico de la hoja. Se pone aquí (como - padding del propio contenido) en vez de en @page porque el soporte - de "margin" en @page es más inconsistente entre navegadores. */ + /* Por defecto el padding de una caja que ocupa varias páginas solo se + aplica una vez, al principio y al final de toda la caja (no en cada + página); box-decoration-break: clone hace que cada fragmento (cada + página) se trate como una caja independiente con su propia copia del + padding, así el hueco queda igual en todas las páginas. Se hace así + (en vez de con @page margin) porque @page margin puede quedar + invalidado por el propio ajuste de "Márgenes" del diálogo de + impresión del navegador si el usuario no lo deja en "Predeterminado".*/ padding: 2cm; box-sizing: border-box; - } - - #preview-title { - display: none; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; } } diff --git a/index.html b/index.html index 520b059..47f9f89 100644 --- a/index.html +++ b/index.html @@ -110,7 +110,7 @@
-
+

Secciones