Me enganché con este tweet. De repente me di cuenta de que no podía recordar cuándo optimicé las páginas web para imprimirlas, o al menos verifiqué cómo se imprimían en la impresora.

La atención principal en el curso del desarrollo web se centra en las versiones electrónicas de los sitios. Las páginas tienen que ser revisadas en muchos navegadores, probadas en diferentes tamaños de ventana ... ¿Hay impresoras aquí? O tal vez me olvidé de los estilos de impresión porque rara vez hago copias en papel de las páginas. Sea como fuere, sentí que la situación necesitaba ser corregida con urgencia.

La versión impresa de la página web tiene el mismo derecho a existir que la electrónica. Y, si nos esforzamos por hacer que nuestros materiales sean lo más accesibles posible, no descuidemos los soportes de papel. Además, no debe hacer suposiciones sobre los usuarios y su comportamiento. La gente todavía imprime páginas web en impresoras. Imagínense artículos o publicaciones de blogs, páginas de recetas, detalles de contacto, indicaciones para llegar en automóvil o listados de anuncios. Tarde o temprano, seguramente alguien intentará imprimir algo de lo que ha publicado en Internet.

Esto es lo que Haydon Pickering, autor de Patrones de diseño inclusivos, dice sobre esto: “No he usado una impresora doméstica durante mucho tiempo. El punto aquí es que tengo la sensación de que se rompen diez minutos después de que comienzas a imprimir. Pero no soy todo ".

Si a estas alturas te das cuenta de que, como yo, no prestaste suficiente atención a los estilos para imprimir, espero que mi historia te sirva bien y te ayude a refrescar tu memoria rápidamente. Y si nunca ha optimizado las páginas web para impresoras, mi pequeña colección de trucos útiles de CSS le ayudará a empezar.

1. Uso de estilos CSS para imprimir

La mejor manera de incluir estilos imprimibles en una página es declarar una regla @media en su archivo CSS principal.

Body (font-size: 18px;) @media print (/ * habrá estilos de impresión * / body (font-size: 28px;))
Alternativamente, puede poner los estilos para imprimir en un archivo separado e incluirlo en HTML, pero con este enfoque necesitará una solicitud adicional al cargar la página.

2. Prueba

¿Cómo evalúa la apariencia de una página web lista para imprimir? Para cualquiera está claro que ponerlo en papel después de cada cambio de estilo no es la mejor solución. Afortunadamente, las capacidades de los navegadores son suficientes para la verificación sin papel de las variantes de páginas impresas.

Dependiendo del navegador, puede exportar la página a PDF, usar la función de vista previa o incluso depurar la página directamente en su navegador web.

Para depurar estilos de impresión en Firefox, abra Panel de control del desarrollador usando el atajo de teclado Mayús + F2 o ejecutando el comando de menú Desarrollo → Panel de desarrollo... Ingrese lo siguiente en la línea de comando en la parte inferior de la ventana: los medios emulan la impresión, terminando con Ingresar... La pestaña activa actuará como si fuera para ella tipo de medio haría impresión hasta que cierre o actualice la página.

Emulación de impresión de Firefox

Chrome también tiene una característica similar. Abrir Herramientas de desarrollo, para lo cual, en MacOS, puedes usar el atajo de teclado CMD + Opt + I, v Windows: Ctrl + Mayús + I, o ejecute el comando de menú Herramientas adicionales -> Herramientas para desarrolladores... Después de eso, abre el panel de renderizado. Una forma de hacer esto es presionar la tecla Esc, mostrar el panel Consola, y luego, a través del menú, abra el panel Representación... En el panel de renderizado, coloque la bandera Emular medios CSS y seleccione Impresión.

Emulación de impresión cromada

Puede leer más sobre cómo probar páginas web de impresión en StackOverflow.

3. Unidades absolutas

Las unidades absolutas no son muy adecuadas para las versiones en pantalla de las páginas, pero para imprimir son justo lo que necesita. Es completamente seguro para estilos de impresión, además, se recomienda utilizar unidades de medida absolutas, como cm, mm, in, pt o pc.

