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.

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.

Slots

Attributes

readtime

Number of minutes readtime, estimated

DOM Property

readtime

Type

unknown

Default

unknown

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.

DOM Property

wordCount

Type

number

Default

0

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.

DOM Property

wpm

Type

number | undefined

Default

unknown

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. Template for printing the Readtime Translatable string for printing out the readtime in a readable format. Use %t as a stand-in for the calculated value.

DOM Property

templateString

Type

unknown

Default

unknown

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.

DOM Property

lang

Type

string

Default

unknown

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>).

DOM Property

for

Type

string | undefined

Default

unknown

DOM Properties

Methods

Events

CSS Custom Properties

CSS Shadow Parts

None