shout

This website uses 🍪 to understand how you interact with it so we can improve the experience of everyone browsing it. By continuing your visit, you agree to its use of cookies. Learn more

All good!
🍪Preferences

This website uses cookies

Openli would like to use our own and third party cookies and similar technologies for

  • necessary purposes
  • analytical purposes
  • marketing purposes

You can set your preferences by selecting the options below. Withdraw your consent at any time via the shield icon.

Learn more about how we use cookies and who sets cookies on our website

Accept Necessary
Accept All
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Read Time

Automatically calculate and display estimated reading time for any article or text on your site.

CDN ScriptDocumentationExample

Copy the Read Time <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Read Time -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/ReadTime.min.js" ></script>
Copy Script

Required attributes

I want this element to display the time it will take to read the contents selected
Attribute to add
Name
wt-readtime-element
Value
display
Instructions

This Text field will be showing the time it'll take to read the selected section.

we can have multiple text fields within the page with this attribute and all of them will show the value.

How does it look?
I want the contents of this section to be considered for the read time calculation
Attribute to add
Name
wt-readtime-element
Value
article
Instructions

This element will be the container that holds the text that will be used to calculate the time to read.

This can be any element that contain text inside but make sure all of the content to be calculated is within it.

How does it look?
Optional
I want this to be the number of words per minute for the calculation of time
Attribute to add
Name
wt-readtime-words
Value
256
Instructions

Add this to the text element that is holding the display Attribute.

the read time calculation is using a default read time of 225 words per minute. This attribute will override the amount of words per minute for the calculation.

How does it look?
Optional
I want this to be the suffix after the time to read.
Attribute to add
Name
wt-readtime-suffix
Value
suffix
Instructions

This will be added at the end of the time calculation.

By default it'll say "x minutes" minutes being the suffix, if this tag is added the minutes will be replaced by whichever text the attribute has.

this does not apply to a flat minute which will show up as "a minute".

How does it look?
Optional
I want this to be the suffix to show when the read time is less than a minute.
Attribute to add
Name
wt-readtime-smallsuffix
Value
small suffix
Instructions

This will be added if the text takes less than a minute to read.

By default it'll say "Less than a minute", if this tag is added this phrase will be replaced by whichever text the attribute has.

this does not apply to a flat minute which will show up as "a minute".

‍

How does it look?

Optional Attributes

I want this element to display the time it will take to read the contents selected
Attribute to add
Name
wt-readtime-element
Value
display
Instructions

This Text field will be showing the time it'll take to read the selected section.

we can have multiple text fields within the page with this attribute and all of them will show the value.

Where?
How does it look?
I want the contents of this section to be considered for the read time calculation
Attribute to add
Name
wt-readtime-element
Value
article
Instructions

This element will be the container that holds the text that will be used to calculate the time to read.

This can be any element that contain text inside but make sure all of the content to be calculated is within it.

Where?
How does it look?
Optional
I want this to be the number of words per minute for the calculation of time
Attribute to add
Name
wt-readtime-words
Value
256
Instructions

Add this to the text element that is holding the display Attribute.

the read time calculation is using a default read time of 225 words per minute. This attribute will override the amount of words per minute for the calculation.

Where?
How does it look?
Optional
I want this to be the suffix after the time to read.
Attribute to add
Name
wt-readtime-suffix
Value
suffix
Instructions

This will be added at the end of the time calculation.

By default it'll say "x minutes" minutes being the suffix, if this tag is added the minutes will be replaced by whichever text the attribute has.

this does not apply to a flat minute which will show up as "a minute".

Where?
How does it look?
Optional
I want this to be the suffix to show when the read time is less than a minute.
Attribute to add
Name
wt-readtime-smallsuffix
Value
small suffix
Instructions

This will be added if the text takes less than a minute to read.

By default it'll say "Less than a minute", if this tag is added this phrase will be replaced by whichever text the attribute has.

this does not apply to a flat minute which will show up as "a minute".

‍

Where?
How does it look?

Working examples

See the Pen WT - Article Read Time by Code Raccoons (@jorchie) on CodePen.

Information
ProjectsBlogCV
Contact me
Send me a Message
© 2024 The Code Raccoons. All rights reserved.
Privacy Policy