Sección (margen inferior: 2cm;)

4. Propiedades de las páginas

Puede utilizar la regla @page para controlar las propiedades de la página, como el tamaño, la orientación y los márgenes de la página. Esto resulta muy útil, digamos, cuando es necesario que todas las páginas impresas tengan los mismos márgenes.

@media print (@page (margen: 1cm;))
La regla @page es parte del estándar Paged Media Module, que ofrece muchas cosas excelentes, como elegir la primera página para imprimir, configurar páginas en blanco, colocar elementos en las esquinas de la página y. Incluso se puede utilizar para preparar un libro para imprimir.

5. Control de saltos de página

Dado que las hojas impresas, a diferencia de las páginas web, no son infinitas, el contenido de las páginas web tarde o temprano se interrumpe en una hoja de papel y continúa en la siguiente. Hay cinco propiedades para controlar los saltos de página.

▍ Salto de página antes del elemento

Si desea que un elemento esté siempre al principio de la página, puede colocar un salto de página forzado delante de él utilizando la propiedad page-break-before.

Sección (salto de página antes: siempre;)

▍ Salto de página tras elemento

La propiedad page-break-after le permite establecer un salto de página forzado después de un elemento. Con esta propiedad, también puede negar la ruptura.

H2 (salto de página después: siempre;)

▍ Salto de página dentro del elemento

La propiedad page-break-inside es útil cuando desea evitar dividir un elemento entre dos páginas.

Ul (salto de página dentro: evitar;)

▍ Filas colgantes superior e inferior

A veces no es necesario forzar los saltos de página, pero desea controlar la salida de los párrafos en los límites de la página.

Por ejemplo, si la última línea de un párrafo no cabe en la página actual, las dos últimas líneas de ese párrafo se imprimirán en la página siguiente. Esto se debe al hecho de que la propiedad que lo controla (viudas, es decir, "huérfanos superiores") está establecida en 2. Esto se puede cambiar.

P (viudas: 4;)
Si surge una situación diferente y solo una línea de un párrafo cabe en la página actual, el párrafo completo se imprimirá en la página siguiente. La propiedad huérfanos también se establece en 2 de forma predeterminada.

P (huérfanos: 3;)
El punto del código anterior es que para que un párrafo no se ajuste completamente a la página siguiente, al menos tres líneas deben caber en la página actual.

Para comprender mejor esto, eche un vistazo a un ejemplo preparado con CodePen. Y aquí hay una versión de depuración del mismo ejemplo, es más conveniente probarlo.

*, *: antes, *: después, *: primera letra, p: primera línea, div: primera línea, cita en bloque: primera línea, li: primera línea (fondo: transparente! importante; color: # 000 ! importante; sombra de cuadro: ninguna! importante; sombra de texto: ninguna! importante;)
Por cierto, los estilos CSS para imprimir son una de las pocas excepciones en las que la directiva! Important está absolutamente bien;)

7. Eliminación de contenido innecesario

Para no desperdiciar tinta, debe eliminar todo lo innecesario de la versión impresa de la página, como diapositivas enormes y hermosas, anuncios, herramientas de navegación del sitio, etc. Esto se puede hacer estableciendo la propiedad de visualización en none en elementos innecesarios. Es muy posible que le resulte correcto mostrar solo el contenido principal de la página y ocultar todo lo demás:

Cuerpo> *: no (principal) (pantalla: ninguno;)

8. Salida de URL de enlaces

Los enlaces, en la forma en que suelen aparecer en las páginas web, son completamente inútiles cuando se imprimen, a menos que el lector de la versión impresa del documento sepa a dónde conducen.

Para mostrar las direcciones de los enlaces después de sus representaciones textuales, basta con utilizar el siguiente estilo:

A: after (content: "(" attr (href) ")";)
Por supuesto, con este enfoque, se "decodificarán" muchas cosas innecesarias. Por ejemplo, enlaces relativos, enlaces absolutos en el mismo sitio que la página que se imprime, enlaces con anclajes, etc. Para no obstruir la página impresa, sería mejor usar algo como esto:

