Readtime

article p {
  font-size: var(--rh-font-size-body-text-md, 1rem);
  line-height: var(--rh-line-height-body-text, 1.5);
  margin-block-end: 1rem;
}

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="Uses a CSS selector to target a content container. The component counts words and images from the target element to compute reading time.">

<rh-readtime images="" selector="#article-content">%t min read</rh-readtime>

<article id="article-content">
  <p>
    Design systems are a collection of reusable components, guided by clear standards,
    that can be assembled together to build any number of applications. They help teams
    build better products faster by making design reusable and development more consistent.
    A design system is more than a pattern library or a set of guidelines. It is a living,
    evolving ecosystem that supports both designers and developers in creating cohesive
    user experiences across products and platforms.
  </p>
  <p>
    The Red Hat Design System provides a set of web components built on open web standards.
    These components follow Red Hat brand guidelines and are designed to work across any
    web framework. They are built with accessibility in mind and support theming through
    design tokens. The system includes components for layout, navigation, content display,
    forms, and feedback. Each component is documented with usage guidelines, code examples,
    and accessibility considerations.
  </p>
  <p>
    Web components offer several advantages over traditional framework-specific components.
    They work natively in the browser without requiring a build step or framework dependency.
    They encapsulate styles and behavior using the Shadow DOM, preventing conflicts with
    the rest of the page. They can be used with any JavaScript framework or with no framework
    at all. This makes them ideal for design systems that need to support multiple teams
    using different technology stacks.
  </p>
  <img src="placeholder-600x300.svg" alt="Placeholder image" width="600" height="300">
  <p>
    Reading time estimation is a useful feature for content-heavy pages. It gives readers
    an expectation of how long an article will take to read, helping them decide whether
    to read now or save for later. Medium popularized this feature, and it has since become
    a common pattern on blogs and documentation sites. The algorithm accounts for both
    text content and images, since images require additional time to process and understand.
  </p>
</article>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Uses a CSS selector to target a content container. The component counts words and images from the target element to compute reading time." />
  <Readtime images selector="#article-content">%t min read</Readtime>
  <article id="article-content">
    <p>Design systems are a collection of reusable components, guided by clear standards,
      that can be assembled together to build any number of applications. They help teams
      build better products faster by making design reusable and development more consistent.
      A design system is more than a pattern library or a set of guidelines. It is a living,
      evolving ecosystem that supports both designers and developers in creating cohesive
      user experiences across products and platforms.</p>
    <p>The Red Hat Design System provides a set of web components built on open web standards.
      These components follow Red Hat brand guidelines and are designed to work across any
      web framework. They are built with accessibility in mind and support theming through
      design tokens. The system includes components for layout, navigation, content display,
      forms, and feedback. Each component is documented with usage guidelines, code examples,
      and accessibility considerations.</p>
    <p>Web components offer several advantages over traditional framework-specific components.
      They work natively in the browser without requiring a build step or framework dependency.
      They encapsulate styles and behavior using the Shadow DOM, preventing conflicts with
      the rest of the page. They can be used with any JavaScript framework or with no framework
      at all. This makes them ideal for design systems that need to support multiple teams
      using different technology stacks.</p>
    <img src="placeholder-600x300.svg" alt="Placeholder image" width="600" height="300" />
    <p>Reading time estimation is a useful feature for content-heavy pages. It gives readers
      an expectation of how long an article will take to read, helping them decide whether
      to read now or save for later. Medium popularized this feature, and it has since become
      a common pattern on blogs and documentation sites. The algorithm accounts for both
      text content and images, since images require additional time to process and understand.</p>
  </article>
);

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="The component uses the lang attribute to determine words-per-minute for the target language. The %t placeholder allows flexible positioning of the number within localized strings.">

<p lang="de"><rh-readtime word-count="1200">%t Minuten Lesezeit</rh-readtime></p>

<p lang="ja"><rh-readtime word-count="1200">約%t分で読めます</rh-readtime></p>

