Autor: csr

(De vez en cuando uno se encuentra con algo que apenas conoce, se pone a profundizar y no encuentra un recurso en dos segundos en Google que resuma de manera efectiva y eficiente lo que hay que saber sobre el tema. Seguramente porque no he buscado bien, pero ese ha sido el caso después de leer 6 Things I Learned About Print Stylesheets From HTML5 Boilerplate. Por tanto, dejo mi resumen aquí.)

Uno de los puntos en los que casi nunca pensamos cuando hacemos el CSS de una página es el de los estilos para impresión. Es posible que en un futuro cercano, de dispositivos móviles ubicuos y acceso a internet bueno-bonito-y-barato (podemos soñar, ¿no? :-P) dejemos de imprimir páginas web, pero hasta que eso llegue de-verdad-de-la-buena, pasa con frecuencia que imprimimos páginas web con resultados que dejan bastante que desear. No hablaré ahora de @media, sino de cinco propiedades CSS (CSS2, además, especificadas aquí) que, me da la impresión, son unas grades desconocidas y nos permiten mejorar algunas cosas sin mucho esfuerzo.

Las tres primeras de dichas propiedades son page-break-before, page-break-after y page-break-inside que, como su propio nombre indica, impiden saltos de página antes, después o dentro del elemento HTML que especifiquemos, respectivamente. Así, por ejemplo, podríamos usar h2 { page-break-after: avoid; } para evitar que un título de segundo nivel fuese lo último impreso en una página, cosa que lo separaría del párrafo que siempre viene a continuación en nuestro diseño, si fuera el caso. O, en caso que usemos títulos de tercer nivel muy largos, también nos podría interesar h3 { page-break-inside: avoid; }. Los valores permitidos para estas tres propiedades son auto, always (útil para elementos que queremos como final de página), avoid, inherit y left o right, que fuerzan uno o dos saltos de página antes o después del elemento, de forma que la siguiente página sea par (left) o impar (right).

Las otras dos propiedades son orphans y widows que, respectivamente controlan la aparición de huérfanos y viudas en el texto impreso (un huérfano es una línea que se queda sola al inicio de una página, mientras que una viuda es una línea que se queda sola al final). Por ejemplo, p { orphans: 3; widows: 3; } indica al navegador que debe hacer todo lo posible para que un párrafo no tenga menos de tres líneas ‘colgadas’ al inicio o final de una página.

¿Y el soporte de los navegadores? Uno esperaría que algo que es parte de CSS2 ya sería universal desde hace eones. Casi. Según la wikipedia, quedan los siguientes problemas:

• Firefox y los navegadores Webkit (esto es Chrome y Safari), para page-break-before y page-break-after, sólo soportan los valores always y auto. No servirán de nada, por tanto, avoid, inherit y left o right. A ver si algún día implementan, al menos, avoid. Sirva como acicate el recordatorio de que que Internet Explorer lo tiene desde la 4.0 (allá por el jurásico superior) y que Opera lo tiene también desde hace unos cuantos eones.
• Firefox, además, no implementa ni page-break-inside ni widows ni orphans :-(.

Aún a pesar de la falta de soporte de algunos de los navegadores más populares, no deja de ser un detalle tener en cuenta el CSS para paginación para los usuarios que disfrutan de navegadores más conscientes de la importancia de la impresión, especialmente en sitios en que anticipamos que los usuarios se van a llevar el contenido con ellos en papel.

Yapordiós. Es publicar la entrada y aparecer How To Set Up A Print Style Sheet…