With the increase in web development and designing, new development tools, the ease of deploying a personal or professional blog had never been easier. We can see amazing features brought out in the open by amazing developers. I have noticed the estimated read time in many blogs, digital newspapers, and simple websites even. In regards to the new theme development, I wanted to have estimated read time for my blog as well.
This feature can be achieved with “any” programming languages that allow division of numbers. We can do this dynamically or manually, depends on how much of a time and hassle we wish to go through for this single feature.
We need the number of words we have in our blog, I use Typora for my markdown editor and to prepare an offline blog posts (later deployed). One thing I liked about Typora is the words count at the bottom right, simple feature, yet very helpful.
We can achieve similar result with a bit of hassle using Terminal, if we are in Linux using
cat <filename> | wc -w
This command returns the number of words in a file, plain and simple.
let post = document.getElementsById("post").innerText; const wordsCount = post.match(/\S+/g).length; const formattedWordsCount = "~" + (wordsCount / 200).toFixed(2) + " minutes";
I did not want to go the dynamic calculation route. I utilized
divided_by liquid syntax to calculate the estimated time. For example, let’s say I manually add the words count to my post meta-data as such
words: 250. We can access that meta-data using
post.words and get the average read time by dividing the words count by average reader’s words-read-per-minute which is 200-300.
page.words | divided_by: 200.00 | round: 2 | append: " minutes" | prepend: "~"
Depending on how we format the theme, we can style the average reading time accordingly.