<p lang="zh"><rh-readtime word-count="1200">阅读时间约%t分钟</rh-readtime></p>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="The component uses the lang attribute to determine words-per-minute for the target language. The %t placeholder allows flexible positioning of the number within localized strings." />
  <p lang="de">
    <Readtime word-count="1200">%t Minuten Lesezeit</Readtime>
  </p>
  <p lang="ja">
    <Readtime word-count="1200">約%t分で読めます</Readtime>
  </p>
  <p lang="zh">
    <Readtime word-count="1200">阅读时间约%t分钟</Readtime>
  </p>
);

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="Combines word-count and image-count attributes to include image viewing time in the reading estimate.">

<rh-readtime word-count="1200" image-count="5">%t min read</rh-readtime>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Combines word-count and image-count attributes to include image viewing time in the reading estimate." />
  <Readtime word-count="1200" image-count="5">%t min read</Readtime>
);

article p {
  font-size: var(--rh-font-size-body-text-md, 1rem);
  line-height: var(--rh-line-height-body-text, 1.5);
  margin-block-end: 1rem;
}

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="With the images attribute, the component counts images in the container and adds time using Medium's weighting algorithm.">

<rh-readtime selector="#article-with-images" images="">%t min read</rh-readtime>

<article id="article-with-images">
  <p>
    This example enables the image weighting system. The component counts images in the
    target container and adds time based on Medium's algorithm. The first image adds 12
    seconds, the second adds 11, and so on down to 3 seconds per image for the 11th and
    beyond.
  </p>
  <img src="placeholder-600x200.svg" alt="First image" width="600" height="200">
  <img src="placeholder-600x200.svg" alt="Second image" width="600" height="200">
  <img src="placeholder-600x200.svg" alt="Third image" width="600" height="200">
  <p>
    With three images the algorithm adds 12 + 11 + 10 = 33 seconds of additional reading
    time on top of the word-based estimate.
  </p>
</article>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="With the images attribute, the component counts images in the container and adds time using Medium's weighting algorithm." />
  <Readtime selector="#article-with-images" images>%t min read</Readtime>
  <article id="article-with-images">
    <p>This example enables the image weighting system. The component counts images in the
      target container and adds time based on Medium's algorithm. The first image adds 12
      seconds, the second adds 11, and so on down to 3 seconds per image for the 11th and
      beyond.</p>
    <img src="placeholder-600x200.svg" alt="First image" width="600" height="200" />
    <img src="placeholder-600x200.svg" alt="Second image" width="600" height="200" />
    <img src="placeholder-600x200.svg" alt="Third image" width="600" height="200" />
    <p>With three images the algorithm adds 12 + 11 + 10 = 33 seconds of additional reading
      time on top of the word-based estimate.</p>
  </article>
);

article p {
  font-size: var(--rh-font-size-body-text-md, 1rem);
  line-height: var(--rh-line-height-body-text, 1.5);
  margin-block-end: 1rem;
}

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="When no selector is provided, the component reads from its parent element and counts words automatically.">

<article>
  <rh-readtime>%t min read</rh-readtime>
  <p>
    This shorter example demonstrates reading time when the component reads from its parent
    element automatically. No selector attribute is needed. The component will count all
    the words in this article element, including its own template text. This is the simplest
    way to use the component when it is placed directly inside the content container.
  </p>
</article>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="When no selector is provided, the component reads from its parent element and counts words automatically." />
  <article>
    <Readtime>%t min read</Readtime>
    <p>This shorter example demonstrates reading time when the component reads from its parent
      element automatically. No selector attribute is needed. The component will count all
      the words in this article element, including its own template text. This is the simplest
      way to use the component when it is placed directly inside the content container.</p>
  </article>
);

import '@rhds/elements/rh-readtime/rh-readtime.js';

<meta itemprop="description" content="Uses the word-count attribute to compute reading time from a static value without reading from a DOM container.">

<rh-readtime word-count="1200">%t min read</rh-readtime>

import { Readtime } from "@rhds/elements/react/rh-readtime/rh-readtime.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <meta itemprop="description" content="Uses the word-count attribute to compute reading time from a static value without reading from a DOM container." />
  <Readtime word-count="1200">%t min read</Readtime>
);