attribute html css printing

attribute - title html



Impresión en HTML con publicaciones absolutas. (6)

Como usted dice, los navegadores web tienden a hacer locuras cuando imprimen. Los motores orientados a la impresión son a menudo mejores.

WeasyPrint es un motor de código abierto que se procesa en PDF y admite el posicionamiento absoluto, así como CSS 3 Paged Media para establecer los márgenes de la página:

@page { margin: 1cm /* or 0, if you want */ }

¿Es posible imprimir una página HTML con elementos posicionados verdaderamente absolutos en papel? Parece que todos los navegadores están haciendo un gran lío aquí. Es fácil definir un cuerpo por unidades absolutas (por ejemplo, cm) y colocar elementos por position: absolute dentro. Sin embargo, todos los navegadores parecen intentar hacer imposible imprimir una página de este tipo. Por ejemplo, FF es agregar márgenes de impresión, incluso cuando se imprime en un PDF en Linux a pesar de la configuración de la página con 0 márgenes. Chrome parece reducir la página en todos los casos. Entonces, ¿cómo imprimir algo con posicionamiento absoluto, por ejemplo. ¿Campos de papel, marcas, etc.? ¿He pasado por alto algo?

Haga su envase para tener posición relativa. Esa es la única manera de mantener los elementos posicionados absolutos en el mismo lugar en cada pantalla y papel. así que si tu div principal (la div donde se encuentra todo tu contenido) agrega lo siguiente a tu css:

#maindivname{position:relative;}

Debería hacer el truco.

He probado el estado del navegador para imprimir elementos "posición: absolutos" con los siguientes resultados:

  • IE 11: Fallo. No importa qué sistema operativo, 7,8,8.1.
  • IE 10: Pase. Sin embargo, no puede revertir a 10 en 8.1, por lo que las personas que están atascadas.
  • Firefox hasta 38.05 = Fallo. Desconocido si alguna versión alguna vez funcionó.

La buena noticia es que parece que la gente de Blink / WebKit hizo su tarea en lugar de usar un código deficiente.

  • Chrome: Pase
  • Opera: Pase

Lamentablemente, el módulo CSS3: Paged Media permite que todo esto suceda. Estas son las reglas relativas a las páginas que son demasiado grandes:

3.3.3. Renderizar cuadros de página que no se ajustan a una hoja de página

Si un cuadro de página no coincide con las dimensiones de la hoja de la página de destino, el agente de usuario PUEDE elegir (en orden de preferencia):

  • Renderice el cuadro de página en el tamaño indicado en una hoja de página más grande.
  • Gire el cuadro de página 90 ° si esto hará que el cuadro de página se ajuste a la hoja de la página.
  • Escala el cuadro de página para que se ajuste a la hoja de la página. (No hay ningún requisito para mantener la relación de aspecto de la página o de ningún elemento de la página al escalar; sin embargo, se prefiere la conservación de la relación de aspecto.) [Hecho por Chrome]
  • Vuelva a formatear el contenido de la página, incluyendo "derramar" en otras hojas de página. [hecho por muchos otros navegadores o más antiguos]
  • Clip desbordado contenido (menos preferido).

El agente de usuario debe consultar al usuario antes de realizar estas operaciones.

3.3.4. Posicionando el cuadro de página en la hoja.

Cuando el cuadro de página es más pequeño que el tamaño de la página, el agente de usuario debe centrar el cuadro de página en la hoja, ya que alineará las páginas de doble cara y evitará la pérdida accidental de información que se imprime cerca del borde de la hoja.

Y esta es la regla que rompe todas tus cosas de position :

3.7. Contenido fuera del cuadro de página

[...] Además, cuando las casillas están posicionadas absolutamente, PUEDEN terminar en ubicaciones "inconvenientes". Por ejemplo, las imágenes PUEDEN colocarse en el borde del cuadro de página. De manera similar, cuando las casillas utilizan una posición fija o relativa, también PUEDEN terminar fuera de la casilla de la página.

