Named strings (set-content property)

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

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

Expected headers:

  • page #1: A-A
  • page #2: BAC
  • page #3: DDD

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  ERROR
Typeset.sh  UNSUPPORTED
Vivliostyle  OK
BFO  OK
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/a4.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Using String-set</h1>
    <div class="page">
        <h2>Heading A</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias in,
          provident quasi doloremque blanditiis itaque esse placeat maiores eveniet
          ipsa dolores, harum alias expedita distinctio neque asperiores
          accusantium, pariatur laboriosam. Deserunt accusamus corporis esse ex,
          sunt sint voluptatibus asperiores iusto voluptas repellat molestiae quis
          obcaecati?
        </p>
    </div>
    <div class="page">

        <p>hello world</p>
        <h2>Heading B</h2>
        <p>
          Quod distinctio iste dignissimos ullam perspiciatis numquam neque
          recusandae corrupti, similique voluptatem dolore nulla itaque eveniet?
          Delectus optio aliquam necessitatibus officiis eius!
        </p>
        <h2>Heading C</h2>
        <p>
          Autem perferendis voluptatibus, explicabo corporis doloremque ducimus
          illum cupiditate quibusdam voluptatem totam optio debitis ipsam quaerat
          consectetur dolores cum odio repellendus expedita! Quia et quo voluptate
          obcaecati necessitatibus inventore aspernatur nesciunt minima.
          Consectetur, voluptatem? Quam, doloribus animi porro veniam laudantium
          numquam accusantium quos enim. Rerum aliquid aliquam perferendis
          architecto autem laborum?
        </p>
    </div>
    <div class="page">
        <h2>Heading D</h2>
        <p>
          A dignissimos asperiores fugiat, fugit dolore, harum dolorem deleniti
          nulla nam, molestias dolorum error quos sapiente corrupti quidem! Nostrum
          voluptatum sed blanditiis? Delectus, totam? Maxime qui perspiciatis
          explicabo vel error distinctio sed doloremque rem vero dolorum, iure
          itaque quia, dolor dignissimos.
        </p>
        <p>
          Dolores, deleniti impedit! Atque autem omnis doloremque exercitationem.
          Facilis nobis dolorum quia aut doloremque voluptate excepturi fuga hic
          eius. Recusandae voluptates laboriosam exercitationem rem voluptatum?
          Obcaecati distinctio doloribus impedit dignissimos porro quia, reiciendis
          voluptatum ad eos. Id voluptatum soluta illo saepe repudiandae accusantium
          voluptatibus ratione veniam molestiae?
        </p>
        <p>
          Magnam perferendis tempora fuga molestiae quas, numquam cumque id porro
          iure fugiat ipsum in enim facilis? Nobis, repellat. Facilis, consequatur
          consectetur. Suscipit!
        </p>
        <p>
          Autem porro maxime quod facilis numquam ducimus repellendus officiis
          expedita dolore! Ipsam temporibus molestiae dolore assumenda beatae illo
          dolorem quidem praesentium doloribus.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet accusamus
          dolore libero, voluptas ullam ratione doloremque eius sunt iusto nam
          perferendis ut? Ducimus facilis magnam hic ut cupiditate numquam ea.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum expedita
          magnam, id vitae exercitationem enim voluptatibus quam quis aperiam
          delectus non nobis fugiat quod earum ea. Fugit vero nulla magni?
        </p>
    </div>
  </body>
</html>

Stylesheet

@page {
    size: A4; 
    margin: 20mm;

    @top-left {
        content: "first: " string(heading, first);
    }
    @top-center {
        content: "start: " string(heading, start);
    }
    @top-right {
        content: "last: " string(heading, last);
    }
    @bottom-left {
        content: "first-except: " string(heading, first-except);
    }
    @bottom-right {
        content: "Page " counter(page);
    }
}

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

.page {
    break-after: page;
}