How does reader mode work? (thebrainbin.org)

submitted 1 day ago by Infrapink@thebrainbin.org to c/nostupidquestions@lemmy.world

7 comments fedilink hide all child comments

I tried googling and I got a lot of hits for what reader mode does and how to enable it, but nobody can explain what the browser is actually doing.

Do sites have pared-down versions of their pages specifically for reader mode? Or does the browser just scan for particular HTML tags?

top 7 comments

sorted by: hot top controversial new old

[-] charonn0@startrek.website 26 points 1 day ago

A web page is a combination of a structured document and a separate stylesheet. The same structured document can be styled in radically different ways just by changing the stylesheet. This is how a website can offer different skins, light/dark mode, etc.

Consider this basic HTML document:

<html>
   <head><title>Test Page</title></head>
   <body>
      <p>This is a paragraph.</p>
      <ul>
         <li>This is an unordered bullet-point list item</li>
         <li>This is also a list item</li>
      </ul>
   </body>
</html>

And here's a stylesheet to make the bullet points square:

ul {
  list-style-type: square;
}

Change the stylesheet and you change how the document is rendered. "Reader mode" is just a minimalist stylesheet built into the browser.

[-] AwesomeLowlander@sh.itjust.works 8 points 19 hours ago

I think OP is asking how the browser figures out what is the important content to display in reader mode and what's the cruft that can be dropped.

[-] brisk@aussie.zone 12 points 1 day ago* (last edited 1 day ago)

If it helps there's a standalone version of the logic.

At a rough scan, it looks like it tries to find a best guess "main content" node by stripping unlikely nodes and then scoring each node. Element type and content contribute to the score

/**
       * Loop through all paragraphs, and assign a score to them based on how content-y they look.
       * Then add their score to their parent node.
       *
       * A score is determined by things like number of commas, class names, etc. Maybe eventually link density.
       **/

[-] owenfromcanada@lemmy.ca 6 points 1 day ago

I don't have any insider knowledge, but I'd guess they're basically just rendering the html without JS or the original CSS, probably with a few tweaks. They may also look for certain tags (like "content") to prioritize the main section. Web developers have a vested interest in notating the content for SEO reasons.

[-] Hudell@lemmy.dbzer0.com 3 points 1 day ago

It's both. The browsers can do it automatically by detecting the content from the page, but the site can also use specific HTML as a sort of instructions for the browser m.

[-] finley@lemmy.zip 2 points 23 hours ago

Well, thank you for asking

[-] NaibofTabr@infosec.pub 2 points 1 day ago

I believe this is due to ADA Title III requirements for publicly accessible businesses:

The ADA requires that businesses open to the public provide full and equal enjoyment of their goods, services, facilities, privileges, advantages, or accommodations to people with disabilities. Businesses open to the public must take steps to provide appropriate communication aids and services (often called “auxiliary aids and services”) where necessary to make sure they effectively communicate with individuals with disabilities.

https://www.ada.gov/resources/web-guidance/

Screen readers and braille displays can't do anything with all the fancy JavaScript and other nonsense that frames and formats the content for delivery, including the user-identifying-and-blocking stuff. The website is legally required to make the content accessible in a way that assistive technologies can use, and usually the simplest way to do that is to just deliver plain text. I think "reader mode" is leveraging this functionality to get the content in a simple form without the cruft, basically just telling the website that the user needs the ADA compliant version.

this post was submitted on 02 Aug 2026

37 points (100.0% liked)

No Stupid Questions

49213 readers

813 users here now

No such thing. Ask away!

!nostupidquestions is a community dedicated to being helpful and answering each others' questions on various topics.

The rules for posting and commenting, besides the rules defined here for lemmy.world, are as follows:

Rules (interactive)

Rule 1- All posts must be legitimate questions. All post titles must include a question.

All posts must be legitimate questions, and all post titles must include a question. Questions that are joke or trolling questions, memes, song lyrics as title, etc. are not allowed here. See Rule 6 for all exceptions.

Rule 2- Your question subject cannot be illegal or NSFW material.

Your question subject cannot be illegal or NSFW material. You will be warned first, banned second.

Rule 3- Do not seek mental, medical and professional help here.

Do not seek mental, medical and professional help here. Breaking this rule will not get you or your post removed, but it will put you at risk, and possibly in danger.

Rule 4- No self promotion or upvote-farming of any kind.

That's it.

Rule 5- No baiting or sealioning or promoting an agenda.

Questions which, instead of being of an innocuous nature, are specifically intended (based on reports and in the opinion of our crack moderation team) to bait users into ideological wars on charged political topics will be removed and the authors warned - or banned - depending on severity.

Rule 6- Regarding META posts and joke questions.

Provided it is about the community itself, you may post non-question posts using the [META] tag on your post title.

On fridays, you are allowed to post meme and troll questions, on the condition that it's in text format only, and conforms with our other rules. These posts MUST include the [NSQ Friday] tag in their title.

If you post a serious question on friday and are looking only for legitimate answers, then please include the [Serious] tag on your post. Irrelevant replies will then be removed by moderators.

Rule 7- You can't intentionally annoy, mock, or harass other members.

If you intentionally annoy, mock, harass, or discriminate against any individual member, you will be removed.

Likewise, if you are a member, sympathiser or a resemblant of a movement that is known to largely hate, mock, discriminate against, and/or want to take lives of a group of people, and you were provably vocal about your hate, then you will be banned on sight.

Rule 8- All comments should try to stay relevant to their parent content.

Rule 9- Reposts from other platforms are not allowed.

Let everyone have their own content.

Rule 10- Majority of bots aren't allowed to participate here. This includes using AI responses and summaries.

Credits

Our breathtaking icon was bestowed upon us by @Cevilia!

The greatest banner of all time: by @TheOneWithTheHair!

founded 3 years ago

MODERATORS

L3s@lemmy.world

technopagan@lemmy.world

jeffw@lemmy.world

L3s@hackingne.ws

L4s@lemmy.world