El CSS Rhythmic Sizing Module Level 1 es una especificación W3C desarrollada por Koji Ishii que introduce propiedades CSS para controlar las dimensiones de los elementos sean múltiplos de una unidad de paso definidas. En esencia, permite establecer un «ritmo» visual en el diseño, haciendo que las alturas de cajas de bloque y de línea se alineen a intervalos regulares. La importancia de esta especificación radica en resolver un problema clásico del diseño web: mantener consistencia vertical cuando contenido de diferentes tamaños interrumpe un texto continuo, como encabezados, imágenes o ilustraciones. Sin estas propiedades, el ritmo visual se pierde y la legibilidad disminuye. Al usar block-step-size y block-step, los elementos pueden ajustarse automáticamente para ser múltiplos del paso definido, manteniendo la alineación a través de columnas, páginas o bloques con scroll. El documento también aborda el concepto de «ritmo vertical casual del Asia Oriental», una variante tradicionalmente usada en Japón, Corea y China. Originalmente surgió de limitaciones técnicas de procesadores de texto de los años 80, pero se mantuvo por preferencia estética. A diferencia del ritmo vertical estricto, esta variante permite que márgenes y bordes desplacen el ritmo en lugar de forzar saltos abruptos, ofreciendo mayor flexibilidad para autores no profesionales. Las propiedades principales incluyen: block-step-size (define la longitud del paso), block-step (controla cómo las cajas se ajustan al ritmo) y line-height-step (ajusta alturas de línea). Los valores pueden especificarse en píxeles, ems u otras unidades CSS. Los casos de uso incluyen: diseño editorial y publicación digital, blogs donde la consistencia visual es importante, interfaces con mucho texto y proyectos que requieren alineación precisa a través de múltiples elementos. Como consideración importante, esta versión inicial solo aplica a cajas de nivel de bloque, aunque se espera expansión futura. Además, requiere implementaciones de navegadores y puede necesitar soporte de CSS Grid o Flexbox para funcionalidad completa.
W3C aprueba nuevo módulo CSS para ritmo visual en diseño web
Fuentes:
CSS Rhythmic Sizing Module Level 1
