El truco que se necesita para crear columnas de texto similares a libros electrónicos

Hay algunos trucos CSS interesantes en las últimas noticias sobre fuentes y tipografía web de Jason Pamental. Jason quería incorporar columnas deslizables a su experiencia de libros digitales en dispositivos móviles. Lo que plantea de inmediato una pregunta interesante… ¿cómo se configuran columnas de ancho completo que agregan columnas horizontalmente, según sea necesario? Bueno, ese es un buen truco, y es de una sola línea:

columns: 100vw auto;

Pero a partir de ahí todo se vuelve más complicado y decepcionante.

Con sólo un poco más de formato en las columnas:

main {  columns: 100vw auto;  column-gap: 2rem;  overflow-x: auto;  height: calc(100vh - 2rem);  font: 120%/1.4 Georgia;}

Obtenemos esto:

¡Lo cual está tan cerca de ser perfecto!

Probablemente no aplicaríamos este efecto en el escritorio, pero bueno, para eso están las consultas de medios. En el móvil obtenemos…

Ese desplazamiento entrecortado hace que esta sea una mala experiencia. Podemos suavizar eso con -webkit-overflow-scrolling: touch;…

La suavidad tal vez sea mejor, pero el hecho de que las columnas no encajen en su lugar hace que la experiencia de lectura sea casi igual de mala. Para eso scroll-snapes, pero ay:

Desafortunadamente, resulta que necesitas un elemento a nivel de bloque al que puedas ajustar, y las columnas creadas artificialmente no cuentan como tales.

Ay nooooo. ¡Tan cerca! ¡Pero hasta ahora!

Si realmente queremos ajustar el desplazamiento, el contenido deberá estar en elementos a nivel de bloque (como div). Es bastante fácil configurar una fila horizontal de divelementos con flexbox como…

main {  display: flex;}main  div {  flex: 0 0 100vw;}

Pero… ¿cuántos divs necesitamos? ¡Quién sabe! Este es contenido arbitrario que podría cambiar. E incluso si lo supiéramos, ¿cómo haríamos fluir el contenido de forma natural entre los divs? Eso no es nada. Es por eso que apesta que las regiones CSS nunca hayan existido. Entonces, para hacer posible esta agradable experiencia de deslizar el dedo en CSS, necesitamos:

• Permitir que el ajuste de desplazamiento funcione en columnas
• Tener algún tipo de regiones CSS que sean capaces de generar automáticamente elementos repetidos a nivel de bloque según lo necesite el contenido.

Ninguna de las dos cosas es posible en este momento.

¡Jason no se detuvo ahí! Usó JavaScript para descubrir algo que no llega a ser un desplazamiento pesado. Primero, calcule cuántas “páginas” de ancho produce la técnica de columnas CSS. Luego, agrega spacer-divs al elemento de desplazamiento, cada uno del ancho de la página, y esas son las cosas a las que el elemento de desplazamiento puede desplazarse. Muy inteligente.

Por el momento, puedes experimentarlo en el sitio de libros activando una configuración opcional.