Disabling Reader view for all Browsers

[swapnadi]

Hi Adobe team,

Is there any way we can show the Header and Footer content also in Browsers Reading Mode?

the Reading Mode is a Browser feature which simplifies the layout of a web page to make it easier to read. can we customize the Reading Mode feature of all Browsers in AEM to not remove the content of Header and Footer which contains <nav>, <a>, <div> tags etc.?

Thank you!

[Rohan_Garg · Accepted solution]

Hi @swapnadi,

AFAIK there is no direct method to configure the AEM to show the header and footer in browser reading mode.

It is the browser which strips away non-essential elements like <nav>, <header>, <footer> etc.

You can try conditional rendering using JS to detect whether the page is in Reading mode.

You can checkout the below link for Firefox - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/toggleReaderMode

Any such implementation would again have to be browser specific and thus little cumbersome.

Hope this helps!

Best Regards,

Rohan Garg

[EstebanBustamante]

Hi,

This is not a question related to AEM but is more about web development in general. Unfortunately, Reading Mode is not something developers can interact with or hook into, as it’s a native feature of each browser. There is no standard way for this mode to work across all browsers, so even if you tried to tweak the behavior of elements like the footer or header using JavaScript or specific CSS selectors, it wouldn’t work consistently across all browsers.

AFAIK, this isn't necessarily a feature that customers use frequently, though I could be wrong. In my opinion, I wouldn’t worry too much about it. As long as you're using HTML5 elements, your pages should render well in most cases, and that's usually good enough.

You can read this post about how to write websites compatible with Reading Mode: https://www.ctrl.blog/entry/browser-reading-mode-metadata.html 

Hope this helps