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.
npm install @patternfly/pfe-readtime
<pfe-readtime for="#readtime1" hidden>%t-minute readtime</pfe-readtime> <pfe-readtime word-count="1200" hidden>%t-minute readtime</pfe-readtime>
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.
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>).
Average read time by country is determined using this research. Korean read time research can be found here.
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.
Available hooks for styling:
|Variable name||Default value||Region|