Show Reading Time

Display estimated reading time using Bengal's reading_time filter

1 min read 291 words

Display estimated reading time using Bengal'sreading_timeproperty or filter.

The Pattern

Use the page property (recommended)

<span class="reading-time">
  {{ page.reading_time }} min read
</span>

Use the filter on content

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

Both approaches calculate reading time at 200 words per minute by default.

What's Happening

Component Purpose
page.reading_time Property: returns reading time in minutes (cached)
reading_time Filter: counts words, divides by 200

Variations

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.

{# 250 words per minute instead of 200 #}
{% let words = page.content | word_count %}
{% let minutes = (words / 250) | round(0, 'ceil') | int %}

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

{% let minutes = page.content | reading_time %}

<span class="reading-time">
{% match minutes %}
  {% case m if m < 1 %}
    Quick read
  {% case 1 %}
    1 min read
  {% case m %}
    {{ m }} min read
{% end %}
</span>

Allow manual override for complex content:

{% let minutes = page.metadata.reading_time ?? page.content | reading_time %}

Then in frontmatter:

---
title: Complex Technical Guide
reading_time: 25  # Override calculated time
---

Seealso