Adaptive Skeleton Text - nodependencies

Skeleton text implementation using CSS pseudo-elements and Unicode ideographic spaces for responsive width adaptation.

Markup

  <section>
    <h1>Normal Text</h1>
    <p>Sample text content to demonstrate normal paragraph styling.</p>
  </section>
  <section>
    <h1>Single Line Skeleton Text</h1>
    <p></p>
  </section>
  <hr>
  <section>
    <h1>Multi Line Skeleton Text (using <code>\A</code> in content)</h1>
    <p class="multiline"></p>
  </section>

Pseudo-element Content with Ideographic Spaces

Full-width Unicode characters (\3000) create adaptive skeleton text that responds to font-size changes without fixed widths.

box-decoration-break: clone ensures border-radius applies to each line fragment individually, preventing broken corners on wrapped text.

  p:empty:before {
    content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000";
    background-color: lightgray;
    white-space: break-spaces;
    word-break: break-all;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

Multi-line Skeleton with Line Breaks

Line feed character (\A) in content property creates multi-line skeleton text with white-space: break-spaces for proper line breaking.

  p.multiline:empty:before {
    content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\A\3000\3000\3000\3000\3000\3000\3000\3000\3000";
  }

<main>
  <section>
    <h1>Normal Text</h1>
    <p>Sample text content to demonstrate normal paragraph styling.</p>
  </section>
  <section>
    <h1>Single Line Skeleton Text</h1>
    <p></p>
  </section>
  <hr>
  <section>
    <h1>Multi Line Skeleton Text (using <code>\A</code> in content)</h1>
    <p class="multiline"></p>
  </section>
</main>
<style>
  main {
    display: grid;
    gap: 2rem;
    padding: 4rem 1rem 1rem;
    max-width: 600px;
    margin: 0 auto;
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  p {
    font-size: 16px;
  }

  p:empty:before {
    content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000";
    background-color: lightgray;
    white-space: break-spaces;
    word-break: break-all;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  p.multiline:empty:before {
    content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\A\3000\3000\3000\3000\3000\3000\3000\3000\3000";
  }
</style>
<script type="module">
    import {Pane} from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js';
    const elms = document.querySelectorAll('p');
    const root = document.querySelector("main");
    const pane = new Pane({
        container: root,
        title: 'Controls'
    });

    pane.addBinding({'font-size': 16}, "font-size", {min: 10, max: 30})
        .on("change", (e) => {
            elms.forEach(elm => {
                elm.style.fontSize = e.value + 'px';
            })
        });

    pane.addBinding({'line-height': 1.5}, "line-height", {min: 1, max: 3})
        .on("change", (e) => {
            elms.forEach(elm => {
                elm.style.lineHeight = e.value;
            })
        });
</script>