v146 · HTML · Accessibility · demo

Reading Settings

A reading preferences panel that controls <meta name="text-scale" content="N"> dynamically. Adjust the scale slider — the article text grows or shrinks while the borders, sidebar width, and layout proportions stay locked, demonstrating why text-scale differs from zoom.

Chrome 146+ — <meta name="text-scale">. This meta caps or adjusts the browser's text-only scaling. In older browsers updating the meta has no effect — the sliders still move but you won't see text-scale-specific reflow.

Use the A− / A+ buttons to adjust text scale · observe the article reflow vs the fixed layout grid · "Reset" returns to 1.0

Text Scale

1.0

Presets

Feature · Browser Internals

How text-scale changes the web

For years, browsers offered two ways to make text larger: font-size preferences, which only some sites respect, and full-page zoom, which scales everything including layout, images, and spacing. Neither gave users fine-grained control over text independently of layout.

The meta name="text-scale" tag gives authors a signal to the browser about how they expect text scaling to interact with their layout. A value of 1 means the page is already accessible at the default size; a value below 1 means the page may need extra scaling; a value above 1 caps the browser's text scaling to the given multiplier.

Critically, this is a hint — not a lock. The browser always has the final word on accessibility. But it allows the browser to make smarter decisions about when and how much to scale text, without breaking layouts that rely on fixed dimensions.

Current meta: <meta name="text-scale" content="1.0"> — JavaScript reads it back: document.querySelector('meta[name=text-scale]').content

<!-- Static use: tell the browser this page supports text-only scaling -->
<meta name="text-scale" content="1">

<!-- Dynamic update via JavaScript -->
const meta = document.querySelector('meta[name="text-scale"]');
meta.setAttribute('content', '1.5'); // scale text to 1.5× without zooming layout

// The browser reads this at layout time. Changing it may trigger a reflow
// of text elements while leaving fixed-width containers, images, and
// borders unchanged — unlike document.documentElement.style.zoom
// which scales everything proportionally.

see also