Una especificación para el formato exacto de dichos elementos queda fuera del alcance de este documento. Sin embargo, recomendamos que los autores y los agentes de usuario observen los siguientes principios generales relacionados con el contenido fuera del cuadro de la página:

  • Los agentes de usuario DEBEN evitar generar una gran cantidad de cuadros de página vacíos para respetar el posicionamiento de los elementos (por ejemplo, no desea imprimir 100 páginas en blanco). Sin embargo, tenga en cuenta que la generación de un pequeño número de cuadros de página vacíos PUEDE ser necesario para respetar los valores de "izquierda" y "derecha" para "salto de página anterior" y "salto de página posterior".
  • Los autores NO DEBEN colocar los elementos en ubicaciones inconvenientes solo para evitar que se representen. En lugar:
    • Para suprimir completamente la generación de cuadros, establezca la propiedad ''display'' en ''none''.
    • Para hacer que una caja sea invisible, establezca la propiedad ''visibilidad''.
  • Los agentes de usuario PUEDEN manejar cajas ubicadas fuera de la caja de la página de varias maneras, incluso descartándolas o creando cajas de páginas para ellas al final del documento.

Eche un vistazo al segundo párrafo de la sección 3.7: Una especificación para el formato exacto de dichos elementos queda fuera del alcance de este documento. Como no hay otro documento ni otra guía, entonces el principio general que sigue a este párrafo, cada navegador puede hacer lo que quiera.

Es uno de los defectos que se encuentran actualmente en este módulo CSS3. Sin embargo, creo que esas fallas no se pueden eliminar con un módulo CSS4 o CSS3 revisado, ya que la variedad de posibles hojas de estilo y diseños resultantes es demasiado grande para cubrirlos. También tenga en cuenta una pequeña nota al pie en el perfil de impresión CSS :

‡ La impresora PUEDE ignorar los elementos posicionados que se colocan en la página antes de la posición del elemento actual en el flujo normal.

Entonces, básicamente, no es posible crear el mismo efecto en todos los navegadores. Por el momento, la única manera posible de lograr un documento portátil es crear un PDF con una aplicación de terceros o mediante una impresora PDF y su navegador favorito. Cualquier otra forma está destinada a fallar siempre que las recomendaciones del W3C no sean estrictas o que los proveedores de navegadores implementen lo que quieran.

Ver también:

Notas adicionales

Si tiene un montón de position:absolute elementos position:absolute que deben imprimirse a veces es una buena pregunta si un elemento realmente necesita posicionarse de manera absoluta, o si se puede lograr el mismo efecto de una manera ligeramente diferente o más fácil. También tenga en cuenta que debe usar la display:none en cada elemento que no sea realmente necesario para los medios impresos, como anuncios, navegaciones, etc.

Las consultas de medios harán el truco: revisa este enlace y la pregunta anterior, quizás te ayude. ¿Sugerencias para la depuración de hojas de estilo de impresión?

La consulta de medios de transición px a pulgadas / cm / lo que sea necesario para los requisitos de impresión.

El borde / margen que mencionó es probablemente el área imprimible de su impresora (el borde de sujeción). La mayoría de las impresoras necesitan algún tipo de borde para agarrar y alimentar el papel. Es por eso que cuando uno imprime un documento de sangrado completo (tinta hasta el borde), se imprime en el stock más grande de lo necesario y luego se recorta.

establecer el margen con la configuración de la página es la primera y principal solución para imprimir la página HTML o un DIV .

Después de que todo el resultado no esperado llegue, entonces necesitas algunas excavaciones en tu página HTML .

Cree una ventana sin la barra de título ni ninguna barra personalizada con el script java. Y ponga todos los datos originales en esa ventana con una position:relative y establezca también el tipo de medio como impreso.

position:relative; media:print;

Espero que sea de ayuda.