link

PrintCSS

The string-set property and the string function

In today’s post, I want to show you how to use the string-set property and the string() function in your PrintCSS project.

With string-set, you can copy an element’s text content or attribute value to a named string (variable). You can use this named string in other elements with the help of the content property and the string() function.

One practical example is showing the current chapter title in the header of each page.

A sample page with the chapter title “Platea curae”
A sample page with the chapter title “Platea curae”

Let’s assume we have the following HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>The string-set property and the string() function</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Semper purus dolor</h1>
        <p>
            Semper purus dolor, in interdum imperdiet! Egestas eleifend conubia platea pellentesque nostra vitae ut nisi vestibulum pulvinar. Tempus elementum dapibus natoque primis lectus hendrerit ad phasellus potenti. Elementum dui fames laoreet proin neque platea taciti. Tortor, at aliquam mollis. Vivamus vehicula habitasse tincidunt aliquet himenaeos maecenas parturient fusce dictum. Tempor taciti auctor tempus taciti neque. Hac primis ante, viverra nam in! Magna gravida accumsan dis.
        </p>
        <p>
            Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.
        </p>
        <p>
            Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.
        </p>
        <h1>Platea curae</h1>
        <p>
            Platea curae; ultrices donec arcu sociis phasellus justo turpis ante interdum velit semper? Etiam natoque velit sem per? Habitant lobortis, blandit aliquet molestie congue metus eu venenatis mattis urna fermentum potenti. Molestie nascetur lectus leo. Adipiscing blandit tristique conubia commodo elementum rutrum vulputate. Consequat consectetur natoque diam pharetra, sociis vivamus fusce cubilia. Maecenas fringilla taciti condimentum litora. Rhoncus conubia facilisi suspendisse sociis habitasse ad penatibus iaculis ultricies montes. Dolor penatibus curae; molestie quam pellentesque rutrum. Porttitor praesent vulputate dictum bibendum lacus inceptos, tempor nam.
        </p>
        <p>
            Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.
        </p>
        <h1>Commodo</h1>
        <p>
            Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.
        </p>
        <p>
            Leo vivamus, convallis mauris primis. Quis netus eros, consequat metus ligula facilisis id primis in facilisis vehicula neque! Nisl quam dis quis pellentesque diam parturient sociis sed adipiscing. Sociosqu at aliquam viverra vehicula. Turpis maecenas nascetur facilisi? Potenti hendrerit sollicitudin mollis lorem fusce taciti molestie tempor mollis. Nulla semper quam cursus dictumst elementum fusce ridiculus amet sed primis nunc ipsum. Vel vel et ac a, nec nullam inceptos proin aliquet dignissim. Sociosqu scelerisque tristique orci posuere gravida massa? Sem cras aliquet, lectus class vulputate ullamcorper potenti eleifend dictumst cubilia.
        </p>
        <p>
            Maecenas porttitor parturient at. Neque euismod ipsum congue vulputate placerat. Enim vestibulum diam eu sociosqu felis sociis nascetur nascetur quam nibh rhoncus? Vehicula non egestas inceptos arcu ultrices feugiat aliquet ad. Ipsum venenatis hendrerit ligula! Aliquam ridiculus ultrices morbi magnis malesuada massa nulla consequat? Dis quam sociis phasellus nascetur egestas cursus parturient eget sollicitudin euismod non magnis. Fringilla eget vestibulum mauris montes, sociosqu sodales lacus! Habitasse est eleifend facilisi venenatis ac. At nunc dictumst nulla cursus bibendum nec fermentum ultrices etiam. Primis consectetur fames convallis lobortis! Fermentum.
        </p>
    </body>
</html>

And a basic CSS that defines the page size and margin via the @page rule. Additionally, we define that each H1 element should start on a new page. For the first H1 element, we do not want a page break as we would get an empty first page otherwise.

@page{
    size: A6;
    margin: 20mm;
}
h1{
  break-before:always;
}
h1:first-of-type{
  break-before:none;
}

Now we want to show the current chapter’s name (the content of the H1 element) as the header on each page.

For this, we first need to set our named string in the CSS:

@page{
    size: A6;
    margin: 20mm;
}
h1{
  break-before:always;
  string-set: chapterTitle content();
}
h1:first-of-type{
  break-before:none;
}

After that, we need to define the desired page margin box, and use that named string with the string() function.

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

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

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

h1:first-of-type{
  break-before:none;
}

The second parameter of the string() function defines whether you want to use the first or last named string on the page. This is an important setting if you have two H1 elements on one page and, for example, want to show the content of the last one. There are also other parameters you can pass. You find the documentation in the W3C working draft for CSS Generated Content for Paged Media Module.

Now you might ask yourself which rendering tools are supporting string-set and string().

Checking on printcss.live, it is supported by:

You can get the complete code on Github or view it directly on the PrintCSS Playground.