Proposal: CSS Media Query for Browser Reader Views

[denk0403]

Safari and Microsoft Edge both have a Reader Mode (named Reader View and Immersive Reader, respectively), which aim to remove ads and other distractions when viewing web articles. These modes seem to enforce their own styles on elements and potentially limit what JavaScript is allowed to execute.

I understand these restrictions are necessary in order to make these modes a more accessible format for users, but it would be nice if there was some standardized way for developers to customize a small set of text-related styles (color, display, text-decoration, etc.). Within these modes, Microsoft Edge changes the page's URL protocol to "read:", and Safari changes it to "safari-reader:", so it's partially detectable with JavaScript via location.protocol, but it's still unclear to me what kind of JavaScript is allowed to execute.

Personally, this need came up when, due to my web page's structure, Safari's reader view failed to hide certain UI elements, and I didn't want them to appear in the reader view. This feels like something CSS media queries should be able to override. Media queries already support targeting different media types like print and screen, so it feels natural to add something like reader as a new media type to target these reader modes.

Example:

@media reader {
  p.emphasize { text-decoration: underline; }
  .ad { display: none; }
}

Browsers then implementing a reader mode should also offer an option to users to "Disable Page Stylesheets" that fallbacks to default styles in the event that a website tries to abuse the media query such as by hiding or obscuring the content.

[thibaudcolas]

I’m glad to see this being raised! Hiding elements that are definitely not relevant would be great.

A similar use case I’d have is to change the color of img elements with a filter so they are higher-contrast against the background of the page as overridden by the reader mode. This is particularly useful for monochrome images (logos, non-decorative icons). Here’s an example of what those styles tend to look like with other media queries:

@media print {
  .my-img {
    /* This image needs to be on the print, but we don’t care about its color. */
    filter: grayscale(1);
  }
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .my-img {
    /* Increase the contrast between the image and bg in forced colors mode with a dark theme */
    filter: contrast(0);
  }
}

It’d be useful to do similar tweaks in reader mode to improve contrast / legibility.

[thibaudcolas]

Just wanted to follow up to say I’d be very interested in seeing data on reader mode usage if there’s any out there? I found discussion of surfacing reader mode usage data in the Firefox Public Data Report, but it seems to have gone nowhere.

Also worth mentioning Chrome now seems to have a reading mode too.

---

I’ve experimented with detecting reader mode as @denk0403 suggested, and wasn’t able to so far.

• In Edge, it changes the protocol, but for a parent page which is generated by Edge with the reader mode interface. The actual site page is loaded in an iframe, as far as I can see with no specific HTTP header or other sign of the rendering mode.
• In Safari, it seems to change the site’s CSS only, again with no special HTTP header.

In both cases, reader mode seems to prevent all JS execution once enabled. It’s probably detectable by tracking HTTP requests to external web content that would be filtered out when reader mode is enabled, but this is more effort than I can go through for now.

[JayBox325]

+1 for this.

[omz13]

This would be so useful to have. I have some pages where Safari's Reader mode doesn't quite get things right, and would ideally hide some things that are not relevant in that mode.

[bleper]

@omz13 To hide elements, you can use the hidden attribute in HTML, which is designed specifically for this purpose.

[omz13]

@rthrejheytjyrtj545 we’re discussing adding a media query so things can be done, specifically, when a browser is showing its reader mode.