Calculating the estimated reading time for blog articles: A tutorial
Have the article read aloud.
If you want to give your readers additional guidance and show them roughly how much time they should plan to spend reading your post, giving them an estimated reading time is a handy feature. In this blog article, I'll show you how you can create this added value on your website with a simple piece of JavaScript, regardless of which content management system or technology you use.
What the JavaScript code does
This code calculates the estimated reading time based on the number of words in a text. We assume that an average reader reads around 200 words per minute. You can adjust this value to the reading habits of your target group if necessary.
Essentially, the code consists of two parts:
- The calculation function (calculateReadingTime): This function takes a text string, counts the words and divides this number by the average reading speed. The result is rounded up to the nearest whole number to obtain the minutes of reading time.
- The update function (updateReadingTime): Here, the actual text is retrieved from an element with the .news-text-wrap class. After the reading time has been calculated, it is displayed in an element with the class .estimated-reading-time_inner.
<div class="estimated-reading-time">
Estimated reading time: <span class="estimated-reading-time_inner"></span> minutes
</div>
<div class="news-text-wrap">
<!-- Here is the text of the article -->
</div>Make adjustments
- Adjusted reading speed: If you know that your readers read faster or slower, you can change the wordsPerMinute value accordingly.
- Responsive display: Make sure that the reading time display also looks and works well on mobile devices.
Conclusion
Indicating an estimated reading time on your page is a simple but effective way to provide readers with an additional service and exude professionalism at the same time. This little JavaScript snippet can be used anywhere, regardless of the platform used.
The JavaScript code
document.addEventListener('DOMContentLoaded', function() {
// Estimated reading time for blog articles
// Calculates the estimated reading time based on the number of words
function calculateReadingTime(text) {
const wordsPerMinute = 200; // Average reading speed
const words = text.trim().split(/\s+/).length; // Count the words
const readingTime = Math.ceil(words / wordsPerMinute);
return readingTime;
}
// Updates the display of the estimated reading time
function updateReadingTime() {
const newsTextWrap = document.querySelector('.news-text-wrap');
// Checks if the element exists
if (newsTextWrap) {
const textContent = newsTextWrap.innerText;
const readingTime = calculateReadingTime(textContent);
const readingTimeDisplay = document.querySelector('.estimated-reading-time_inner');
// Only updates if the target element exists
if (readingTimeDisplay) {
readingTimeDisplay.innerText = `${readingTime}`;
}
}
}
updateReadingTime();
});Do you have a question or want to discuss the topic?
In the Community Hub for TYPO3 you can exchange ideas with other TYPO3 users. And if you don't want to miss any new articles: The TYPO3 Newsletter comes once a month, without spam.
