Los elementos del estilo digital (1): Citar poesía

En Los elementos del estilo tipográfico, Robert Bringhurst sugiere una buena práctica para diagramar versos dentro de un texto, ya sea citados o como parte de la narración:

Generalmente, la poesía se compone en bandera derecha, y las citas en verso dentro de la prosa no deberían carecer de esa disposición. Pero para distinguir una cita en verso de la prosa que la rodea, debería tener espacio a la izquierda o estar centrada con respecto a su verso más largo. El centrado es preferible cuando el ancho de la columna de la prosa es sustancialmente más largo que los versos.¹

Este recurso es cada vez más raro, tanto en libros impresos como digitales, asumo que porque Indesign no hace que este proceso sea intuitivo (si bien en realidad no es tan difícil). Lo usual hoy es tirar los versos «a la izquierda», como si fuera una cita normal, lo que —dependiendo de la pantalla, por supuesto— deja mucho más espacio a la derecha y el poema desalineado (voy a aplicar el mismo ejemplo que usa Bringhurst, Oda a la tipografía, de Pablo Neruda):

Debajo,

de las nuevas pirámides escritas

la letra

estaba viva,

el alfabeto ardiendo,

las vocales,

las consonantes como

flores curvas

Por suerte, cuando diagramamos para texto fijo (impreso o PDF), podemos darnos el tiempo de centrar cada poema por separado hasta dejarlo dejarlo como queremos. Pero esto no es posible en la diagramación de texto fluido, en la que no sabemos el tamaño de la caja-pantalla, sea un monitor, una tablet, un celular, un ereader o, quién sabe, puede que hasta un reloj inteligente o algo que ni siquiera se inventa todavía.

Una solución que podríamos intentar —y que lamentablemente algunos sitios web y libros digitales practican— es centrar el texto, lo que por supuesto se ve horrible:

Debajo,

de las nuevas pirámides escritas

la letra

estaba viva,

el alfabeto ardiendo,

las vocales,

las consonantes como

flores curvas

Entonces, ¿cómo podemos armar un diseño para poesía que siga la recomendación de Bringhurst en un entorno de texto fluido como el del libro digital EPUB (es decir, usando solo HTML y CSS)?

La respuesta común es usar contenedores <div>, pero esto tiene algunos problemas: i) en algunas apps y dispositivos más antiguos este contenedor no se corta bien entre páginas, por lo que los versos pueden terminar «despareciendo» en los márgenes superiores e inferiores; ii) más importante aún, esto de plano no funciona en dispositivos Kindle, que ignoran los contenedores y dejan el poema alineado a la izquierda, como si no existieran. Y como yo prefiero crear archivos que sean compatibles con la mayor cantidad de dispositivos posibles (incluso después de la conversión a Kindle), tengo que buscar otra alternativa.

La única solución que funciona bien en todos los entornos en que he probado hasta ahora consiste en usar una «tabla escondida» de una sola celda, que envuelve los versos como una unidad y permite centrarlos todos a partir del verso más largo:

Debajo, de las nuevas pirámides escritas la letra estaba viva, el alfabeto ardiendo, las vocales, las consonantes como flores curvas

Si destacamos los elementos que componen este bloque, queda clara la estructura:

Debajo, de las nuevas pirámides escritas la letra estaba viva, el alfabeto ardiendo, las vocales, las consonantes como flores curvas

En rojo vemos el borde de la tabla, que envuelve el poema alrededor de su línea más larga, mientras que en cian tenemos los márgenes laterales, que centran la tabla. Todo esto envuelto en un bloque de cita —que yo marco con su propia clase, en caso de que quiera modificarlo o identificar todos los similares a futuro—, que le da el tamaño del texto más pequeño y los márgenes superior e inferior. El HTML se ve así:

<blockquote class="poetry-quote">
  <table class="poetry">
    <tbody>
      <tr>
        <td>
         <p class="poetry-verse">Debajo,</p>
          <p class="poetry-verse">de las nuevas pirámides escritas</p>
          <p class="poetry-verse">la letra</p>
          <p class="poetry-verse">estaba viva,</p>
          <p class="poetry-verse">el alfabeto ardiendo,</p>
          <p class="poetry-verse">las vocales,</p>
          <p class="poetry-verse">las consonantes como</p>
          <p class="poetry-verse">flores curvas</p>
        </td>
      </tr>
    </tbody>
  </table>
</blockquote>

Nótese que dentro de la tabla <table>, por necesidad debe estar al menos el cuerpo <body>, una fila <tr> y una celda <td>. Finalmente, cada verso se encuentra en su propio párrafo en una clase especial (en este caso, poetry verse), que define la alineación izquierda y una sangría francesa, de modo que las líneas siguientes del verso aparezcan más adelante si superan la caja (más sobre esto en una próxima entrada, espero).

Las partes importantes del CSS para todos estos elementos es el siguiente:

/* --- Poesía --- */
.poetry-quote { /* Solo dejo la clase para citas de poesía, en caso de querer cambiarlo en el futuro, pero ahora no tiene nada de especial */
}

table.poetry {
  border:0; /* Hace que la tabla sea transparente */
  margin: 0 auto; /* 'auto' hace que los márgenes laterales se ajusten al tamaño de la caja */
}

.poetry-verse { /* Hace que el párrafo continúe más adelante cuando el verso supere el tamaño de la caja */
  margin-left:2.4em;
  text-indent:-2.4em;
  text-align:left;
}

Otra ventaja de acostumbrarse a usar tablas para armar poesía es que más tarde resultarán útiles para versos mucho más complejos, que escapan de la línea tradicional y ocupan el espacio de maneras especiales. Planeo escribir un poco más sobre estos formatos más complejos en el futuro, como la poesía o el teatro, porque encuentro que hay muy poco material claro y ordenado al respecto, y menos en español. Es interesante ver qué soluciones se pueden encontrar para tratar de llevar un poco la tradición del papel al mundo digital.