Implementing Medium inspired estimated reading time into Jekyll

Medium a simple feature estimated reading time (ERT) is really great. When people see a headline that piques their interest — and know in advance that it only takes a couple of minutes to read — they’re more likely to click the link.

Calculating estimated reading time

There are plenty of code snippets and WordPress plugins that will automatically calculate the estimated reading time of your articles.

But what if you aren’t a developer, or don’t have access to one, and still want to test this on your website? You can calculate the estimated reading time yourself and simply add it to the top of your article.

Method 1: Doing the math

Research varies, but generally, the average adult reads 200-250 words in one minute.

Convert words into minutes here, some decimals into seconds there, a little rounding at the end… and you can calculate estimated time to read manually.

Here’s how:¹

• Find your total word count. Let’s say it’s 938 words.
• Divide your total word count by 200. You’ll get a decimal number, in this case, 4.69.
• The first part of your decimal number is your minute. In this case, it’s 4.
• Take the second part — the decimal points — and multiply that by 0.60. Those are your seconds. Round up or down as necessary to get a whole second. In this case, 0.69 x 0.60 = 0.414. We’ll round that to 41 seconds.

The result? 938 words = a 4 minute, 41 second read.

But that’s really specific. Why not round that time to make things simpler for your reader? Anything less than 30 seconds gets ignored; anything more than 30 seconds gets rounded up to the next minute.

Ta-da! That rounding makes your 938-word article a 5-minute read.

Method 2: Using an online calculator

A much faster way to get the estimated reading time of your article is to let a calculator do it.

• Read-O-Meter
• Decimal To Time Calculator

Implementing estimated reading time into Jekyll using Liquid tags

With the help of Liquid tags we can have estimated reading time into Jekyll.

Wikipedia suggests a proofreading speed on screen of 180 words per minute (WPM) so here we divide the total content words with 180 (but you can have your own average WPM).

{% assign reading_time = content | strip_html | number_of_words | divided_by: 180 %}

{{ reading_time }} min read

With the release of Jekyll 2.2.0 it depreciated the liquid tag rounding method {{ reading_time | round }} so we can not get rounded value from the above technique. Here we only get 1.6 = 1 or 2.4 = 2 value.

Estimating reading time to the rounded whole number into Jekyll

To get estimated rounded value reading time to the nearest whole number we code more here.

What some of the following Liquid tags do for us:

• content: Your current post content on a page.²
• strip_html: Remove all the HTML tags in a page content.
• number_of_words: Count all the words in a content.
• append: '.0': Show all the decimal numbers.
• divided_by: 180: Divide the total content words by 180.

{% assign reading_time = content | strip_html | number_of_words | append: '.0' | divided_by: 180 %}

{% if reading_time < 0.5 %}Less than a minute read
{% elsif reading_time >= 0.5 and reading_time < 1.5 %}1 minute read
{% elsif reading_time >= 1.5 %}<span class="reading-time">{{ reading_time }}</span> minutes read
{% endif %}

Here we get 1.67777 or 2.43333 so until the Jekyll implementation of Liquid rounding method for now we wrap the {{ reading_time }} with the .reading-time class so that the following jQuery will help us to get the rounded value to the nearest whole number.³

// Reading time - jQuery script that rounds it to the nearest whole number

$(document).ready(function() {
    $(".reading-time").text(function (index, value) {
      return Math.round(parseFloat(value));
    });
});

Now with the help of above jQuery snippet we get the actual rounded value to the nearest whole number 1.6777 = 2 or 2.43333 = 2. That’s what we want to get.

A Jekyll estimated reading time in pure Liquid

If you don’t want to use jQuery or any other techniques but only want to utilize pure Liquid tags then following codes will definitely help you to get estimated reading time into Jekyll.

{% assign reading_time = content | strip_html | number_of_words | plus:91 | divided_by:180 %}
{% if reading_time <= 1 %}
  {% assign reading_time = '1' | append:' min read' %}
{% else %}
  {% assign reading_time = reading_time | append:' min read' %}
{% endif %}

Now if you tag {{ reading_time }} where you want to show the post estimated reading time, then it will output as 1 min read or 2 min read accordingly to your contents.