Medium has brought some interesting ideas to the idea of reading as user experience. Among them: estimated reading time.

A developer or designer using Jekyll who wants to add a Medium-style reading time estimate to a blog template will likely find that accomplishing this a simple matter of getting Jekyll to do some math and output the result – sorta.

The reading time equation is the number of words divided by typical reading speed of words per minute. The only catch is that Jekyll’s math syntax is a bit uglier than syntax used in programming languages such as JavaScript.

For sheer simplicity, I prefer to assign the calculation to a variable – in this case readCalc – using Jekyll’s assign function. First the word count of the post.

1
  {% assign readCalc = post.content | number_of_words %}  

Average reading speed is around 180 to 220 words per minute. The lower end of that stat, 180, will be our divisor.

1
  {% assign readCalc = post.content | number_of_words | divided_by: 180}  

For purposes of display, a nice neat number with no decimals is better, so rounding our result is the next step in the equation.

1
  {% assign readCalc = post.content | number_of_words | divided_by: 180 | round %} 

At this point, just plugging the number into the correct bit of text in your Jekyll template might suffice. However, it’s also important to sand the bottom of the drawers where no one will see. Numbers below nine are typically written out. Any readCalc value of less than one minute needs to be handled.

This is done with a series of if and elsif statements that assign a string value to a variable readTime. In cases where redCalc is less than a minute:

1
2
  {% if readCalc == 0 %}
    {% assign readTime = "Less than one" %}  

The rest of values are assigned via elsif.

1
2
  {% elsif readCalc == 1 %}
    {% assign readTime = "One" %}  

Be sure to close the if statement. The full code block looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  {% if readCalc == 0 %}
     {% assign readTime = "Less than one" %}
   {% elsif readCalc == 1 %}
     {% assign readTime = "One" %}
   {% elsif readCalc == 2 %}
     {% assign readTime = "Two" %}
   {% elsif readCalc == 3 %}
     {% assign readTime = "Three" %}
   {% elsif readCalc == 4 %}
     {% assign readTime = "Four" %}
   {% elsif readCalc == 5 %}
     {% assign readTime = "Five" %}
   {% elsif readCalc == 6 %}
       {% assign readTime = "Six" %}
   {% elsif readCalc == 7 %}
     {% assign readTime = "Seven" %}
   {% elsif readCalc == 8 %}
     {% assign readTime = "Eight" %}
   {% elsif readCalc == 9 %}
     {% assign readTime = "Nine" %}
   {% else %}
     {% assign readTime = readCalc %}
   {% endif %}   

The final result is displayed in the template by plugging in the value of readTime with this bit:

1
  <p class="blog-read-time">{{ readTime }}-minute read</p>