🔠 CSS string-set — Complete Tutorial

🌐 What Is string-set?

The string-set property stores text from an element into anamed CSS string. This stored text can later be inserted elsewhere using thestring() function — most commonly in **print styles**, **running headers**, **footers**, and **paged media**.

>>“string-set captures text from your HTML and reuses it anywhere in CSS — perfect for print layouts.”

Note

✔ Works with paged media (books, PDFs, docs)
✔ Works with @page margin boxes
✔ Useful for repeating chapter titles, captions, labels

📦 Syntax

Basic Syntax

selector {
  string-set: name value;
}
PartMeaning
nameName of the string variable
valueText to store (from content(), attr(), or plain text)

🧠 How It Works

  • string-set stores text inside a named string.
  • string() retrieves that string somewhere else.
  • Often used in @page headers/footers.

📌 1. Capture Heading Text

Capture H1 text

h1 {
  string-set: chapterTitle content();
}

This stores the actual text of each <h1> element into a named string called chapterTitle.

📌 2. Use the Stored String in a Printed Header

Display stored string in page header

@page {
  @top-center {
    content: string(chapterTitle);
  }
}

Every printed page now shows the current chapter title at the top.

📌 3. Capture Attribute Values

Using attr()

img {
  string-set: captionText attr(alt);
}

Using string()

figure::after {
  content: string(captionText);
}

This auto-generates captions from alt text.

📌 4. Use Multiple Strings

Multiple stored strings

h1 {
  string-set: title content(), subtitle attr(data-subtitle);
}

📌 5. Capture Generated Content

Capture pseudo-element content

h2::before {
  content: "Section: ";
  string-set: sectionLabel content();
}

Stores the content produced by ::before.

📌 6. Running Footers (e.g., “Current Section”)

Footer using string()

@page {
  @bottom-left {
    content: string(sectionLabel);
  }
}

📌 7. Different Strings for Even/Odd Pages

Odd/even headers

@page :left {
  @top-left { content: string(chapterTitle); }
}

@page :right {
  @top-right { content: string(chapterTitle); }
}

🧪 Real-World Examples

1️⃣ Book Layout: Chapter Title on Each Page

Book-style running header

h1 {
  string-set: chapterTitle content();
}

@page {
  @top-center {
    content: string(chapterTitle);
  }
}

2️⃣ Automatic Figure Captions

Figure caption from alt

figure img {
  string-set: captionText attr(alt);
}

figure::after {
  content: "Figure: " string(captionText);
}

3️⃣ Dynamic Document Sections

Section headers

h2 {
  string-set: sectionName content();
}

@page {
  @top-right {
    content: string(sectionName);
  }
}

⚠️ Limitations

  • ❗ Browser support is limited — best in print engines (Paged.js, PrinceXML, Vivliostyle)
  • ❗ Only meaningful in paged media or advanced print styling
  • ❗ Cannot use strings like variables in normal layout (only in content)

Note

In normal screens, you may not see the effect unless using a paged CSS engine.

🔥 Summary

string-set is a powerful tool for creating professional print layouts, storing text, and generating running headers, captions, and document metadata entirely through CSS.

>>“Use string-set to automate text flow in printed and paged documents.”

Learn more →W3C Spec 📘