A: not (): after (content: "(" attr (href) ")";)
Parece, por supuesto, una locura. Por lo tanto, explicaré el significado de esta regla en lenguaje común: "Muestre el valor del atributo href junto a cada enlace que tenga un atributo que comience con http, pero que no contenga mywebsite.com".

9. Decodificación de abreviaturas

Las abreviaturas en el texto deben colocarse en la etiqueta. , y su decodificación debe incluirse en el atributo de título. Si diseña abreviaturas como esta, sus significados son muy fáciles de mostrar en una página impresa:

Abbr: after (content: "(" attr (title) ")";)

10. Impresión de fondo forzada

Por lo general, los navegadores, cuando procesan una página para imprimir, no muestran el color de fondo ni las imágenes de fondo, a menos que se les indique explícitamente que lo hagan. Sin embargo, a veces es necesario imprimir todo esto. Aquí es donde nos ayuda la propiedad no estándar de ajuste de color de impresión, que nos permite anular la configuración predeterminada para algunos navegadores.

Encabezado (-kit-web-imprimir-ajustar-color: exacto; imprimir-ajustar-color: exacto;)

11. Consultas de medios

Si escribe consultas de medios similares a la siguiente, tenga en cuenta que las reglas de CSS en dichas consultas no afectarán la versión impresa de la página.

@media pantalla y (ancho mínimo: 48em) (/ * solo pantalla * /)
¿Por qué esto es tan? El punto es que las reglas de CSS se aplican solo si el ancho mínimo es 48em y si el tipo de medio es screen. Si nos deshacemos de la palabra clave screen en esta consulta de medios, estará limitada solo por el valor de ancho mínimo.

@media (ancho mínimo: 48em) (/ * todos los tipos de medios * /)

12. Impresión de mapas

Las versiones actuales de Firefox y Chrome pueden imprimir mapas, pero Safari, por ejemplo, no. ¿Qué pasa con la impresión de tarjetas? Una de las opciones universales es utilizar mapas estáticos en lugar de dinámicos.

Mapa (ancho: 400 px; alto: 300 px; imagen de fondo: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -kit-web-imprimir-ajustar-color: exacto; imprimir-ajustar-color: exacto;)

13. Códigos QR

La impresión de códigos QR que contienen enlaces importantes puede mejorar en gran medida la usabilidad de las páginas web impresas. Aquí está The Smashing Magazine para obtener consejos útiles sobre el tema. Uno de ellos es incluir sus direcciones en forma de códigos QR en páginas impresas. Como resultado, el usuario, para abrir la página desde la cual se realizó la impresión en el navegador, no tiene que escribir su dirección completa en el teclado.

14.Acerca de la impresión de páginas no optimizadas

Al entrar en el tema de la impresión de páginas web, descubrí una gran herramienta que te permite preparar cómodamente páginas no optimizadas para imprimir. Con Printliminator

Saltos de página

Las siguientes secciones describen el modelo de formato de página utilizado en CSS2. Se utilizan cinco propiedades diferentes para decirle al agente de usuario dónde puede o debe romper la página y la página (izquierda o derecha) donde debe continuar mostrando contenido. Cada salto de página interrumpe la visualización del contenido en el cuadro de la página actual y hace que el resto del árbol del documento se muestre en un nuevo cuadro de página.

Saltos antes y después de los elementos: "salto de página antes", "salto de página-después", "salto de página dentro"

"salto de página antes"

Valor inicial: auto
Herencia: no
Asignación porcentual: N / A

"salto de página después de"

"salto de página dentro"

Valor: evitar | auto | heredado
Valor inicial: auto
Alcance: elementos de nivel estructural
Herencia: si
Asignación porcentual: N / A
Dispositivos: formato visual, paginado

Los valores de estas propiedades tienen los siguientes significados:

auto

No inicia ni rechaza un salto de página antes (después o dentro) de un bloque generado.

