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. Pronunciacion de canciones

¡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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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

programar

es

https://pseint.es/static/images/programar-el-truco-que-se-necesita-para-crear-columnas-de-texto-similares-a-libros-electronicos-1531-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences