Reader views in browsers

Published:
Categories: HTML

I'm currently looking for reasons or arguments on why to use proper semantic HTML. The reader views/modes in browsers came to mind.

tl;dr

Unfortunately, it doesn't serve as a straight-away good example. Implementations differ and are mainly obscure, browser vendors don't really talk about it. Results in displaying pages vary across browsers.

Where to find reader mode in a browser?

  • Safari has "Reader", look for the document icon in the address bar, at least on desktop cmd + shift + r also works.
  • Firefox has "Reader view", look for the document icon in the address bar, keyboard short on mac is alt + cmd + r.
  • Chrome has "Reading mode". Look in Menu > More Tools > Reading mode
    • has severe problems, it doesn't display lists, even though properly marked up.
  • Edge at some point did seem to have "Immersive reader", but at least in my version 134 i only found "Read aloud". It doesn't have "Reading mode".

"Research"

Yes, i've put research in quotes, because i basically stopped after reading through 2-3 results and trying out a few things. I quickly realized the appropriate status for reader view is "it's complicated".

In a microsoft community forum, i found a post from 2019: "Make Reading View button available on All web pages and websites. Make it a Fixed button". Don't mind the title.

There i read about Edge's immersive reader and not much more. But i used this forum post to try it in a few browsers:

  • Safari (desktop) only uses the "marked as solution" part, which is wrapped with <article>, no images.
  • Firefox: displays all actual textual content, but leaves some parts out, e.g. a <button disabled>, no images, but strangely enough it shows the avatars.
  • Chrome displays all text, but no images

The more interesting resource i found was a stack overflow thread on "Why does SO HTML structure break browser "reader modes"?". That's from 2020. I assume the details of what is chosen for reader view might not be 100% accurate anymore. But the overall information was in line with my quick double check.

Conclusion

I wanted to bring browser's reader view / mode as an example of a benefit of valid semantic html. However, browsers have a vastly different implementations and i can't in all consciousness recommend anyone to keep reader views in mind when writing their HTML.

However, it does serve as an example for another important advice: Do not hack your html so it does show up in reader view. This will break other usages of your page.

Something didn't sit right what that conclusion

The next day over my morning coffee, my mind was wandering back to that conclusion. Something didn't sit right. And no, it's not about "don't hack things to fit unruly tools". That part is still valid. But it's only half the answer.

How are non-HTML-people supposed to know the difference between "proper semantic, spec-valid HTML" and "hacky stuff"? When all there is, is a comment or blog post somewhere saying "use this HTML and it will show up in reader".

This is the whole reason i decided to make a talk about "good HTML for non-HTML people".

So, how are you supposed to know if an answer on the internet (TM) is okay?

Pre note: In case you don't know them yet, there are resources. The number one is MDN web docs. Its core content is a human readable version of the specifications, enhanced with examples and things to look out for.

  1. Give yourself those 15 minutes and check back.
  2. Read up on MDN about that HTML element.
  3. Your common sense knowledge of a word can guide you in understanding HTML elements. Cause, never forget, the specs are written by people.
  4. Trust yourself. Never heard of it before and that answer is many years old? Likely, you never heard of it because it did not become a recommended or best practice.
  5. This list is not complete :).