siempre

Siempre inicia un salto de página antes (después) del bloque generado.

evitar

Cancela el salto de página antes (después o dentro) del bloque generado.

izquierda

Inicia uno o dos saltos de página antes (después) del bloque generado, de modo que la página siguiente se formatea como la página de la izquierda.

Derecha

Inicia uno o dos saltos de página antes (después) del bloque generado para que la página siguiente se formatee como la página de la derecha.

La ubicación potencial de un salto de página está determinada por la propiedad "page-break-inside" del elemento principal, la propiedad "page-break-after" del elemento anterior y la propiedad "page-break-before" del elemento posterior. Si los valores de estas propiedades son distintos de "auto", los valores "always", "left" y "right" tienen prioridad sobre el valor de "evitar". La sección sobre saltos de página aceptables proporciona reglas claras para iniciar o no permitir saltos de página utilizando estas propiedades.

Uso de páginas con nombre: "página"

"página"

Sentido:<идентификатор>| auto
Valor inicial: auto
Alcance: elementos de nivel estructural
Herencia: si
Asignación porcentual: N / A
Dispositivos: formato visual, paginado

La propiedad "página" se puede utilizar para determinar el tipo específico de página en la que se mostrará el elemento.

En este ejemplo, todas las tablas se colocarán en el lado derecho de la página (llamado "rotada"), que está en orientación horizontal:

TABLA (página: rotada; salto de página antes: derecha)

La acción de la propiedad "página" es la siguiente: si el valor de la propiedad "página" de un bloque de página, cuyo contenido pertenece al nivel de línea, difiere del valor de una propiedad similar del bloque de página anterior, cuyo contenido también pertenece al nivel de línea, luego se insertan uno o dos saltos de página entre ellos, después de lo cual la salida se realiza en un bloque de página con nombre. Consulte la sección siguiente sobre saltos de página forzados.

En el siguiente ejemplo, dos tablas se muestran en páginas horizontales (naturalmente en la misma página si ambas caben en ella), el tipo de página "estrecha" no se usa en absoluto, aunque está configurado para el elemento DIV.

@página estrecha (tamaño: 9 cm 18 cm)
@page rotated (tamaño: paisaje)
DIV (página: estrecha)
TABLA (página: rotada)

utilizado en el documento

...

Saltos de página dentro de los elementos: "huérfanos", "viudas"

"huérfanos"

Sentido:<целое>| heredado
Valor inicial: 2
Alcance: elementos de nivel estructural
Herencia: si
Asignación porcentual: N / A
Dispositivos: formato visual, paginado

"viudas"

Sentido:<целое>| heredado
Valor inicial: 2
Alcance: elementos de nivel estructural
Herencia: si
Asignación porcentual: N / A
Dispositivos: formato visual, paginado

La propiedad huérfanos determina el número mínimo de líneas de párrafo que deben dejarse en la parte inferior de la página. La propiedad "viudas" determina el número mínimo de líneas de párrafo que deben dejarse en la parte superior de la página. A continuación se ofrecen ejemplos del uso de estas propiedades para controlar los saltos de página.

Para obtener más información sobre cómo dar formato a los párrafos, consulte la sección sobre cuadros de línea.

Saltos de página aceptables

En el flujo normal, el salto de página puede estar en las siguientes ubicaciones:

En el espacio reservado para márgenes verticales entre bloques de construcción. Si se produce un salto de página en este punto, los valores calculados de las propiedades correspondientes "margin-top" y "margin-bottom" se establecen en "0".
Entre bloques de líneas dentro de un bloque de nivel estructural.

Las discontinuidades del tipo considerado satisfacen las siguientes reglas:

