Impresión portarretrato con CSS3

29/may/2012 1

Contexto: día de semana laboral, cliente envía sus observaciones:

CSSLab.cl - Impresión portarretrato con CSS3

Después de leer un poco, dí con la solución la que presento a continuación. Básicamente con CSS2 existió una propiedad que permitía que se definiera el modo de impresión a través de estilos:

@Page {
   size: landscape;
}

Ver ejemplo 1

CSSLab.cl - Impresión portarretrato con CSS3 - Ejemplo 1

Como podrán notar este a definición es de comportamiento y no de estilos, por lo que fue desestimada desde CSS2.1 y de ahí que sigue en el purgatorio de las propiedades olvidadas (aunque en la actualidad sólo Chrome lo sigue soportando). Me quedaban 2 soluciones:

  • con algún modo através de JavaScript, ó
  • modificar el driver de cada marca y modelo de impresora y de alguna manera comunicar el HTML con ellas.

Continué indagando y finalmente dí con un truco que involucra CSS3. Primero, debes definir el (los) elemento(s) que necesitas imprimir en este modo (en mi caso era sólo una imagen), y darle estilos dentro de un media="print" rotando este(os) elemento(s) aprovechando la impresión vertical pero con el elemento girado:

<style type="text/css" media="print">
   img {
      transform: scale(1.2) rotate(-90deg) translate(-200px, 0);
   }
</style>

Básicamente, lo que hacemos es con la propiedad CSS3 transform rotar el elemento -90º, lo escalo un poco para que se vea mayor (1.2, opcional) y lo muevo -200px en el eje X para que quede centrado en una hoja tamaño A4.

Ver ejemplo 2

CSSLab.cl - Impresión portarretrato con CSS3 - Ejemplo 2

Funciona perfecto en IE9+, Chrome, Safari (enfin, browsers modernos). Ya para IE8-, deberás aplicar filtros de matrices, los cuales fueron un horrible invento de Microsoft.

** Omití intencionalmente todos las definiciones propietarias CSS3 pero en el ejemplo puedes inspeccionar y verás el código completo.

Links:

Comentarios

  1. Darky [#]

    Buen truco.. gracias por compartirlo…

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab