Using set-content

This lesson demonstrates the usage of the set-content property and named strings.

Example taken from https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/named-strings/string-set-content.html

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  ERROR
Antennahouse  OK
Weasyprint  OK
PagedJS  ERROR
Typeset.sh  UNSUPPORTED
Vivliostyle  OK
BFO  ERROR
improper behavior
OK OK with issues Error Unsupported

HTML input

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Named strings - string() function</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Test</h1>
    <p>The top-center page header output must be "Chapter 1: Test~"</p>
    <p>The top-right page header output must be "First Letter: T"</p>
    <h1>More test</h1>
    <p>The top-center page header output must be "Chapter 2: More test~"</p>
    <p>The top-right page header output must be "First Letter: M"</p>
  </body>
</html>

Stylesheet

body {
    counter-reset: chapter;
}

h1 {
    counter-increment: chapter;
    string-set: header content(before) ": " content(text) content(after), FirstLetter content(first-letter);
    break-before: page;;
}

h1::before {
    content: "Chapter " counter(chapter);
    display: block;
}

h1::after {
    content: "~";
}

@page {
    size: A4;

    @top-center {
        content: string(header);
    }
    @top-right {
        content: "First Letter: " string(FirstLetter);
    }
    @bottom-center {
        content: "- " counter(page) " -";
    }
}