Chromium Reading Mode: Creating Dyslexia-Friendly Layouts

This article explores how the Chromium web browser's Reading Mode side panel transforms cluttered web pages into clean, accessible text. It covers the underlying content extraction technology, the use of machine learning to identify core article text, and the specific typographical and visual customizations designed to support readers with dyslexia.

Content Distillation and Machine Learning

To remove clutter, Chromium must first separate the primary article from advertisements, navigation bars, and pop-ups. It achieves this through a process called DOM (Document Object Model) distillation. Chromium uses an on-device machine learning model, known as Screen2x, which analyzes the browser's accessibility tree.

Instead of merely looking at raw HTML code, the model evaluates the visual layout and semantic structure of the rendered page. It identifies the main text blocks and headers while discarding irrelevant elements like user comments, sidebars, and embedded media. This ensures only the necessary reading material is extracted.

Rendering in the Side Panel

Once the core text is extracted, Chromium injects it into an isolated WebUI side panel. This panel completely ignores the original website's complex styling and applies a stripped-down, standardized stylesheet.

By moving the text into a narrow, dedicated column alongside the main webpage, the browser automatically shortens the length of each line of text. Shorter lines prevent the reader's eyes from losing their place when tracking from the end of one line to the beginning of the next, addressing a common tracking challenge for people with dyslexia.

Reducing Visual Crowding with Spacing

Visual crowding occurs when letters, words, or lines of text appear to blend together, making word decoding difficult for dyslexic readers. Chromium's Reading Mode counters this by offering granular spacing controls in the side panel toolbar.

Users can increase the vertical space between lines (line height) and expand the horizontal space between individual letters and words. These adjustments create distinct visual boundaries around words and characters, making them easier to isolate, recognize, and process.

Typography and Font Selection

Many websites use decorative fonts (serifs) or tightly packed typefaces that can confuse dyslexic readers. The Reading Mode side panel overrides the website's original typography and allows the user to apply uniform, accessible fonts.

Users can select clean, sans-serif typefaces, including Lexend—a font specifically engineered to reduce visual stress and improve reading speed. They can also choose fonts like Comic Sans, which is favored by many dyslexic readers because it features distinct, non-mirrored letterforms (making it easier to tell the difference between letters like "b" and "d"). Additionally, users can scale the font size up or down without breaking the layout of the text.

Color Themes and Contrast Control

Stark black text on a bright white background creates high contrast that can cause visual fatigue and make text appear to blur or move on the screen. Chromium provides preset color themes to mitigate this glare.

Readers can switch the side panel to low-contrast backgrounds, such as warm yellow (sepia), soft gray, or a muted dark mode. These softer color palettes reduce eye strain and stabilize the appearance of the text.

Synchronized Text-to-Speech

Chromium further supports dyslexic users by integrating a "Read Aloud" feature directly into the Reading Mode panel. This tool uses text-to-speech voices to read the distilled article aloud.

As the audio plays, the interface visually highlights the current sentence and the exact word being spoken in real time. This bimodal approach—combining auditory processing with visual tracking—helps anchor the reader's attention, aids in decoding unfamiliar words, and improves overall reading comprehension.