Cuando escribí el “libro” The Greatest CSS Tricks Vol. Yo, puse “libro” entre comillas porque no había nada terriblemente parecido a un libro en él. La única forma en que podía leerlo era en línea, iniciando sesión en este sitio web, con una membresía de partidario de MVP. Sin versión impresa, ni siquiera copias digitales que podría esperar de un libro digital.
He cambiado eso ahora y ofrezco versiones PDF y EPUB del libro. Son descargas gratuitas para los miembros; solo agréguelas a su carrito y realice el pago.
Todo esto de escribir libros fue y es un experimento. Me gusta escribir en este sitio web en un formato similar a una publicación de blog donde todo el contenido está en URL y puede tener contenido interactivo. Siendo digital, puedo controlar el acceso y tal. Significa que puedo escribir de una manera que me resulte cómoda, y tal vez, solo tal vez, pueda ser más prolífico al respecto. Quizás pueda conseguir un Vol. Ya hice eso, ya tengo un montón de ideas. Quizás pueda escribir algunos otros libros en los que he estado pensando. ¡Ahora tengo un sistema! Un lugar para escribir, varios lugares para publicar y una forma de venderlo.
Coge el Vol. 1 eBook
Produciendo las versiones digitales
Cuando originalmente tomé la decisión de escribir el libro en línea, pensé que PDF sería increíblemente simple. Generaría el contenido en una plantilla “sin procesar” (solo como un punto de partida limpio que durará y es fácil de obtener una vista previa), aplicaría un buen CSS similar a la impresión, luego literalmente, solo ⌘P (Imprimir) y “Guardar como PDF”. Hecho.
Eso realmente funciona. Puede jugar con la configuración (por ejemplo, “✔ Imprimir gráficos de fondo” para tener texto blanco sobre un fondo oscuro en cosas como bloques de código) y obtenerlo bastante bien. Pero hay problemas, como que no puede controlar muy bien el encabezado o pie de página de cada página. Sin mencionar que no es programático, sino un proceso muy manual.
Hacer las cosas de manera programática es lo que estaba buscando. Luego me encontré con esta publicación de blog de Baldur Bjarnason en la que estaba buscando trabajo:
• ¿Necesita crear un sitio o sitios que anden como un libro, hablen como un libro y se lean como un libro, pero todo lo que crea parezca un blog?
• ¿Tiene problemas para manejar formatos de archivo como PDF, DOCX o EPUB usando tecnología web?
• ¿Está intentando producir archivos PDF o libros electrónicos desde su sitio web o su CMS?
Sí Sí, sí!
Creación de un libro electrónico de forma programada
Me acerqué a Baldur y él pudo ayudarme a trabajar en todo esto. Creó un sistema automatizado para mí que acepta un local .html archivo y produce automáticamente formatos PDF, EPUB y MOBI a partir de ese único archivo. Esencialmente, puedo correr make desde la línea de comandos y hará todo el trabajo, aprovechando las herramientas de código abierto.
Sin embargo, todavía necesitaba HTML casi perfecto listo para la máquina, lo que requirió algo de trabajo. Afortunadamente, ya estaba algo listo para producir esto, ya que tengo una URL especial que genera el contenido sin procesar (aún puede ver esto si no es miembro, solo con contenido truncado) con los estilos de impresión claros que quería.
Las herramientas
Con el HTML sin procesar y un enfoque programático en la mano, estas son las herramientas que componen la pila:
- Para la creación de PDF, Probamos tanto Paged.js como WeasyPrint. Ambos tenían sus peculiaridades e hicieron las cosas peor / mejor que el otro. Finalmente aterrizamos en Paged.js.
- Para la creación de EPUB, usamos pandoc.
- Para la creación de MOBI (en lo que no nos enfocamos en absoluto), usamos Calibre. Es una aplicación nativa de Mac, pero tiene una
ebook-convertherramienta enterrada en ella que se puede llamar desde la línea de comando.
Para llegar al punto en el que podamos usar estas herramientas a través de la línea de comandos, todo tipo de software debe estar instalado y listo para usar, como Python, pango, libffi y más. El guión de Baldur facilitó la gestión, lo cual fue increíble.
Parece que hay un nuevo jugador en el bloque llamado Percollate) para estas cosas, pero no lo exploramos.
Un repositorio público que combina todas estas herramientas para la creación de HTML a libro electrónico
Después de superar este proceso juntos, Baldur generosamente creó un repositorio público reducido de código abierto (trucos de libros) para todos ustedes como referencia. Hay mucha magia útil en este Makefile que me sorprendería si no fuera útil para alguien en la misma posición en la que yo estaba: la necesidad de crear libros electrónicos a partir de HTML simple.
Vista previa de compilaciones
Los PDF son fáciles de ver, por supuesto (incluso puede usar un navegador web), pero generalmente los abrí en Preview.app.
EPUB es igualmente fácil en una Mac porque puede abrirlo en Books.app para verlo.
Para MOBI, la función principal de Calibre es verlos, así que ese es el truco ahí:
La parte más dolorosa es el circuito de retroalimentación. Hay un proceso completo de actualización de código (principalmente CSS) y luego ejecutar toda la compilación para ver cómo se ve todo. Estoy seguro de que lo hice 100 o más veces para hacer las cosas bien. Realmente debería haber una mejor historia para esto, con vistas previas en vivo.
Contenido solo web frente a contenido solo de libros electrónicos
Al principio del proceso de redacción del libro, había renunciado tanto a la versión impresa como a la digital. Dejé de apoyarme tanto en las imágenes en el texto y comencé a usar demostraciones de CodePen incrustadas para mostrar la salida y el código. De todos modos, esa es la experiencia ideal para la web. Pero no puedo usar bolígrafos incrustados en libros electrónicos. Los libros electrónicos pueden hacer algunas cosas interactivas (por ejemplo, EPUB admite GIF animados y enlaces, por supuesto), pero ejecutan JavaScript y usan <iframe>s son cosas con las que no quería contar. Si tuviera imágenes adecuadas para todo, entonces tal vez esté más listo para el papel algún día de todos modos.
Es bastante fácil ocultar cosas de la salida del libro electrónico con display: none, así que eso es lo que hice con todos los bolígrafos integrados. (Son un poco de HTML antes de que se transformen en el iframe). Luego, para tener contenido “alternativo” que sea solo para la versión del libro electrónico, básicamente lo envolví en <div class="print-only"> que está oculto en línea y se muestra en el CSS impreso. Hice bloques personalizados en el editor de bloques de WordPress para facilitar la creación de esos bloques. De esa manera, realmente pude ver lo que estaba haciendo.
Un dato interesante es que debido a que estaba buscando solo libros electrónicos aquí, no tuve que hacer el tipo de trucos CSS al que estoy acostumbrado para cosas como imprimir hojas de estilo donde la salida es probablemente papel de computadora. Por ejemplo, en una hoja de estilo de impresión, probablemente haría:
main a[href]::after {
content: " (" attr(href) ") ";
}De esa forma, las personas pueden ver las URL de los enlaces en el contenido. Pero con estos libros electrónicos digitales, solo me aseguro de que los enlaces sean azules y de que se pueda hacer clic en cualquiera de los formatos digitales.
¡Fue un viaje divertido! En general, estoy emocionado de haber subido un poco en la escalera de la comprensión de todo esto, especialmente porque renderizar cosas en lienzos digitales es algo así como mi puente de mando. Sin embargo, solo he subido un par de peldaños, ¡ya que estas cosas tienen una curva de aprendizaje bastante empinada!
Coge el Vol. 1 eBook