Consider updating API docs markup to support "reader mode" in mobile browsers

[kgryte]

Currently, when viewing a package's API docs on iOS Safari (and presumably other mobile browsers), users do not have the option to view in "reader mode".

In general, the API docs application is a PWA, so we do take into consideration mobile viewing. And we don't display things like ads, etc, atm, so a "clutter free" experience is not as needed as might be the case for many other websites which are dependent on advertising for revenue.

Nevertheless, I wonder if we can make some small changes to the application markup to allow viewing docs in reader mode. From initial research, one tweak could be to wrap README content in an <article> tag. Currently, we use a <div class="readme">.

If we switched from a div to an article wrapper, we'd need to ensure that CSS styles are unchanged, and we'd also need to consider whether we'd need to move some of the navigational elements (e.g., breadcrumbs and README bottom navigation) outside of the <article> element.

If we pursued this refactoring, may also be prudent to revisit how we style the main README content. Namely, we might want to move to using flexbox more heavily to arrange README content while still accommodating the desire for README content to float in the right-margin (Tufte-esque). This could also be investigated if we switched to use CSS utility classes (e.g., Tailwind).

Resources

• Design for reading
• SO Post
• Reading mode meta data
• Safari reader notes (a bit outdated)