Show Reading Time

Display estimated reading time using Bengal's reading_time filter

1 min read 240 words

Display estimated reading time using Bengal'sreading_timefilter.

The Pattern

1
2
3
<span class="reading-time">
  {{ page.content | reading_time }} min read
</span>

That's it. Bengal'sreading_timefilter calculates based on word count (200 wpm default).

What's Happening

Component Purpose
page.content Raw content of the page
reading_time Bengal filter: counts words, divides by 200

Variations

With Word Count

Bengal provides aword_countfilter that strips HTML and counts words:

<span>{{ page.content | word_count }} words · {{ page.content | reading_time }} min read</span>

Both filters work together seamlessly since they use the same word counting logic.

Custom Calculation

1
2
3
4
5
{# 250 words per minute instead of 200 #}
{% set words = page.content | word_count %}
{% set minutes = (words / 250) | round(0, 'ceil') | int %}

<span>{{ minutes }} min read</span>

Handle Short Content

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% set minutes = page.content | reading_time %}

<span class="reading-time">
{% if minutes < 1 %}
  Quick read
{% elif minutes == 1 %}
  1 min read
{% else %}
  {{ minutes }} min read
{% endif %}
</span>

Frontmatter Override

Allow manual override for complex content:

1
2
3
4
5
{% if page.metadata.reading_time %}
  {% set minutes = page.metadata.reading_time %}
{% else %}
  {% set minutes = page.content | reading_time %}
{% endif %}

Then in frontmatter:

1
2
3
4
---
title: Complex Technical Guide
reading_time: 25  # Override calculated time
---

Seealso