Cómo hacer un libro con tus mejores posts (I)

Print CSS

Si eres bloguero como nosotros  en más de una ocasión se te habrá pasado por la cabeza la idea de tener una versión en papel  de los artículos más interesantes de tu blog.  Cuando has probado a imprimir directamente con la opción de impresión del navegador…  casi seguro que el resultado no ha sido bueno: aparecen elementos que no tienen que ir impresos, el formato no es el que tú querías…

Existen soluciones de pago que te permiten imprimir un blog, como por ejemplo  Blog2Print o BlogBooker (esta última con una versión gratuita que no está nada mal) y también herramientas online conversoras de HTML a PDF.

Pero lo que te queremos contar hoy es más bien una aproximación casera tipo “hágalo Vd. mismo” 😉

Solo necesitas conocimientos básicos de CSS.

¿Sabías que CSS cuenta con un estándar específico para medios impresos? Pues sí, en la web de W3C podemos encontrar la especificación: CSS Paged Media Module Level 3. Esto y un conversor HTML > PDF es todo lo que vamos a necesitar.

Lo que queremos es imprimir en papel los posts de nuestro blog. Hacer un libro a partir del contenido del blog, vaya.

Para ello seguiremos este esquema:

  1. Aprenderemos un poco de CSS
  2. Crearemos un archivo CSS que dará formato “papel” a los posts del blog
  3. Utilizaremos una herramienta de conversión HTML+CSS >> PDF

Y opcionalmente,

  1. Incorporaremos los PDF obtenidos a Indesign
  2. Generaremos un PDF final para impresión

1. Un poco de CSS

¿Qué es esto del CSS Paged Media?

Pues es la forma que tiene CSS de definir documentos que se presentan como una sucesión de páginas a diferencia de los documentos mostrados en pantalla, que suelen mostrarse como un flujo continuo.

CSS dispone de varias reglas y una serie de atributos específicos para definir las características de una página como el tamaño o los márgenes, así como aspectos de la maquetación clásica de publicaciones  como la numeración y los saltos de página, las viudas y huérfanas, etc.

Empecemos por el principio. Para definir las características de una página, CSS utiliza la regla @page:

@page {
 }

Las especificaciones de nuestra página serán propiedades CSS. Las propiedades más importantes de @page son “size” y “margin”:

@page {
   size: 20cm 28cm;  /* Generamos una página de 20 x 28 cm (ancho x alto) */
   margin: 1cm;  /* Los márgenes de la página serán todos de 1 cm */
}

En el ejemplo anterior tenemos una página de 20×28 cm con márgenes de 1 cm en los 4 lados, por lo que el área efectiva en la que podremos añadir contenido es de 18×27 cm.

Además,  indicando :left o :right podemos distinguir entre páginas pares e impares y asignar márgenes diferentes según corresponda:

@page :left {
    margin-left: 3cm;
    margin-right: 4cm;
 }
@page :right {
    margin-left: 4cm;
    margin-right: 3cm;
 }

Bien pero, ¿qué pasa si queremos añadir elementos que no sean estrictamente el contenido de la página, como encabezados, pies de página, números de página, etc? Para hacerlo, antes tenemos que entender un poco el modelo de cajas de CSS.

El modelo de cajas de CSS

En CSS, cada elemento puede representarse como una sucesión de cajas anidadas: la caja interior es el contenido en sí, la siguiente corresponde al padding (espacio alrededor del contenido), a continuación el border (marco o línea visible) y finalmente el margin (espacio que separa un elemento del anterior y del siguiente:

El modelo de cajas de CSS para medios paginados

Es una adaptación del anterior. En este caso al contenido se le llama “page area”, pero tiene igualmente su padding, border y margin. Al conjunto se le da el nombre de “page box”:

¿Y para qué necesito saber esto? te preguntarás. Bueno, pues resulta que para añadir todos los elementos que comentábamos (números de página, etc), se trabaja siempre dentro del área “page margin” del modelo. La norma define una serie de zonas en esta franja, en las que podremos añadir el contenido que deseemos. En la siguiente imagen, tomada de la especificación, podemos ver los nombres y la ubicación de cada una de estas áreas (o “page-margin boxes”, como les llaman):

Margin Boxes CSS

Ahora sólo nos falta saber cómo utilizarlas. Es sencillo: cada zona dispone de su propia regla. Por ejemplo, si queremos  escribir algo como encabezado y que aparezca centrado, usaremos:

@top-center {
 }

Y si queremos escribir en la esquina inferior derecha:

@bottom-right-corner {
 }

El contenido que queramos añadir a la zona en cuestión irá a continuación del atributo “content”.

Veamos un ejemplo de página que incluye texto en el encabezado, centrado y el número de página en el pie: a la izquierda en las páginas pares y a la derecha en las impares.

@page {
    size: A4;
    margin: 2cm;
    @top-center {
          content: "Aquí va el texto de encabezado";
    }
 }
@page:right{
    @bottom-right {
          content: counter(page);
    }
 }
@page:left{
    @bottom-left {
          content: counter(page);
    }
 }

Comentarios:

  • Como tamaño hemos indicado “A4”… sí, CSS reconoce los tamaños DIN sin necesidad de indicar las medidas J.
  • Si os fijáis, las reglas @top-center, @bottom-center, @bottom-right, etc. están DENTRO de las llaves de la regla @page a la que pertenecen.
  • Para mostrar el número de página hemos utilizado otra característica de CSS Paged Media: los contadores. En este caso es un contador predefinido (el número de página: counter(page)), pero es posible definir contadores personalizados (para contar tablas, o imágenes, o lo que sea).

Y hasta aquí esta pequeña introducción sobre cómo dar formato de página “física” a una página web. Sí, sí, ya sé que ha quedado muy teórico pero no os preocupéis: en el próximo post veremos cómo aplicar todo esto en un artículo de un blog y cómo obtener un PDF con aspecto similar al de la maquetación de un libro.

Summary
Cómo hacer un libro con tus mejores posts (I)
Article Name
Cómo hacer un libro con tus mejores posts (I)
Description
Si eres bloguero, se te habrá pasado por la cabeza alguna vez la idea de tener una versión en papel  de los artículos más interesantes de tu blog....
Author
Desfaziendo Entuertos
Cómo hacer un libro con tus mejores posts (I)

Deja un comentario

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