Leer sin perderse
Una regla de lectura tapa lo que sobra y deja a la vista una sola línea. Ayuda a quien se salta renglones, a quien lee en una pantalla pequeña y a cualquiera que llegue cansado al final del día. Mueve el ratón, toca el texto o usa las flechas para bajar línea a línea.
Párrafo con regla de lectura
Una banda del alto de una línea sigue al cursor o las flechas y atenúa el resto para no perder el renglón.
Ajustes
Código
<div class="uvq14-rul"><div class="hd"><h3>Leer sin perderse</h3><button type="button" class="tg" aria-pressed="true">Regla de lectura</button></div><div class="ar" tabindex="0" role="group" aria-label="Texto con regla: usa las flechas arriba y abajo"><p>Una regla de lectura tapa lo que sobra y deja a la vista una sola línea. Ayuda a quien se salta renglones, a quien lee en una pantalla pequeña y a cualquiera que llegue cansado al final del día. Mueve el ratón, toca el texto o usa las flechas para bajar línea a línea.</p><i class="bd" aria-hidden="true"></i><i class="ov a" aria-hidden="true"></i><i class="ov b" aria-hidden="true"></i></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Las reglas de lectura son una ayuda sencilla para personas con dislexia, problemas de atención o la vista cansada: mantienen una línea enfocada y suavizan todo lo demás. Este bloque mide la altura de línea del párrafo y ajusta a ella una banda de color, con velos difuminados arriba y abajo. Encaja en artículos largos, documentación, plataformas de formación y paneles de ajustes de accesibilidad.
Escribe el título en el campo de texto y cualquier párrafo en el HTML; la regla se adapta a sus líneas. El color principal dibuja los bordes y el secundario tiñe la banda. Un interruptor la apaga, y las flechas, Inicio y Fin la mueven línea a línea.