Contexto: día de semana laboral, cliente envía sus observaciones:
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;
}
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.
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.
Comentarios
Buen truco.. gracias por compartirlo…