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>
CSS
@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; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)