AttRibutes
Read Time
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Read Time

Calculate and display the total read time of a text element or rich text in Webflow.

Watch a quick tutorial

Read Time • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Contents

Add to Rich Text or Div containing text elements

fs-readtime-element
=
"
contents
"

Time

Add to Text element, Span, Paragraph, Heading

fs-readtime-element
=
"
time
"

Optional attributes

Words per minute

Add to elements with fs-readtime-element = "time"

fs-readtime-wpm
=
"
265
"

Decimals

Add to elements with fs-readtime-element = "time"

fs-readtime-decimals
=
"
0
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-readtime
></script>

Copy Script
2

Add these required attributes to the elements

Contents

Element containing the entire text
fs-readtime-element
=
"
contents
"

This element contains all text content for calculating read time. You can nest any type of text element within this wrapper.

The read time will be estimated based on all the words contained in this wrapper.

NOTE

Read Time not only works for a Rich text element, but for all text elements. You can define this attribute on a div that contains a mix of Text and Rich Text elements, and the Solution will count all the words inside of that div.

Add this attribute:
Name
fs-readtime-element
Copy
Value
contents
Copy
Add it to those type(s) of element(s):
Div Block
Rich Text

Time

The text element used to show the reading time
fs-readtime-element
=
"
time
"

This element shows the estimated read time in minutes, calculated from the total word count on the page and the words per minute (WPM) value.

The text element displays the calculated numerical value, such as "4".

Add this attribute:
Name
fs-readtime-element
Copy
Value
time
Copy
Add it to those type(s) of element(s):
Text Element
Span
Paragraph
Heading
3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Words per minute

Defines the base for the Read Time calculation
fs-readtime-wpm
=
"
NUMBER
"

The default words per minute (WPM) value is set to 265, following the standard established by Medium.com.

Add this attribute:
Name
fs-readtime-wpm
Copy
Value
NUMBER
Copy
Example:
fs-readtime-element = "320"
Default
fs-readtime-element = "265"
Add it to any element with
fs-readtime-element = "time"
script icon
Script tag
?

Decimals

Define the base for the Read Time calculation
fs-readtime-decimals
=
"
NUMBER
"

By default, the decimals value is set to "0", which results in a whole number output, such as "4".

EXAMPLE

Setting the value to "1" outputs a number with one decimal point, for example, "4.2".

Choosing a value of "2" yields a number with two decimal points, like "4.25".

Add this attribute:
Name
fs-readtime-decimals
Copy
Value
NUMBER
Copy
Example:
fs-readtime-decimals = "2"
Default:
fs-readtime-decimals = "0"
Add it to any element with
fs-readtime-element = "time"
script icon
Script tag
?
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-readtime-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-readtime-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-readtime-instance = "1"
fs-readtime-instance = "2"
fs-readtime-instance = "blog"
fs-readtime-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support