attr() function

This lesson demonstrates the usage of the attr().

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

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  ERROR
PrinceXML  OK
Antennahouse  OK
Weasyprint  ERROR
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>
    <meta name="author" content="Test Author">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>The top-left page header output must be "Named strings - string() function", retrieved from the "title" element:
      <code>&lt;title&gt;Named strings - string() function&lt;/title&gt;</code></p>
    <p>The top-center page header output must be "Test Author", retrieved from the "content" attribute of the meta tag:
      <code>&lt;meta name="author" content="Test Author"&gt;</code></p>

    <section title="Section One">
      <h1>Test Section 1</h1>
      <p>The top-right page header output must be "Section One", retrieved from the "title" attribute of the section start tag:
        <code>&lt;section title="Section One"&gt;</code></p>
    </section>
    <section title="Section Two">
      <h1>Test Section 2</h1>
      <p>The top-right page header output must be "Section Two", retrieved from the "title" attribute of the section start tag
        <code>&lt;section title="Section Two"&gt;</code></p>
    </section>
  </body>
</html>

Stylesheet

meta[name="author"] {
    string-set: author attr(content);
}

title {
    string-set: title content(text);
}

section {
    string-set: section attr(title);
    break-after: page;;
}

@page {
    size: A4;
    margin: 72px;

    @top-left {
        content: string(title);
        width: 33%;
        border: 1px solid blue;
    }
    @top-center {
        content: string(author);
        width: 33%;
        border: 1px solid blue;
    }
    @top-right {
        content: string(section);
        width: 33%;
        border: 1px solid blue;
    }
    @bottom-center {
        content: "- " counter(page) " -";
        width: 33%;
        border: 1px solid blue;
    }
}