Regla A: Se permite el salto (1) solo si se permite que ocurran los valores de las propiedades "page-break-after" y "page-break-before" de todos los elementos que generan los bloques que ocurren en el salto. , que ocurre cuando al menos uno de ellos es "siempre", "izquierda" o "derecha", o todos son "automáticos" al mismo tiempo.
Regla B: Sin embargo, si todas estas propiedades se establecen en "auto" y la propiedad "page-break-inside" del ancestro común más cercano de todos los elementos con nombre se establece en "evitar", entonces un salto de página en ese punto es prohibido.
Regla B: El salto de página (2) solo se permite si el número de cuadros en línea entre el salto y el comienzo del bloque de estructura de cierre es igual o mayor que el valor de la propiedad "huérfanos" y el número de cuadros en línea entre la ruptura y el final del bloque es igual o mayor que el valor de la propiedad "viudas" ...
Regla D: Además, el salto de página (2) solo se permite si la propiedad "page-break-inside" está establecida en "auto".

Si las reglas anteriores no le permiten insertar suficientes saltos, las reglas B y D se ignoran para evitar que el contenido fluya fuera del bloque de página, lo que le permite crear saltos adicionales.

Si después de esto no es posible lograr un número suficiente de rupturas, las reglas A y B no se tienen en cuenta para buscar puntos de ruptura adicionales.

Los saltos de página no se pueden realizar en bloques absolutamente posicionados.

Saltos de página forzados

Se debe producir un salto de página (1) si al menos una de todas las propiedades "page-break-after" y "page-break-before" de los elementos que generan bloques que se producen en el punto de salto es "always", "left ", o" correcto ".

También debe producirse un salto de página (1) si los valores de la propiedad "página" de los cuadros de línea inmediatamente antes y después del salto son diferentes.

Saltos de página "mejores"

CSS2 no especifica qué salto de página de los muchos saltos permitidos debe usarse; CSS2 no evita que los agentes de usuario inserten saltos de página en cualquier lugar o no los utilicen en absoluto. Pero la especificación CSS2 recomienda encarecidamente que los agentes de usuario se adhieran a las siguientes heurísticas (hasta que resulte que a veces se contradicen entre sí):

los saltos de página deben realizarse con la menor frecuencia posible;
todas las páginas que no terminen con un salto forzado deben tener aproximadamente la misma altura;
no debe haber rupturas dentro de un bloque que tenga un borde;
no debe haber descansos dentro de la mesa;
no debe haber espacios dentro del objeto movido.

Supongamos que la hoja de estilo contiene las propiedades "huérfanos: 4" y "viudas: 2" y hay 20 filas (recuadros de línea) disponibles en la parte inferior de la página actual:

si el último párrafo de la página actual no contiene más de 20 líneas, debe permanecer en la página actual;
si el párrafo contiene 21 o 22 líneas, y la segunda parte del párrafo no debe violar las restricciones impuestas por la propiedad "viudas", entonces, en virtud de esto, su segunda parte debe constar de dos líneas;
si un párrafo tiene más de 23 líneas, la primera parte debe tener 20 líneas y la segunda parte debe incluir todas las demás líneas.

Ahora, suponga que el valor de la propiedad "huérfanos" es "10", el valor de la propiedad "viudas" es "20" y hay 8 filas disponibles en la parte inferior de la página actual:

si el párrafo al final de la página actual no contiene más de 8 líneas, entonces debe permanecer en la página actual;
si un párrafo contiene más de 9 líneas, entonces no se puede dividir (ya que esto violará la restricción establecida por la propiedad "huérfanos"). Por lo tanto, debe moverse a la página siguiente como un bloque.

Cómo lidiar con los saltos de página al imprimir una tabla HTML grande (8)

Tengo un proyecto que requiere imprimir una tabla HTML con muchas filas.

Mi problema es cómo se imprime la tabla en varias páginas. A veces corta la línea por la mitad, haciéndola ilegible porque la mitad está en el borde de la página y el resto está impreso en la parte superior de la página siguiente.

La única solución plausible en la que puedo pensar es usar DIV complejos en lugar de una tabla y forzar saltos de página si es necesario ... pero antes de pasar por todos los cambios, pensé que podría preguntar aquí antes.

Utilice estas propiedades CSS:

Salto de página después de salto de página antes

Por ejemplo:

....

