data-lorem prototype

Placeholder text via data attributes. Fill any element with lorem ipsum, specify word counts, sentence counts, or list items. Auto-detects language for CJK, Arabic, and Cyrillic corpuses.

Overview

The data-lorem attribute fills any text-containing element with placeholder text. Built-in corpuses for Latin, CJK, Arabic, and Cyrillic keep the browser bundle lean (~4KB) without requiring external dependencies.

<p data-lorem></p>

How It Works

  1. On DOMContentLoaded, finds all elements with data-lorem
  2. Parses the attribute value to determine word count, sentence count, or mode
  3. Detects the appropriate corpus from the element's lang attribute (or its ancestors)
  4. Fills the element's textContent (or innerHTML for list items)
  5. Marks the element with data-lorem-filled and translate="no"
  6. A MutationObserver watches for dynamically added elements

Attributes

Attribute Type Description
data-lorem string Controls output. See Values table below.
data-lorem-filled boolean Set automatically after content is injected. Used as CSS hook for wireframe integration.
data-lorem-init boolean Set automatically to prevent double-binding. Do not set manually.

Values

ValueResultExample
(empty)~50 words of lorem ipsum<p data-lorem></p>
5050 words<p data-lorem="50"></p>
3 sentences3 full sentences<p data-lorem="3 sentences"></p>
heading5 words (heading-length)<h2 data-lorem="heading"></h2>
5 items5 <li> elements (on <ul>/<ol>)<ul data-lorem="5 items"></ul>
cjkCJK placeholder corpus<p data-lorem="cjk"></p>
arabicArabic placeholder corpus<p data-lorem="arabic"></p>
cyrillicCyrillic placeholder corpus<p data-lorem="cyrillic"></p>

Word Count

Pass a number to get that many words.

<p data-lorem="50"></p>

Sentence Count

Use N sentences for full sentences (singular sentence also works).

<p data-lorem="3 sentences"></p>

Headings

Use heading for short, heading-length text (5 words).

<h2 data-lorem="heading"></h2>

List Items

On <ul> or <ol>, use N items to generate <li> elements.

    <ul data-lorem="5 items"></ul>

    Multi-language Support

    The corpus auto-detects from the lang attribute on the element or any ancestor. You can also force a specific corpus by name.

    Language detection
    Language codesCorpus
    ja, zh, koCJK (Chinese/Japanese/Korean)
    ar, fa, ur, heArabic
    ru, uk, bg, srCyrillic
    any other / noneLatin (default)

    <!-- Auto-detected from lang attribute --> <p lang="ja" data-lorem></p> <p lang="ar" data-lorem dir="rtl"></p> <p lang="ru" data-lorem></p> <!-- Explicit corpus override --> <p data-lorem="cjk"></p> <p data-lorem="arabic"></p> <p data-lorem="cyrillic"></p>

    Production Transition

    Replace the content and remove data-lorem. No structural changes needed.

    <!-- Prototype --> <p data-lorem="3 sentences"></p> <!-- Production: replace content, remove data-lorem --> <p>Our platform helps teams ship faster with modern tooling.</p>

    Wireframe Integration

    In data-wireframe="lo" mode, elements with data-lorem-filled get abstract text-block styling: extra letter-spacing and reduced opacity.

    <!-- In lo-fidelity wireframe, lorem text gets abstract appearance --> <html data-wireframe="lo"> <body> <p data-lorem></p> <!-- Text renders with extra letter-spacing and reduced opacity --> </body> </html>

    Dynamic Elements

    Elements added to the DOM after page load are automatically filled via a MutationObserver.

    // Dynamically added elements are auto-enhanced via MutationObserver const p = document.createElement('p'); p.dataset.lorem = '3 sentences'; document.body.appendChild(p); // p is filled with lorem text automatically

    Accessibility

    • Sets translate="no" on filled elements so translation tools skip placeholder text
    • Does not set aria-hidden — screen readers should still read placeholder content during testing to verify document structure
    • Filled list items use semantic <li> elements