Diálogos de whatsapp en eBook

Tutorial de cómo hacer el efecto de diálogos de whatsapp en un ePub y que sea compatible con Kindle.

Un amigo escritor de ciencia ficción me preguntó si se podría escribir un díálogo tipo whatsapp en un eBook. No me lo pensé mucho y dije que sí. Siempre puedes hacer una imagen con ese diálogo que se muestre en el libro electrónico, pero es un poco chapuza, ya que la imagen nunca se cortará entre páginas, etc… Y me puse a pensar como lo haría yo con estilos CSS en Sigil.

Mi primera aproximación fue un desastre y, aunque en tablets y otros dispositivos funcionaba bien, el kindle lo dejaba cuajado, y es que ya sabemos que es muy especialito con las cosas que puede y no puede hacer.

Así que busqué otra estrategia que fuera compatible con dispositivos a color y con el kindle, y que además se leyera bien si se invertían los colores.

A la inzquierda muestra como se vería este diálogo en un tablet y a la derecha el mismo diálogo en un kindle

La maquetación XHTML

En el archivo XHTML que se corresponde al capítulo donde queremos añadir el diálogo abrimos un bloque div con estilo mensajeria y dentro anidamos los bloques según correspondan a la izquierda o derecha aplicándoles estilos l o r según corresponda.

<div class=”mensajeria”>
<div class=”l”>Hola, ¿Qué tal estás?</div>
<div class=”r”>Hombreeee… ¡Cuánto tiempo! Hacía un montón que no hablábamos. Ahora mi pillas un poco mal. ¿Hablamos luego?</div>
<div class=”l”>Me parece genial. Ahora salgo del gym. Me ducho y yo creo que para las 20:30 estaré libre.</div>
<div class=”r”>OK. Luego te llamo. Un abrazo</div>
</div>

Los estilos CSS

La magia es dotar de estilos a esos bloques.

.mensajeria{
display: block;
width:100%;
margin-top: 1em;
margin-bottom: 1em;
font-family : sans-serif;
font-size: 0.875em;
}

• display:block; es para que sea tratado como una caja, todo en un bloque.

• width:100%; para que la caja ocupe todo el ancho

• margin-top y margin-bottom; para separar por arriba y abajo 1em;

• font-family: sans-serif; porque el texto de whatsapp es una tipografía sin pie

• font-size:0.875em; para hacer la letra un pelín más pequeña.

Si no sabes qué es 1 em no te preocupes. Quédate con que es una medida relativa que hace referencia a la altura de la letra m minúscula y se usa mucho para maquetar. Cuando aumentas el tamaño de la letra en tu dispositivo, todo aumenta en proporción. Si hubiéramos elegido píxeles o puntos la medida habría sido absoluta, y aunque aumentáramos el tamaño de letra, el resto no había aumentado.

.mensajeria > div {
display: block;
border-radius: 0.5em;
text-indent: 0;
text-align: start;
padding: 0.5em 0.5em 0.5em 0.5em;
}

.mensajeria > div.l {
margin: 0.25em 33% 0.25em 0;
background-color: #f4f4f4;
}

.mensajeria > div.r {
margin: 0.25em 0 0.25em 33%;
background-color: #D2FFCA;
}

• border-radius: 0.5em; que tenga las esquinas redondeadas.

• text-indent:0; para que no indente el texto, para que no deje sangría

• text-align: start; alineado al comienzo, a la izquierda;

• padding; deja 0.5em dentro de la caja por arriba, derecha, abajo e izquierda (en el sentido del reloj)

En el que está alineado a la izquierda:

• margin: dejamos margen por fuera de la caja por arriba 0.25em, a la derecha el 33% del espacio, abajo 0.25em y a la izquierda 0em;

• backgroud-color: #F4F4F4; es un gris muy tenue en color RGB

En el que está alineado a la derecha:

• margin: dejamos margen por fuera de la caja por arriba 0.25em, a la derecha el 0 de espacio, abajo 0.25em y a la izquierda el 33%

• backgroud-color: #D2FFCA; es el verde pálido de whastapp en color RGB

Plantilla ePub

Para que no tengáis que copiar y pegar de este artículo he actualizado la plantilla de ePub que ya he compartido en otras ocasiones.