Ninguna de las respuestas aquí me funcionó en Chrome. AAverin en GitHub creó un Javascript útil para esto y esto funcionó para mí:

Simplemente agregue js a su código y agregue la clase splitForPrint a la tabla y dividirá cuidadosamente la tabla en varias páginas y agregará el encabezado de la tabla a cada página.

Nota: cuando se usa un salto de página: siempre para una etiqueta, crea un salto de página después del último fragmento de la tabla, ¡creando una página completamente en blanco cada vez! Para solucionar este problema, cámbielo a page-break-after: auto. Se romperá correctamente y no creará una página en blanco adicional.

....

La respuesta aceptada no funcionó para mí en todos los navegadores, pero después de que el CSS realmente funcionó para mí:

Tr (display: table-row-group; page-break-inside: evitar; page-break-after: auto;)

La estructura html era:

...

En mi caso, hubo algunos problemas adicionales con thead tr, pero esto resolvió el problema original de mantener las filas de la tabla.

Debido a problemas de encabezado, terminé con:

#theTable td * (salto de página dentro: evitar;)

Esto no impidió que las filas se derrumbaran; solo el contenido de cada celda.

Terminé con el enfoque de @ vicenteherrera, con algunos ajustes (que quizás sea el bootstrap 3).

Básicamente; no podemos romper tr s o td s porque no son elementos de nivel de bloque. Entonces insertamos div s en cada uno y aplicamos nuestras reglas de salto de página- * a los divs. En segundo lugar, agregamos algo de relleno en la parte superior de cada uno de estos divs para compensar cualquier artefacto de estilo.

Se necesitaron enmiendas y ajustes de relleno para compensar parte del jitter que se introdujo (de bootstrap, supongo). No estoy seguro de si estoy presentando una nueva solución a partir de otras respuestas a esta pregunta, pero tal vez ayude a alguien.

Recientemente resolví este problema con una buena solución.

Evitar rotura (borde: 2px sólido; salto de página dentro: evitar;)

