Impresión portarretrato con CSS3

29/May/2012 246

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. tadalafil online [#]

    generic tadalafil

  2. Yndzuy [#]

    fda approved over the counter ed pills – pills erectile dysfunction vitality ed pills

  3. KevinWet [#]

    gay dating advice
    gay speed dating nyc 2021
    gay dating scam format

  4. Xwrtcz [#]

    prescription prednisone cream – prednisone 40mg for sale prednisone canada pharmacy

  5. hydroxychloroquine azithromycin and zinc [#]

    hydroxychloroquine azithromycin and zinc

    Database Error

  6. Kwghhu [#]

    prednisone rx – prednisone canada pharmacy online prednisone

  7. Lzmzyh [#]

    price of sildenafil citrate – viagra usa 100mg original viagra

  8. Jefferybed [#]

    best price on cialis 5mg
    herbal viagra cheap canadian viagra cheap drugs viagra pharmacy online buy viagra online cheap pharmacy rx one buy medication without an rx how long does viagra last canadian drug companies how to get viagra
    buy cialis online natural substitute for viagra canadian online pharmacy for cialis best price viagra ordering viagra online

  9. Jefferybed [#]

    viagra for women
    generic drugs us pharmacy for cialis canadian medicine medications without prescription generic viagra free shipping medicine from canada how to take viagra cialis from canadian pharmacies buy viagra in canada canada.viagra
    hydrocodone canadian pharmacy meds http://www.northwestpharmacy.com no prescription viagra medication without prescription

  10. Vsotbr [#]

    viagra 100mg cost – where to purchase viagra order viagra online nz

  11. KevinWet [#]

    online gay teen dating
    dating as a gay guy in suburbs
    gay girl dating website

  12. how quickly does dapoxetine work [#]

    whoah this blog is excellent i really like reading your articles.
    Keep up the good work! You understand, a lot of people
    are hunting round for this info, you can help
    them greatly. https://buszcentrum.com/priligy.htm

  13. canada drugs online [#]

    canadian pharmacies online

  14. sildenafil vs viagra [#]

    sildenafil dosage

  15. is 5 mg prednisone safe [#]

    I think the admin of this web site is truly working hard in support of his website,
    as here every data is quality based stuff. http://herreramedical.org/prednisone

  16. generic sildenafil available in usa [#]

    Hello there! Do you know if they make any plugins to safeguard against hackers?

    I’m kinda paranoid about losing everything I’ve worked hard on. Any suggestions? http://herreramedical.org/sildenafil

  17. Jefferybed [#]

    medication without prescription
    buy lsd online viagra without a doctor prescription usa canada rx canadian pharmacies shipping to usa is there a generic for cialis? medication prices prescription prices canada online pharmacy canadian pharmacy – cialis cheap generic viagra online
    cheap cialis from canada online pharmacies in canada drugstore in canada viagra mail order viagra ingredients

  18. PatrickFax [#]

    https://cialiswithdapoxetine.com/ cialis without a doctor prescription

  19. tadalafil once a day [#]

    Thanks for sharing your thoughts about meds. Regards http://www.deinformedvoters.org/vidalista-online

  20. how fast does prednisone work [#]

    This design is spectacular! You definitely know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my
    own blog (well, almost…HaHa!) Excellent job. I really
    loved what you had to say, and more than that, how you
    presented it. Too cool! https://buszcentrum.com/deltasone.htm

  21. MarvinFuh [#]

    canadian pharmacy online viagra
    cialis.com coupon generic viagra india viagra women viagra cialis canada pharmacy cialis canada pharmacy for viagra ordering viagra online genuine viagra http://www.canadian pharmacy viagra expiration date
    discount viagra online generic viagra india london pharmacy canada real cialis pharmacy viagra

  22. gay dating planet [#]

    gay dating sites uk https://gayonlinedating.net/

  23. MarvinFuh [#]

    alcohol and viagra
    viagra sale online cialis from canadian pharmacies mexican pharmacy adhp viagra for sale viagra pro buy levitra canada cialis and pharmacy viagra 100mg price do you need a prescription for viagra in canada
    canadian pharmacy online viagra buy viagra free trial viagra india pharmacy best price for generic cialis

  24. stromectol for humans [#]

    ivermectin cream cost Impresion portarretrato con CSS3 | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin cream

  25. gay dating he's on grindr [#]

    is dating a trans gay https://gayedating.com/

  26. gay dating houston texas [#]

    speed dating gay des moines https://gaydatingcanada.com/

  27. denver gay dating [#]

    gay dreanei dating https://dating-gaym.com/

  28. ivermectin1.com [#]

    cumpДѓra ivermectina nz Impresion portarretrato con CSS3 | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin for humans over the counter skin

  29. gay daddy dating [#]

    adam4adam.com gay dating site https://gay-singles-dating.com/

  30. gay male dating service [#]

    one man gay dating site https://gaydatinglosangeles.com/

  31. HenryUnfiP [#]

    free gay dating in india
    top gay online dating sites
    gay young dating

  32. ivermectin pills for humans [#]

    Hi there, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of
    spam responses? If so how do you prevent it, any plugin or anything you
    can suggest? I get so much lately it’s driving me
    crazy so any help is very much appreciated. http://herreramedical.org/ivermectin

  33. zyrtec 10 mg pill images [#]

    purchase zyrtec – http://allergyd.com

  34. ivermectin australia [#]

    General Low-down Here this offshoot
    https://ivermectinstrom.com ivermectin for sale
    https://ivermectstromect.com can i buy ivermectin online
    https://stromectolivermect.com where to buy ivermectin
    https://stromectolivermect.com ivermectin human dosage
    https://ivermectinsts.com ivermectin for humans over the counter

  35. www.pharmaceptica.com [#]

    sildenafil 58 https://pharmaceptica.com/

  36. stromectolforte.com [#]

    side effects for ivermectin http://stromectolforte.com/# ivermectin generic how to buy ivermectin

  37. stromectolforte.com [#]

    ivermectin tablets for humans http://stromectolforte.com/ ivermectin dan lain-lain ivermectin for humans amazon

  38. roaccutane [#]

    accutane side effects accutune

  39. drineexmdo [#]

    how to get modafinil provigil pill

  40. bactrim side effects [#]

    trimethoprim for dogs bactrim drug class

  41. provigildrug [#]

    modafinil weight loss provigil for depression

  42. prednisolone [#]

    how much is a prednisone prescription prednisone over the counter

  43. isotretinoin [#]

    buy accutane roaccutane side effects

  44. provigilprice [#]

    modalert online modalert 200

  45. bactrim coverage [#]

    trimethoprim side effects https://bactrimsulfamethoxazole.com/

  46. treating heartworms with ivermectin [#]

    Having read this I thought it was very enlightening. I appreciate you spending some time
    and effort to put this information together.
    I once again find myself personally spending a significant amount of time
    both reading and leaving comments. But so what, it was still
    worth it! http://harmonyhomesltd.com/Ivermectinum-precautions.html

CSSLab