Dyslexia-Friendly Reading Mode — Free Accessible Text Toggle

<div class="demo-wrap" id="demoWrap">
  <div class="toolbar">
    <button class="mode-btn" id="modeBtn" aria-pressed="false">
      <span aria-hidden="true">&#128214;</span> Reading mode
    </button>
    <label class="ruler-toggle">
      <input type="checkbox" id="rulerCheck">
      Reading ruler
    </label>
  </div>

  <article class="reading-card">
    <h2>Why Maps Lie a Little</h2>
    <p>Every map is a small act of persuasion. Flatten a round planet onto a rectangle and something always has to give: distance, direction, or the true size of a continent. Cartographers choose their compromise on purpose, and that choice quietly shapes how we picture the world before we ever leave the room.</p>
    <p>Mercator's projection, drawn in 1569 for sailors who needed straight compass lines, made Greenland look roughly the size of Africa. In reality Africa is about fourteen times larger. The distortion wasn't a mistake. It was the price of a map that ships could actually steer by, and centuries later it still hangs on classroom walls, quietly rearranging how big the world's continents feel.</p>
  </article>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body{font-family: system-ui, -apple-system, sans-serif; background: #fbf9f4; color: #2b2820; min-height: 100vh; cursor: default;display:flex;align-items:center;justify-content:center}

.demo-wrap { max-width: 600px; margin: 0 auto; padding: 40px 22px 60px; position: relative; }

.toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.mode-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  background: #1f6f5c; color: #fff; border: none; padding: 10px 16px;
  border-radius: 10px; cursor: pointer;
}
.mode-btn:hover { background: #185a4a; }
.mode-btn:focus-visible { outline: 3px solid #185a4a; outline-offset: 3px; }
.mode-btn[aria-pressed="true"] { background: #123f34; }

.ruler-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #5c5644; font-weight: 600; cursor: pointer; }
.ruler-toggle input { accent-color: #1f6f5c; width: 16px; height: 16px; }

.reading-card {
  background: #fffef9; border: 1px solid #e9e3d2; border-radius: 16px;
  padding: 30px 28px; box-shadow: 0 8px 26px rgba(60,50,20,0.05);
  transition: font-family 0.2s, letter-spacing 0.2s, line-height 0.2s, word-spacing 0.2s;
}
.reading-card h2 { font-size: 21px; margin-bottom: 16px; letter-spacing: -0.01em; }
.reading-card p { font-size: 16px; line-height: 1.65; color: #3a3527; margin-bottom: 16px; max-width: 56ch; }
.reading-card p:last-child { margin-bottom: 0; }

/* ---- Dyslexia-friendly reading mode ----
   Real, honest levers: generous letter-spacing and word-spacing reduce
   letter-crowding; taller line-height stops the eye losing its place
   between lines; a wider left-aligned measure avoids justified ragged
   spacing; and a plain, highly-legible web-safe sans stack (no single
   commercial "dyslexia font" is claimed, since the research on any one
   typeface curing reading difficulty is inconclusive — spacing and
   line-height changes have the more consistently documented benefit). */
.demo-wrap.reading-mode .reading-card {
  font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: 0.035em;
  word-spacing: 0.18em;
  line-height: 2;
}
.demo-wrap.reading-mode .reading-card h2 { letter-spacing: 0.01em; }
.demo-wrap.reading-mode .reading-card p { max-width: 62ch; text-align: left; }

/* Reading ruler: a horizontal band that follows the cursor vertically,
   helping the eye track a single line without losing its row. Pointer-
   events are disabled on the ruler itself so it never blocks clicks. */
.reading-ruler {
  position: fixed;
  left: 0;
  width: 100%;
  height: 34px;
  background: rgba(31,111,92,0.10);
  border-top: 2px solid rgba(31,111,92,0.4);
  border-bottom: 2px solid rgba(31,111,92,0.4);
  pointer-events: none;
  z-index: 50;
  display: none;
}
.reading-ruler.active { display: block; }

const demoWrap = document.getElementById('demoWrap');
const modeBtn = document.getElementById('modeBtn');
const rulerCheck = document.getElementById('rulerCheck');

modeBtn.addEventListener('click', () => {
  const active = demoWrap.classList.toggle('reading-mode');
  modeBtn.setAttribute('aria-pressed', String(active));
});

// Reading ruler: a thin band that follows the pointer's vertical position,
// helping the eye stay locked to one line at a time. Built once, then
// shown/hidden rather than created and destroyed on every toggle.
let ruler = document.createElement('div');
ruler.className = 'reading-ruler';
document.body.appendChild(ruler);

function moveRuler(e) {
  ruler.style.top = (e.clientY - 17) + 'px';
}

rulerCheck.addEventListener('change', () => {
  if (rulerCheck.checked) {
    ruler.classList.add('active');
    document.addEventListener('mousemove', moveRuler);
  } else {
    ruler.classList.remove('active');
    document.removeEventListener('mousemove', moveRuler);
  }
});