Readtime

Overview

This component takes in the word count of a given section and does a calculation on that number to return an estimated read time based on language. The words-per-minute values were sourced from this article with the data originating from this research. For more information, see the Readtime calculation information.

Installation

npm install @patternfly/pfe-readtime

Usage

    <pfe-readtime for="#readtime1" hidden>%t-minute readtime</pfe-readtime>
    <pfe-readtime word-count="1200" hidden>%t-minute readtime</pfe-readtime>

Accessibility

This component functions purely as inline-content and does not require any focus state. Should be read by screen-readers inline with it's contextual content.

Attributes

• word-count: allows you to manually set the number of words to use in the readtime calculations. Example: word-count="2500" will set the component to use 2500 words in it's calculations.
• wpm: Is the attribute used to store the average words per minute readtime for each supported country. For more information on these you can read https://irisreading.com/average-reading-speed-in-various-languages and https://iovs.arvojournals.org/article.aspx?articleid=216606.
• template: Rather than use the light DOM region to provide the string template, you can also pass in the value via this attribute. Note that %t will be replaced with the computed readtime.
• lang: By default the component will look to the language specified on the html tag but it can also accept an override via this attribute on a component level.
• for: Specify the selector of the content you want to capture the word-count from. Whatever you enter into this attribute will be found using document.querySelector(<for attribute value>).

Readtime calculation

Average read time by country is determined using this research. Korean read time research can be found here.

TLDR

For Korean, we were able to locate 7 studies in five articles: 5 with silent reading and 2 with reading aloud. Silent reading rate was 226 wpm, reading aloud 133 wpm.

Styling hooks

Available hooks for styling:

Coming soon.