Read Time

Calculate and display the estimated read time of Rich Text content based on word count

Overview

The Read Time attribute calculates and displays the estimated reading time for text content. It analyzes the word count of specified content and displays the estimated minutes needed to read it, based on average reading speed.

Attribute Syntax

Elements

fs-readtime-element · string · required

Defines the role of the element:

• contents - The wrapper containing the content to be measured
• time - The element that will display the calculated reading time

Settings

fs-readtime-wpm · number · default: "265"

Defines the Words Per Minute ratio used for calculation. The default of 265 WPM represents average adult reading speed.

fs-readtime-decimals · number · default: "0"

Defines the number of decimal places displayed in the time output. Set to 0 for whole numbers, 1 for one decimal place, etc.

Usage Examples

Basic Read Time

<!-- Display read time for article -->
<div class="blog-post">
  <div class="meta">
    <span fs-readtime-element="time">5</span> min read
  </div>
  
  <div fs-readtime-element="contents">
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
    <p>More content...</p>
  </div>
</div>

Common Use Cases

Blog Posts

Display estimated reading time at the top of blog articles to help readers decide if they have time to read now.

Documentation Pages

Show reading time for documentation sections to help users plan their learning sessions.

News Articles

Provide quick-read indicators for news content, especially useful for mobile users.

Case Studies

Display reading time for case studies and long-form content to set expectations.

Email Newsletters

Show reading time in email newsletter web versions to encourage engagement.

CMS Collections

Automatically calculate reading time for CMS blog posts and articles.

Calculation Method

The read time is calculated using this formula:

readTime = wordCount / wordsPerMinute

For example:

• 1,000 words at 265 WPM = 3.77 minutes (displays as “4” with 0 decimals)
• 500 words at 200 WPM = 2.5 minutes (displays as “2.5” with 1 decimal)

Word Counting

The attribute counts words by:

1. Extracting all text content from the contents element
2. Matching word patterns (including hyphenated words and contractions)
3. Ignoring HTML tags and attributes
4. Counting all visible text

Words are counted using the pattern /[\w\d''-]+/gi, which includes:

• Regular words
• Hyphenated words (e.g., “well-known”)
• Contractions (e.g., “don’t”)
• Numbers

Reading Speed Guidelines

Content Type	Suggested WPM
Simple/casual content	300+
Average blog posts	265 (default)
Technical documentation	200-225
Academic papers	150-200
Legal documents	125-150

Decimal Places

Choose decimal places based on your needs:

• 0 decimals: Clean, simple (“5 min”)
• 1 decimal: More precise (“5.5 min”)
• 2 decimals: Very precise (“5.73 min”) - rarely needed

For very short content (under 1 minute), the attribute displays “1” when decimals is set to 0, ensuring you don’t show “0 min read”.

Styling Examples

/* Styled read time badge */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: #f3f4f6;
  border-radius: 9999px;
  font-size: 0.875rem;
  color: #6b7280;
}

.read-time::before {
  content: "📖";
}

CMS Integration

In Webflow CMS template pages:

1. Add the fs-readtime-element="contents" to your Rich Text element
2. Add a text element with fs-readtime-element="time" in your template
3. The read time is calculated automatically for each CMS item
4. Optionally hide the contents element if you’re also displaying it elsewhere

<!-- CMS Blog Post Template -->
<article>
  <div class="post-meta">
    <span fs-readtime-element="time"></span> min read
  </div>
  
  <!-- This could be hidden if content displays below -->
  <div fs-readtime-element="contents" class="hidden">
    {cms-post-body}
  </div>
  
  <!-- Actual displayed content -->
  <div class="post-content">
    {cms-post-body}
  </div>
</article>