How Safari's Reader View Strips Away Page Clutter

Safari’s Reader View transforms cluttered web pages into clean, easy-to-read articles by utilizing a specialized content-extraction algorithm. By examining the underlying HTML structure of a webpage, Safari identifies the core content—such as the main text and relevant images—while simultaneously detecting and discarding distractions like advertisements, navigation menus, and sidebars. Once this primary content is isolated, the browser extracts it and applies a standardized, customizable template, giving users a distraction-free reading experience.

Analyzing the Webpage Structure

When you load a webpage, Safari reads its Document Object Model (DOM), which is the structural blueprint of the page's HTML code. Before you even click the Reader View button, Safari scans this blueprint in the background to determine if the page contains an actual article. If it detects a viable article, the Reader View icon becomes available in the address bar.

Looking for Semantic HTML Tags

The easiest way for Safari to find the main text is through semantic HTML5 tags. Modern web developers use specific tags to label different parts of a webpage.

Safari immediately looks for tags like <article> or <main>, which explicitly tell the browser, "The main content is inside here." Concurrently, it looks for tags like <nav>, <aside>, and <footer>, and immediately marks them for removal, as these house navigation bars, sidebars, and bottom-of-page links.

Heuristic Scoring and Text Density

Not all websites use proper HTML tags, so Safari relies heavily on a heuristic scoring system—originally based on an open-source tool called Readability—to grade different blocks of a webpage.

Safari breaks the page down into containers (usually <div> and <p> tags) and awards or deducts points based on specific criteria:

  • Text Length and Punctuation: Containers with long strings of text and multiple commas or periods receive a high score. This is a strong indicator of standard paragraph writing.
  • Link Density: Safari calculates the ratio of linked text to normal text within a container. A block of text with a high number of links is penalized, as it is likely a navigation menu, a list of related articles, or an advertisement.
  • Class and ID Names: Developers label their code using "class" and "ID" attributes. Safari scans these labels for keywords. Words like "post," "entry," "body," or "story" boost a container's score. Words like "ad," "promo," "sidebar," "comment," or "banner" result in severe point deductions.

Filtering Images

To ensure that only relevant images are kept while banner ads and icons are trashed, Safari evaluates the location and dimensions of the graphics.

Images that are nested inside the highest-scoring text containers are kept, along with their associated <figcaption> tags. Images located in low-scoring containers are discarded. Furthermore, Safari checks the visual dimensions of the images; it automatically strips out tiny graphics (like social media icons or tracking pixels) and overly wide, thin graphics that match standard advertisement banner sizes.

Rebuilding the Page

Once the algorithm finishes scoring the page, the container with the highest score is declared the winner. Safari then executes the final phase:

  1. Extraction: It copies the HTML text and images from the winning container.
  2. Sanitization: It strips away all original CSS (styling code) and JavaScript (interactive code) attached to that content. This stops pop-ups, auto-playing videos, and custom site formatting.
  3. Rendering: Safari generates a brand-new, hidden webpage overlay. It pastes the extracted text and images into this overlay and applies its own internal stylesheet, allowing the user to control the font, background color, and text size.