epub-js: Llevando tus eBooks EPUB al Navegador con Facilidad y Control

En la era digital, la forma en que consumimos contenido está en constante evolución. Los libros electrónicos, o eBooks, se han convertido en una parte esencial de nuestra biblioteca personal, y el formato EPUB es uno de los más extendidos y versátiles. Pero, ¿qué pasaría si pudieras renderizar y gestionar estos eBooks directamente en tu navegador, sin necesidad de aplicaciones o plugins dedicados? Aquí es donde entra en juego la librería epub-js.

¿Qué es epub-js?

epub-js es una librería JavaScript de código abierto diseñada específicamente para renderizar documentos EPUB en el navegador, siendo compatible con una amplia gama de dispositivos. En esencia, proporciona una interfaz completa para las características comunes de los libros electrónicos, como el renderizado, la persistencia y la paginación, eliminando la necesidad de desarrollar una aplicación o un plugin específico. Además, algunos de sus componentes pueden utilizarse en proyectos CommonJS en el servidor.

Esta versión particular, intity/epub-js, es un fork de la librería original futurepress/epub.js. La razón principal de su creación fue abordar los problemas de una API obsoleta. Sin embargo, tras un examen más profundo, se descubrieron y abordaron problemas arquitectónicos relacionados con la reconstrucción dinámica del diseño, lo que llevó a una reelaboración significativa de la arquitectura de la librería.

¿Por qué EPUB?

El estándar EPUB es un formato ampliamente utilizado y fácilmente convertible. Muchos libros están disponibles en este formato, y puede convertirse a otros como PDF, Mobi o iBooks.

Un EPUB3 descomprimido es, en realidad, una colección de archivos HTML5, CSS, imágenes y otros medios, muy similar a cualquier sitio web. La diferencia clave radica en que el estándar EPUB impone un esquema para los componentes del libro, lo que permite renderizar un libro y sus partes basándose en un vocabulario controlado. Específicamente, estandariza la tabla de contenidos, proporciona un manifiesto que facilita el almacenamiento en caché de todo el libro y separa el almacenamiento del contenido de cómo se muestra.

Objetivos de Desarrollo y Características Clave

La nueva etapa de desarrollo de epub-js se centra en una mayor calidad de optimización y pruebas de API. Uno de sus objetivos es alcanzar el límite de optimización mediante pruebas unitarias, así como desarrollar un esquema que permita configurar los componentes de la librería en la etapa de construcción, excluyendo el código no utilizado. También se busca mejorar la documentación para facilitar a la comunidad el aprendizaje de la API.

Algunas de sus características más destacadas incluyen:

Renderizado Eficiente: Capacidad de mostrar eBooks EPUB directamente en cualquier navegador.
Flexibilidad de Configuración: Ofrece diversas opciones para personalizar la experiencia de lectura.

Empezando con epub-js

Para integrar epub-js en tu proyecto, primero debes incluir jszip.min.js si trabajas con archivos .epub archivados, y luego epub.min.js. A continuación, puedes establecer un elemento div para renderizar el libro:

<script src="../dist/jszip.min.js"></script>
<script src="../dist/epub.min.js"></script>
<div id="viewport"></div>
<script>
  const book = ePub("uri/to/book.epub");
  const rend = book.renderTo("viewport", { width: 600, height: 400 });
  rend.display().then((section) => {
    console.log(section);
  });
</script>

Gestores de Renderizado

epub-js ofrece dos gestores de renderizado que definen la clase base de generación de contenido:

default: Este gestor renderiza una sección a la vez, utilizando recursos mínimos del dispositivo. Es ideal para dispositivos donde la navegación se controla principalmente con teclado o ratón.
```
book.renderTo("viewport", { manager: "default" });
```

continuous: Crea un flujo continuo de área desplazable compuesta por un conjunto de secciones. Es especialmente adecuado para dispositivos móviles.
```
book.renderTo("viewport", { manager: "continuous" });
```

Propiedades de Flujo (Flow)

La propiedad flow determina cómo se reorganizan las páginas. La librería ofrece tres tipos:

paginated (predeterminado): Reorganiza el contenido del documento en columnas, donde cada columna representa una página que se mueve horizontalmente. El mecanismo de desplazamiento horizontal está oculto al usuario, mostrando solo un cambio rápido de marcos.
```
book.renderTo("viewport", { flow: "paginated" });
```

scrolled: Define un método para reorganizar el contenido del documento a lo largo del ancho del contenedor viewport, con el área de desplazamiento vertical oculta.
```
book.renderTo("viewport", { flow: "scrolled" });
```

scrolled-doc: Una extensión del tipo scrolled, que facilita la personalización del diseño de las páginas dentro de los límites definidos por la propiedad pageWidth.
```
book.renderTo("viewport", { flow: "scrolled-doc", pageWidth: 800 });
```

Scripts Incrustados y Hooks

Por motivos de seguridad, el contenido con scripts (JavaScript incrustado) está deshabilitado por defecto debido al riesgo de ejecución de código malicioso. Sin embargo, puedes configurar los permisos del sandbox en la configuración de renderizado si es necesario, como por ejemplo allow-same-origin y allow-scripts. Se recomienda limpiar el contenido EPUB en el lado del servidor.

epub-js también implementa Hooks, que funcionan de manera similar a los plugins. Estos permiten "engancharse" a eventos y manipular el contenido del libro. Por ejemplo, puedes usar hooks para cargar videos de YouTube antes de mostrar un capítulo o implementar funcionalidades de anotación.

rendition.hooks.content.register((contents, view) => {
  const items = contents.document.querySelectorAll("[video]");
  items.forEach((item) => {
    // hacer algo con el elemento de video
  });
});

Desarrollo y Comunidad

La librería utiliza el framework Mocha para pruebas unitarias, que se ejecutan en la consola del navegador. Las compilaciones se concadenan y minifican utilizando webpack y babel. La documentación completa está disponible en epub-js/docs/, y los ejemplos se encuentran en la subsección epub-js/examples del repositorio. La librería está escrita principalmente en JavaScript (73.9%), HTML (23.6%) y CSS (2.5%), y tiene una licencia BSD-2-Clause.

Conclusión

epub-js se posiciona como una herramienta potente y flexible para desarrolladores que buscan integrar la lectura de eBooks EPUB directamente en sus aplicaciones web. Con su arquitectura mejorada, opciones de configuración detalladas y un enfoque continuo en la optimización, ofrece una solución robusta para una experiencia de lectura enriquecida en el navegador. Si trabajas con contenido digital y buscas una forma innovadora de presentarlo, epub-js merece definitivamente tu atención.

El blog de Naiel

Buscar este blog