pablo/crochet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improved printing settings

Browse Source
This commit is contained in:
Pablo Moreno
2026-07-14 10:16:47 +02:00
parent 8d9d95ddf5
commit c1afd5a6d4
5 changed files with 71 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/main.css
+46 -18
View File
@@ -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 <html>/<body> 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: <html> 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 <body>), 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 <html> como en <body>. */
background-color: var(--print-page-bg-color, #ffffff) !important;
}
/* Firefox no siempre extiende el fondo de <html>/<body> 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;
}
}