Función Print () ($ (". TableToPrint td, .tableToPrint th"). Each (function () ($ (this) .css ("width", $ (this) .width () + "px"))) ; $ (". tableToPrint tr"). wrap ("

"); window.print ();)

¡Funciona de maravilla!

He probado muchas soluciones y ninguna funcionó bien.

Así que probé un pequeño truco y funciona:

tfoot con estilo: posición: fija; abajo: 0px; posición: fija; abajo: 0px; cabe en la parte inferior de la última página, pero si el pie de página es demasiado alto, se superpone con el contenido de la tabla.

tfoot solo con: display: table-footer-group; no se superpone pero no está al final de la última página ...

Pongamos dos pies:

TFOOT.placer (display: table-footer-group; height: 130px;) TFOOT.contenter (display: table-footer-group; position: fixed; bottom: 0px; height: 130px;) su texto largo o imagen alta aquí

Uno reserva espacio en las páginas que no están al dorso, el otro en su pie de página personal.

Prueba

Bóveda
notas
X
X
X

Aunque vivimos en una era digital en la que se puede acceder fácilmente a todo, todavía hay muchas personas que prefieren leer textos largos en papel. Existe la posibilidad de que algunos usuarios impriman el texto de su sitio para poder leerlo fuera de la computadora.

La capacidad de renderizar contenido adecuado para impresión existe desde hace mucho tiempo. Podemos hacer esto usando la regla @media en la hoja de estilo de esta manera:

@media print ( / * Reglas de estilo * / }

Hay varias propiedades que le permiten diseñar el contenido de una página web para hacerla imprimible, y cubriremos una: salto de página.

¿Qué hace?

Si ha trabajado con editores de texto como Microsoft Word y Pages, debe estar familiarizado con el menú de salto de página que le permite ajustar el texto en la página siguiente.

Este módulo hace lo mismo, permitiéndole controlar cómo se envuelve el contenido de una página web, página por página.

Usar un salto de página

Por ejemplo, hemos creado una página de demostración que vamos a imprimir. Encontramos una transferencia incorrecta, como puede ver a continuación.

Se verá mejor si el encabezado y la línea huérfana comienzan en la página siguiente.

Para hacer esto, usamos la propiedad page-break-after y la configuramos en always para forzar al siguiente elemento a pasar a la siguiente página.

Salto de página (salto de página después: siempre;)

Luego puede crear un nuevo elemento con una clase entre los elementos, o asignar la clase al elemento anterior de esta manera.

Con el Borrador función, puede tomar composiciones de una foto, luego juntar todo eso, para obtener el fondo sin los extras que no tiene.

El teléfono para viajar

Traductor S va a ser una gran herramienta para tus viajes ya que ...

Ahora el título y la línea colgante inferior comenzarán en la página siguiente.

Líneas colgantes superior e inferior

El método anterior puede resultar tedioso si tiene mucho texto. Por lo tanto, en lugar de obligar al contenido a pasar a la página siguiente, es mejor establecer un umbral mínimo para los huérfanos de arriba y de abajo.

En la práctica tipográfica, las líneas colgantes superior e inferior se refieren a las palabras sobrantes y las líneas cortas que aparecen arrancadas del resto del párrafo en otra página.

Utilizando las propiedades huérfanos (huérfanos inferiores) y viudas (huérfanos superiores) podemos establecer el umbral mínimo. En el siguiente ejemplo, estamos especificando que al menos tres líneas permanecen en la parte inferior o al principio del párrafo donde se produce el salto de página.

P (huérfanos: 3; viudas: 3;)

Fuentes adicionales

Hemos cubierto los conceptos básicos del uso de un salto de página imprimible para el texto de su sitio, y esperamos que lo inspire a pensar en estilos para que su sitio se imprima para que su contenido se vea bien tanto en la pantalla como en el papel.

Traducción - Deber

Un bloque de página consta de un área de página que contiene contenido y un área de margen que rodea el área de página. La regla @page se usa para cambiar algunas propiedades de CSS al imprimir un documento. Solo puede cambiar el margen del elemento y también puede establecer saltos de página en una ubicación específica.

@page (margen: 2 pulgadas;)

Es posible definir márgenes de documentos individuales dentro de la regla @page, como margin-top, margin-right, margin-bottom, margin-left:

2. Saltos de página

Puede controlar los saltos de página utilizando las propiedades page-break-before, page-break-after y page-break-inside. Estas propiedades se aplican a elementos de bloque para los que la propiedad de posición se establece en relativa o estática.

salto de página antes
Valores:
auto
siempre	Siempre agrega un salto de página antes del elemento.
evitar	Cancela la colocación de la ruptura delante del elemento, si es posible.
izquierda	Agrega uno o dos saltos de página antes del elemento para que la página siguiente tenga el formato de la página izquierda. El elemento se imprimirá comenzando desde la parte superior de la página izquierda, es decir, en la página a la izquierda del lomo. Para la impresión dúplex, se imprimirá en el reverso de una hoja de papel.
Derecha	Agrega uno o dos saltos de página antes del elemento. El elemento se imprimirá comenzando en la parte superior del borde derecho. La página siguiente se formateará como la página de la derecha.
heredar

Sintaxis:

@media print (h1 (salto de página antes: siempre;))

salto de página después
Valores:
auto	El valor predeterminado es establecer saltos de página automáticos.
siempre	Siempre agrega un salto de página después de un elemento.
evitar	Cancela la adición de un descanso después del elemento, si es posible.
izquierda	Agrega uno o dos saltos de página después del elemento para que la página siguiente tenga el formato de la página izquierda. El elemento se imprimirá comenzando desde la parte superior de la página izquierda, es decir, en la página a la izquierda del lomo. Para la impresión dúplex, se imprimirá en el reverso de una hoja de papel.
Derecha	Agrega uno o dos saltos de página después del elemento para que la página siguiente tenga el formato de la página correcta. El elemento se imprimirá comenzando en la parte superior del borde derecho.
heredar	Hereda esta propiedad del elemento padre.