tamaño tablas print para paginas imprimir hojas formato etiquetas estilo ejemplo descargar codigos carta css printing firebug google-chrome-devtools web-inspector

css - tablas - ¿Sugerencias para la depuración de hojas de estilo de impresión?



html tamaño carta (11)

En Chrome v41, está ahí, pero en un lugar ligeramente diferente.

Recientemente he estado trabajando en una hoja de estilo de impresión para un sitio web, y me di cuenta de que no tenía ninguna forma efectiva de modificarlo. Una cosa es tener un ciclo de recarga para trabajar en el diseño en pantalla:

  • cambiar código
  • pestaña de comando
  • recargar

pero todo el proceso se vuelve mucho más arduo cuando intentas imprimir:

  • cambiar código
  • pestaña de comando
  • recargar
  • impresión
  • entrecerrar los ojos en la imagen de vista previa de impresión
  • abrir PDF en Vista previa para una inspección adicional

¿Hay herramientas que me estoy perdiendo aquí? ¿El inspector de WebKit tiene una casilla de verificación de "pretender que se trata de medios paginados"? ¿Hay algo de magia que Firebug ( estremecimiento ) pueda hacer?

Hay una manera fácil de depurar su hoja de estilos de impresión sin cambiar ningún atributo de medios en su código HTML (por supuesto, como se señaló, no resuelve el problema de ancho / páginas):

  • Usa la extensión Firefox + Web Developer.
  • En el menú Web Developer, elija CSS / Display CSS por tipo de medio / Imprimir
  • Vuelva al menú Web Developer, elija Opciones / Características persistentes

Ahora estás viendo el CSS impreso y puedes recargar tu página indefinidamente. Una vez que hayas terminado, desmarca "Características persistentes" y vuelve a cargar, obtendrás la pantalla CSS nuevamente.

HTH.

Hay una opción para eso en el inspector de Chrome.

  1. Abra el inspector de DevTools (mac: Cmd + Shift + C , ventanas: Ctrl + Shift + C )
  2. Haga clic en el icono de modo de dispositivo de alternar , ubicado en la esquina superior izquierda del panel de DevTools. (Windows: Ctrl + Shift + M , mac: Cmd + Shift + M ).
  3. Haga clic en Más anulaciones Icono en la esquina superior derecha de la ventana del navegador para abrir el cajón de devtools.

  4. Luego, seleccione Medios en el cajón de emulación y marque la casilla de verificación de medios CSS .

Esto debería funcionar.

Actualización: Los menús han cambiado en DevTools. Ahora puede encontrarlo haciendo clic en el menú "tres puntos" en la esquina superior derecha> Más herramientas> Configuración de procesamiento> Emular medios> imprimir.

Fuente: página de Google DevTools *

La interfaz de usuario de Chrome es diferente de nuevo a partir de v53.

No necesito usar esta función a menudo, pero cada vez que lo hago, me lleva una eternidad descubrir a dónde lo ha movido el equipo de Chrome desde la última vez que quemé ciclos tratando de localizarlo.

Observe que es el menú ... en el panel Herramientas de desarrollo, no el menú ... en el panel del navegador Chrome.

Ahora desplácese hacia abajo en la sección Rendering. A menudo está por debajo del pliegue.

Si tiene una función de impresión que reescribe el contenido de la página en una nueva ventana con su hoja de estilo de impresión referenciada, tendrá una idea mucho mejor de cómo se verá en el papel y podrá realizar la depuración. con los gustos de firebug también.

Aquí hay un ejemplo de cómo se puede hacer con JavaScript / jquery

$("#Print").click(function () { var a = window.open('''', '''', ''scrollbars=yes,width=1024,height=768''); a.document.open("text/html"); a.document.write("<html><head>"); a.document.write(''<link rel="stylesheet" href="css/style.css" />''); a.document.write(''<link rel="stylesheet" href="css/print.css" />''); a.document.write("</head><body>"); a.document.write($(''#Content'').html()); a.document.write(''</body></html>''); a.document.close(); a.print(); });

Siguiendo la respuesta de rflnogueira, la configuración actual de Chrome (40.0. *) Se verá a continuación:

Simplemente muestre la hoja de estilo de impresión en su navegador usando media="screen" mientras realiza la depuración. La vista previa de impresión utiliza el mismo motor de renderizado que el modo de navegación normal para que pueda obtener resultados precisos con eso.

Supongo que desea tanto control de la ventana impresa como sea posible sin utilizar un enfoque de HTML a PDF ... Use la pantalla @media para depurar - @media print para el css final

Los navegadores modernos pueden brindarle una vista rápida de lo que sucederá en el momento de la impresión utilizando pulgadas y puntos en una @media query .

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */ html { width:8.5in; } body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */ ... }

Una vez que su navegador muestre "pulgadas", tendrá una mejor idea de qué esperar. Este enfoque debería terminar con el método de vista previa de impresión. Todas las impresoras trabajarán con pt y in unidades, y el uso de la técnica @media le permitirá ver rápidamente lo que sucederá y ajustarse en consecuencia. Firebug (o su equivalente) acelerará absolutamente ese proceso. Cuando ha agregado sus cambios a @media, tiene todo el código que necesita para un archivo CSS vinculado mediante el atributo media = "print" ; solo copie / pegue las reglas de la pantalla @media en el archivo al que se hace referencia.

Buena suerte. La web no fue construida para imprimir. Crear una solución que ofrezca todo su contenido, los estilos iguales a lo que se ve en el navegador puede ser imposible a veces. Por ejemplo, un diseño fluido para una audiencia predominantemente de 1280 x 1024 no siempre se traduce fácilmente en una impresión láser de 8,5 x 11 agradable y ordenada.

Referencia del W3C para fines de educación: http://www.w3.org/TR/css3-mediaqueries/

Utilizo macros para enviar pulsaciones de teclas y clics del mouse repetidamente. Bajo Windows, AutoHotKey es un gran software y bajo OS X puedes leer sobre Automator como una alternativa de AHK para OsX .

Bajo Windows (reemplaza Ctrl por Cmd bajo OS X) "Ctrl-s / cambia a la ventana Fx donde sea que esté en la lista de ventanas abiertas / Ctrl-r" vinculado a 1 tecla no utilizada evita la frustración de las tareas poco interesantes y finalmente salvará mis brazos de RSI :)

Chrome 48 puede depurar estilos de impresión dentro de la pestaña Representación .

Haga clic en el icono de menú en la parte superior derecha del inspector y Configuración de procesamiento .

Editar
Para Chrome 58, la ubicación ha cambiado a Inspector web> Menú> Más herramientas> Representación

En DreamWeaver hay una barra de herramientas que muestra prácticamente cualquier opción de representación que desee: pantalla, impresión, medios de mano, pantalla de proyección, medios de televisión, hojas de estilos de tiempo de diseño, etc. Esto es lo que uso especialmente porque: muestra instantáneamente una vista previa con 1 pulsación única de un botón.