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.
Paragraph with a reading ruler
A band one line tall follows the pointer or arrow keys and dims the rest of the paragraph so you keep your place.
Settings
Code
<div class="uvq14-rul"><div class="hd"><h3>Read without losing your place</h3><button type="button" class="tg" aria-pressed="true">Reading ruler</button></div><div class="ar" tabindex="0" role="group" aria-label="Text with ruler: use the up and down arrows"><p>A reading ruler covers what you don't need and leaves a single line in view. It helps people who skip lines, people reading on a small screen and anyone who gets to the end of the day tired. Move the mouse, tap the text or use the arrow keys to go down line by line.</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
Reading rulers are a simple aid for people with dyslexia, attention difficulties or tired eyes: they keep one line in focus and soften everything else. This block measures the line height of the paragraph and snaps a tinted band to it, with blurred veils above and below. It suits long articles, documentation, learning platforms and accessibility settings panels.
Write the heading in the text field and any paragraph in the HTML; the ruler adapts to its lines. The main color draws the edges and the secondary one tints the band. A switch turns it off, and the arrow keys, Home and End move it line by line.