One of the features I absolutely love in Firefox is Firefox Reader View
. This removes all the clutter and present the content in text format for better readability and relief for eyes(It also removes the ad banners 😉 ).
Not all the browsers (Chrome needs special flag to enable this 😐 ) have a readability mode thus, providing an option for reader mode within your website would be a huge help to your users and would make your webpage more accessible.
The good news is you do not have to implement this on your own, Mozilla has a standalone version of the readability library used for Firefox Reader View - Readability.js.
The usage is pretty simple and straight forward:
- We need to include the readability.js in our code in either of 2 ways:
- Download the file via https://github.com/mozilla/readability/releases
- Install npm package - https://www.npmjs.com/package/@mozilla/readability
-
Create a new
Readabilty
object from DOM document node
const article = new Readability(document).parse();
This article object will have following properties
-
title
: article title -
content
: HTML string of processed article content -
textContent
: text content of the article (all HTML removed) -
length
: length of an article, in characters -
excerpt
: article description, or short excerpt from the content -
byline
: author metadata -
dir
: content direction (LTR or RTL)
Note Readability morphs the actual object so better to pass a clone node.
const documentClone = document.cloneNode(true); const article = new Readability(documentClone).parse();
-
Substitute this
article.textContent
in the desired div and done 😎
See this in action here - https://itsopensource.com/demos/readability
Reference: https://github.com/mozilla/readability
Top comments (0)