PatternFly Elements - Home PatternFly Elements

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

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:

Variable name Default value Region

Coming soon.