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';

<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 = () => (
  <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';

<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 = () => (
  <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';

<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 = () => (
  <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';

<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 = () => (
  <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';

<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 = () => (
  <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';

<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 = () => (
  <Readtime word-count="1200">%t min read</Readtime>
);