Disabling Reader view for all Browsers | Community
Skip to main content
S
swapnadi
January 7, 2025
Solved

Disabling Reader view for all Browsers

  • January 7, 2025
  • 2 replies
  • 582 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Rohan_Garg

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

 

2 replies

Rohan_Garg
Community Advisor
Rohan_GargCommunity AdvisorAccepted solution
Community Advisor
January 7, 2025

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
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    January 8, 2025

    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

     

    Esteban Bustamante
      Terms & ConditionsAccessibility statement

      Loading footer...