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.

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:

• AH Formatter
• Prince (and, of course, the API Version DocRaptor)
• PagedJS
• PDFReactor
• Vivliostyle
• and WeasyPrint

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

The string-set property and the string() function was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the last few weeks, I am working on a WordPress Plugin, which allows you to generate PDFs from one or multiple posts/pages. Initially, it was designed to work only with my PrintCSS Cloud, which I introduced in the previous article, but now the plugin is opened to any rendering tool you want to use.

Installation and Setup

All you need to do to install the plugin is download it from Gumroad. You can pay what you want starting from $0!

Once you installed the ZIP file via the WordPress ‘Upload Plugins’ function or placed the extracted folder in your ‘wp-content/plugins’ directory, you need to activate the plugin.

After the installation, you will need to provide an API key or locally installed rendering tool command on the settings page under ‘Settings’ > ‘Magazine’.

On the settings screen, you find the following options.

• Rendering Tool: Depending on the filled API Key and Local Command Options, you see the supported rendering tools here. You need to use at least one of the API or the local command options for a rendering tool to appear in this selection.
• RapidAPI Key: To send the PrintCSS Cloud API request, you need to subscribe to a plan on RapidAPI. With this, you get the API key required to authenticate with the PrintCSS Cloud REST service. The PrintCSS Cloud supports the rendering tools WeasyPrint, PagedJS, and Vivliostyle.
• DocRaptor Key: To send the DocRaptor API request, you need to subscribe to a plan on docraptor.com. With this, you get the API key that is required to authenticate with the REST service.
• Typeset.sh Project Key & Project Token: To send the request to the typeset.sh API, you need to subscribe to a plan on typeset.sh. With this, you get the project key and token required to authenticate with their REST service.
• Local Command: If you have a PDF rendering tool installed locally, you can provide the command here, be aware that the tool needs to support getting the HTML via STDIN and needs to return the PDF via STDOUT.
• AH Formatter Example: /usr/AHFormatterV71_64/run.sh -x 4 -d @STDIN -o @STDOUT
• Prince Example: prince — no-warn-css — javascript -
• PDFreactor Example: cd /path/to/sh/script/ && ./pdfreactor.sh (Get the script on GitHub)

Change the Demo Theme and Add Multiple Themes

All magazine themes are placed in the ‘wp-content/magazine_themes’ folder and can be directly edited there. If you prefer editing your theme directly in the WordPress UI, you can do so under ‘Appearance’ > ‘Magazine’.

A magazine theme for PDF generation is using the following files. All of them are optional. If you use the magazine theme editor, all files will be generated even if you do not provide any content for some of them.

Besides editing the theme, you can also duplicate, upload and download themes from this section in the WordPress backend.

HTML

In the HTML section of the magazine theme editor, you can edit all HTML files.

• Prefix (prefix.html): The prefix HTML you can use for front covers or intros, basically anything which should be added only once at the beginning of the PDF. In the prefix, you can not use any placeholders.
• Post (post.html): The post HTML will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this HTML gets repeated five times. Within the post HTML, you can use any placeholders, for example, the {{title}} to always show the current Blogpost title.
• Page (page.html): The page HTML will be loaded whenever you want to render a PDF from a page. This file gets added once per selected page. So if you choose five pages, this HTML gets repeated five times. Within the page HTML, you can use any placeholders, for example, the {{title}} to always show the current page title.
• Postfix (postfix.html): The postfix HTML you can use for back covers or indexes, basically anything which should be added only once at the end of the PDF. In the postfix, you can not use any placeholders.

You can leave any of these HTML files empty if you do not need them. For example, if you do not need a cover, do not put content into the prefix HTML.

CSS

In the magazine theme editor’s CSS section, you can edit all CSS files of any theme.

• Main (style.css): The main CSS is loaded for any rendering you do. In the main CSS, you can not use any placeholders.
• Post (post.css): The post CSS will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this CSS gets repeated five times. Within the post CSS, you can use any placeholders, for example, the {{slug}} to get one class per Blogpost slug.
• Page (page.css): The page CSS will be loaded whenever you want to render a page PDF; this file gets added once per selected page. So if you choose five pages, this CSS gets repeated five times. Within the post CSS, you can use any placeholders, for example, the {{slug}} to get one class per page slug.

You can also leave any of these CSS files empty if you do not need them. For example, if you do not need a Blogpost specific CSS, do not put content into the post CSS file.

JavaScript

In the magazine theme editor’s JavaScript section, you can edit all JavaScript files of your theme. Be aware that some rendering tools only support HTML and CSS.

• Main (script.js): The main JavaScript is loaded for any rendering you do. In the main JavaScript, you can not use any placeholders.
• Post (post.js): The post JavaScript will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this JavaScript gets repeated five times. Within the post JavaScript, you can use any placeholders, for example, the {{slug}} to get one class per Blogpost slug.
• Page (page.js): The page JavaScript will be loaded whenever you want to render a page PDF; this file gets added once per selected page. So if you choose five pages, this JavaScript gets repeated five times. Within the post JavaScript, you can use any placeholders, for example, the {{slug}} to get one class per page slug.

You can leave any of these JavaScript files empty if you do not need them. For example, if you do not need a Blogpost specific JavaScript, do not put content into the post JavaScript file.

The Placeholders

The placeholders {{slug}}, {{title}}, {{feature_image}} and {{content}} are for the post/page slug, title, feature image and content. Additionally you can use the placeholders {{author}}, {{date}}, {{date_gmt}}, {{excerpt}}, {{status}}. If you need to show the date of the post/page in a different format you can use the placeholders {{year}}, {{month}}, {{day}}, {{hour}}, {{minute}}.

Please be aware that images need to be available via a public URL for the APIs to use them.

ACF is also supported. Just add {{ACF_YOUR_FIELD_NAME}}. Important: use the name, not the label!

The Widget

If your WordPress theme support widgets, you can configure a simple PDF rendering widget for your frontend. The widget options are the title of your PDF rendering link and the magazine theme you want to render the PDF with. This way, you allow your users to generate PDFs anytime they want to.

Shortcode

You can also use a shortcode to display a link to render the PDF in any location of your post or page.

The primary usage is just the tag and an attribute that defines the theme [magazine theme=”Demo”]. If you also want to change the text of the link, you can pass it with [magazine theme=”Demo” text=”Click here for PDF Version”].

Backend and Bulk PDF Rendering

When you want to render a PDF from one or multiple pages/blog posts, just navigate to the ‘All Posts’ or ‘All Pages’ sites in the backend. Select the pages/posts you want to have in your PDF and click on the ‘Bulk Actions’ dropdown. Depending on your magazine themes, you will see one or multiple entries like ‘Render PDF with Demo Theme’, select the theme you like and click on apply. Currently, the rendering process is always synchronous, so you will need to wait for the API/local tool to answer.

The resulting PDF is stored in the Media Library. It is also offered to you for downloading in a notification on the page where you started the rendering process.

The plugin is currently in alpha status, and I am looking forward to your feedback and ideas on how to improve it.

Lastly, again the link for you to download the plugin: Magazine (gumroad.com).

Magazine the WordPress Plugin for PrintCSS was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today I want to talk to you about my latest project, PrintCSS Cloud, an HTML to PDF REST API. Another HTML to PDF API you might ask, yes! Other APIs usually lack even minimal CSS Paged Media support. Some of them support the @page rule and nothing else. PrintCSS Cloud supports most of the features defined in CSS Paged Media. This works because there is not only a headless Chromium used to generate the PDFs but three of the most advanced OpenSource rendering tools, WeasyPrint, PagedJS, and Vivliostyle!

The Print CSS features covered thanks to these renderers are:

• Running Headers and Footers: This feature is supported by two of the three rendering tools, WeasyPrint and PagedJS. Have a look at a sample document on printcss.live.
• Counters and Cross References: CSS counters and the target-counters property can be used with WeasyPrint and Vivliostyle; again, there is a sample document on printcss.live.
• Page Margin Boxes: 16 Page Margin Boxes are waiting for your content in all three rendering tools, have a look on printcss.live to see how this is working.
• Footnotes: Does your PDF need footnotes? Then it would be best if you rendered with Vivliostyle; this renderer offers basic footnote support. See a sample on the PrintCSS Playground.
• Page Selectors and Page Breaks: The best support for page selectors like @page:blank you get with WeasyPrint, but no worries, the other tools support the most selectors too! See it in action on the PrintCSS Playground.
• JavaScript Support: PagedJS and Vivliostyle both handle JavaScript just like your browser would do. Why? Because they also use a headless Chromium in the background but have a layer on top to support the modern CSS Paged Media features.

The API is currently in alpha status, and I would really appreciate your feedback! Till the final Go-Live, I only have a free plan including 500 requests per month, which should be more than enough to give you an idea of the possibilities and test the API. If you still need more requests for testing, please let me know.

But now, let us see how to work with the API. To send a request to the API, you need to subscribe to a plan on RapidAPI. With this, you get the API key that is required to authenticate with the REST service.

A simple request with HTML and CSS

To create a PDF from your HTML, you need to pass both HTML and CSS code in a JSON structure as the body of the POST request to the API. The JSON structure you need to send should look like the following:

{
	"html": "",
	"css":  ""
}

Now let us assume you have the following HTML and CSS code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Basic Example</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
     <h1>Hello PrintCSS Cloud!</h1>
    </body>
</html>

The style.css, mentioned in the HTML code, only sets the color of the H1 element to blue.

h1{  color:blue; }

You will only need the HTML, which is in between the BODY tag. The rest can be skipped. So the same content in your JSON structure would look like this:

{
	"html": "<h1>Hello PrintCSS Cloud!</h1>",
	"css":  "h1{ color:blue; }"
}

All you need to do to get the PDF is to send one POST request to the API and not forget to add your RapidAPI authentification key.

curl --location --request POST 'https://printcss-cloud.p.rapidapi.com/render' \
--header 'x-rapidapi-host: printcss-cloud.p.rapidapi.com' \
--header 'x-rapidapi-key: YOUR_API_KEY' \
--data-raw '{
    "html": "<h1>Hello PrintCSS Cloud!</h1>",
    "css":  "h1{ color:blue; }"
}'

The same request in PHP would look like this:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://printcss-cloud.p.rapidapi.com/render',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS =>'{
 "html": "<h1>Hello PrintCSS Cloud!</h1>",
 "css":  "h1{ color:blue; }"
}',
  CURLOPT_HTTPHEADER => array(
    'x-rapidapi-host: printcss-cloud.p.rapidapi.com',
    'x-rapidapi-key: YOUR_API_KEY'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

and in JavaScript:

var data = "{\r\n \"html\": \"<h1>Hello PrintCSS Cloud!</h1>\",\r\n \"css\":  \"h1{ color:blue; }\"\r\n}";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://printcss-cloud.p.rapidapi.com/render");
xhr.setRequestHeader("x-rapidapi-host", "printcss-cloud.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "YOUR_API_KEY");

xhr.send(data);

As the PrintCSS Cloud API offers the three rendering tools WeasyPrint (default), PagedJS, and Vivliostyle. You can change the tool within your request’s body JSON.

{
	"html": "<h1>Hello PrintCSS Cloud!</h1>",
	"css":  "h1{ color:blue; }",
	"options": {
		"renderer": "vivliostyle"
	}
}

As you see in the above request body, the renderer needs to be provided in lowercase. This request would now render the PDF with Vivliostyle instead of the standard WeasyPrint.

Add JavaScript

PagedJS and Vivliostyle both handle JavaScript just like your browser would do. WeasyPrint does not support JavaScript, so if you pass the javascript key in the request’s body, the default renderer changes to PagedJS. If you pass JavaScript in the HTML directly, you would need to change the renderer yourself, as shown above.

To send JavaScript, either you directly put it in a SCRIPT tag within your HTML or add it in the JavaScript section within the JSON body.

{
	"html": "<h1 id='js'>Hello PrintCSS Cloud!</h1>",
	"css":  "h1{ color:red; }",
	"javascript": "document.getElementById('js').style.backgroundColor='blue';"
}

The above JS code should set the background color of the header element to blue. Compared to the samples before, the text color in this one got changed to red.

The request looks the same as for the simple HTML and CSS sample just that we added the JavaScript:

curl --location --request POST 'https://printcss-cloud.p.rapidapi.com/render' \
--header 'x-rapidapi-host: printcss-cloud.p.rapidapi.com' \
--header 'x-rapidapi-key: YOUR_API_KEY' \
--data-raw '{
	"html": "<h1 id='\''js'\''>Hello PrintCSS Cloud!</h1>",
	"css":  "h1{ color:red; }",
	"javascript": "document.getElementById('\''js'\'').style.backgroundColor='\''blue'\'';"
}'

Include Images and Fonts without using external URLs

There are two ways to include your images or fonts in the PDF either you have them available via a public URL or provide a base64 encoded ZIP file within the requests body. The ZIP file is the preferred way as you do not need to provide your assets elsewhere. The API supports the following file types for images:

• gif
• jpeg
• jpg
• png
• svg
• bmp
• tif
• tiff

Next to images, the API also supports CSS, JavaScript, and custom Fonts in the assets ZIP if they have one of the file types below:

• css
• js
• woff
• ttf
• otf

You can reference your ZIP file’s content with relative links inside the HTML, CSS, and JavaScript code that you provide in the request body. Let us say you have a base64 encoded ZIP containing three images, tree.png, lake.png, and mountain.png, and you want to show them in your PDF. The requests JSON body would look like the following:

{
 "css": "body{ color:red; } img{display:block;width:auto;height:400px;border:4px solid green;}",
 "html": "<h1>Hello PrintCSS Cloud</h1><p>Here is a picture of a tree:</p><img src='tree.png'/><p>and a lake:</p><img src='lake.png' /><p>and we also have a picture of a mountain for you:</p><img src='mountain.png' />",
 "assets": "BASE64_ENCODED_ZIP_FILE_CONTAINING_THE_ASSETS"
}

Sending this request works again the same as mentioned before, so I skip that part here and just show you a screenshot of the resulting PDF.

Dynamic Content

The PrintCSS Cloud API supports the templating engine Twig for your HTML content. So you can add some dynamic content like the date and time of the PDF rendering or reformat some content, for example, to uppercase. For the full details of Twig’s possibilities, please check their documentation.

A small example of what is possible can be seen in the requests JSON body below.

{
 "css": "body{ color:red; }",
 "html": "Hello PrintCSS Cloud<br/>This document was rendered on {{ 'now'|date(timezone='Europe/Paris') }}<br/>{% apply upper %}This text becomes uppercase{% endapply %}"
}

Look at the HTML there are two parts in brackets, the first one will print the current date and time, and the second will transform the text to uppercase.

Templating

Thanks to Twig, you can also render the same HTML multiple times with different data. Let’s say when you want to create business cards for your whole team or create multiple bills within one document.

In the JSON body below, you see how to create business cards for 3 different people. The HTML contains placeholders like {{FirstName}} which appear as keys in the single data objects. For each data object, the HTML gets rendered once.

{
 "css": "@page{size:3.5in 2in;marks:crop;bleed:0.125in;margin:0.25in;}@page back{background:rgb(188,11,6);background-image:url(https://www.html2pdf.guru/assets/img/html2pdf.guru.png);background-position:center;background-repeat:no-repeat;margin:0;}body{font-size:10pt;}b{color:rgb(188,11,6);font-size:1.5rem;}.head{display:inline-block;margin-bottom:.5rem;}.foot{display:inline-block;margin-top:.75rem;border-left:.25rem solid rgb(188,11,6);padding-left:.5rem;}.break{page:back;page-break-after:always;break-after:always;}",
 "html": "<div class='break'></div><span class='head'><b>{{FirstName}} {{LastName}}</b><br />{{Title}}</span><br />{{EMail}}<br />Mobile {{Phone}}<br />www.example.com<br /><span class='foot'>Example Company<br />Busystreet 5 &amp;amp;amp;amp;amp;middot; 00001 Gotham</span>",
 "data": [
  {"FirstName": "Fabien", "LastName": "Sample", "Title": "Senior Developer", "EMail": "f.sample@example.com", "Phone": "+49 1234 4444 5555"},
  {"FirstName": "Martin", "LastName": "Muster", "Title": "Junior Developer", "EMail": "m.mustermann@example.com", "Phone": "+49 1234 4444 5566"},
  {"FirstName": "Andreas", "LastName": "Doe", "Title": "CFO", "EMail": "a.doe@example.com", "Phone": "+49 1234 4444 5577"}
 ]
}

The result is an excellent PDF with all the required business cards!

Asynchronous Requests

All you need to do to send the request asynchronous is set sync to false in the requests body JSON. Here is an example of how you can do this:

{
 "css": "body{ color:red; }",
 "html": "Hello PrintCSS Cloud",
 "options": {
  "sync": "false"
 }
}

The response to such an API request will be a JSON with the pdfid:

{
 "pdfid": "OqE89kpPy7LDdwmLza1YKXAxljVwBJ"
}

To check your PDF rendering request status, you can pass this JSON as a request body to the API. So your request body looks exactly like the response:

{
 "pdfid": "OqE89kpPy7LDdwmLza1YKXAxljVwBJ"
}

As a result, you either get the PDF if the rendering is finished. Or a JSON object telling you your rendering request is still open, in progress, or ran into an error. A sample of such a return can be seen below.

{
 "pdfid": "OqE89kpPy7LDdwmLza1YKXAxljVwBJ",
 "status": "in_progress",
 "message": "PDF rendering is currently in progress"
}

In the end, I just wanted to say again that I would really appreciate your feedback! Let me know what you think about the API, how your testing went, and what should be improved or added in the comments below.

Introducing PrintCSS Cloud was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

The HTML code is tiny. All we need is a div element for the circle and some elements for the black vertical lines. I decided to use 25 list elements for the lines.

<ul class="flex-container">
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
  <li class="flex-item"></li>
</ul>
<div class="circle"></div>

The CSS code is equally easy. First, let’s decide on a font for the planet name and number in the footer. Then we define the page size, margin, and background color.

The name and number get added via the bottom left and right page margin boxes.

@import url(https://medium.com/'https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
  
@page{
  size:30cm 40cm;
  background-color:rgb(233,227,213); 
  margin:1cm 1cm 4cm 1cm;
  
  
  @bottom-left{
    content:"06";
    font-size:64pt;
    font-weight:bold;
    font-family: 'Roboto', sans-serif;
  }
  
  @bottom-right{
    content:"Saturn";
    text-transform:uppercase;
    font-size:64pt;
    font-weight:bold;
    font-family: 'Roboto', sans-serif;
  }
}

Now all that’s left is designing the lines and the circle. The UL element gives a display property of flexbox and set justify-content to space between so the lines are equally distributed.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between; 
}

The LI elements, so the lines themselves, get their background color and size.

.flex-item {
  background:black;
  width:.5cm;
  height:34cm;
}

In the circle, we position absolute in the center. Why do we position it 4 cm from the left? Because left and right, we have a page margin of 1 cm, and the circle should be 20 cm wide. So it is 30 cm (page width) — 2 cm (page margins) — 20 cm (circle width) = 8 cm / 2 (left and right).

.circle{
  position:absolute;
  left:4cm;
  top:6cm;
  width:20cm;
  height:20cm;
  border-radius:100%;
  background-color:rgb(249,177,73);
}

You can try the code directly on the PrintCSS Playground or view it on GitHub.

To change from Saturn to Earth, we need to change the footer text, number, and circle color.

@bottom-left{
  content:"03";
  font-size:64pt;
  font-weight:bold;
  font-family: 'Roboto', sans-serif;
}
  
@bottom-right{
  content:"Earth";
  text-transform:uppercase;
  font-size:64pt;
  font-weight:bold;
  font-family: 'Roboto', sans-serif;
}

The code for that is also available via Github and printcss.live. You can watch me recreate both of the Posters on YouTube too.

PrintCSS: Create Planet Posters was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bauhaus 1923

If you look at the result above you, see that this poster will be relatively easy to recreate with CSS. All you need is a header, three circles in the center, placed on top of each other, and four smaller circles below.

The first thing to look at is the HTML structure. All you will need are two wrapper divs containing the div elements for the single circles.

<div class="wrapper">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
</div>
  
<div class="foot_wrapper">
  <div><div class="c1"></div></div>
  <div><div class="c2"></div></div>
  <div><div class="c3"></div></div>
  <div><div class="c4"></div></div>
</div>

The header will be directly set in the CSS code, so there is no need to create any HTML element.

Now in the CSS, let’s first concentrate on the header. As a font, I chose Catamaran, but you can take any other font too. Next, you should define the poster’s size, background color, and page margins. There will be a bigger margin on the top cause the header needs some space.

@import url(https://medium.com/%E2%80%98https://fonts.googleapis.com/css2?family=Catamaran:wght@800;900&display=swap');

@page{
 size: 30cm 40cm;
 background-color:rgb(243,244,239);
 margin:4cm 2cm 2cm 2cm;
}

You can add the text for the header in the top left and right page margin boxes. This code belongs inside the @page rule.

@top-left{
  content:"Bauhaus"; 
  font-family: 'Catamaran', sans-serif;
  font-size:48pt;
  font-weight:bold;
}

@top-right{
  content:"1923";
  font-size:24pt;
  font-family: 'Catamaran', sans-serif;
  font-weight:bold;
}

If you render the code now, you will see that only the border below the header and the circles are missing.

The border can be set directly on the body element as the page margin boxes surround the body.

body{
  border-top:8px solid black;
}

Before you continue adding the circles, let us define their sizes. As the poster itself has a width of 30 cm and 2 cm of space on each side, the maximum for the outer circle will be 26 cm. This example’s inner circles are each 4 cm smaller than their parent, so 22 cm and 18 cm. For the footer, let us consider a circle size of 4 cm.

The wrapper for the big circles should also have 2 cm as the top margin, so the circles do not directly start at the body’s border. Additionally, the plan is to position the circles absolute, so you should make the wrapper relative.

.wrapper{
  margin-top:2cm;
  position:relative;
}

As you can see in the HTML structure above, the big and small circles share the same class names. This is done because they should get the same colors. Only the last small circle has another color, the black from the header. This means defining the background color and border-radius within the c1, c2, c3, and c4 classes and the position we define specific to the surrounding wrapper.

The CSS for the colors is:

.c1{
  background-color:rgb(239,152,1);
  border-radius:100%;
}
.c2{
  background-color:rgb(235,89,36);
  border-radius:100%;
}
.c3{
  background-color:rgb(230,29,42);
  border-radius:100%;
}
.c4{
  background-color:black;
  border-radius:100%;
}

Now let us give all the small circles in the footer wrapper their size of 4 cm by 4 cm and render the PDF again.

.foot_wrapper .c1,
.foot_wrapper .c2,
.foot_wrapper .c3,
.foot_wrapper .c4{
  width:4cm;
  height:4cm;
}

As you can see in the PDF screenshot, the circles are below each other and not in one line at the document’s bottom. We will take care of this after the positioning of the big circles.

The first or outer circle will get the 26 cm as size:

.wrapper .c1{
  position:absolute;
  width:26cm;
  height:26cm;
}

Circles two and three will get their respective size and move from top and left accordingly to fit in the middle of the outer circle.

.wrapper .c2{
    position:absolute;
    top:2cm;
    left:2cm;
    width:22cm;
    height:22cm;
}

.wrapper .c3{
    position:absolute;
    top:4cm;
    left:4cm;
    width:18cm;
    height:18cm;
}

The only thing left now is positioning the small circles in a row below the big circle. You can use a flexbox for this and use justify-content to spread the elements equally.

.foot_wrapper{
  position:relative;
  top:28cm;
  display:flex;
  justify-content: space-between; 
 }

The result of the above code will give you the desired PDF. You can directly open this code on the PrintCSS playground or view it on Github.

PrintCSS: Create a Bauhaus Poster with the help of HTML and CSS was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

As in all other articles, we will use printcss.live to create the PDF so that there is no need to install any rendering tool on your machine. Also below example is optimized and tested with WeasyPrint; nevertheless, it also works fine with most other rendering tools on the website.

The goal is a certificate PDF that looks like this article’s main image, which you see below.

Let us start with the HTML structure and then move to the CSS part. For the structure, we will need an area for the pattern which surrounds the content area. As there will be another border inside the pattern area, we will need another div inside the content, which I called ‘inner-content’ in this example. Inside this inner content element, we finally add the text itself, starting with the main heading ‘Certificate’. The sub-heading ‘of Excellence’ and additional information about the participant, course, and date follows the main title.

<div class="border-pattern">
 <div class="content">
  <div class="inner-content">
   <h1>Certificate</h1>
   <h2>of Excellence</h2>
   <h3>This Certificate Is Proudly Presented To</h3>
   <p>Jane Doe</p>
   <h3>Has Completed</h3>
   <p>PrintCSS Basics Course</p>
   <h3>On</h3>
   <p>Feburary 5, 2021</p>
   <div class="badge">
   </div>
  </div>
 </div>
</div>

Now let us have a look at the CSS code. First, we start with the page size A4 as landscape and the outer border.

@page{
 size:A4 landscape;
 margin:10mm;
}

body{
 margin:0;
 padding:0;
 border:1mm solid #991B1B;
 height:188mm;
}

We set the body element’s height to 188mm because the A4 page in landscape mode has a height of 210mm, from which we need to subtract the 10mm margin (top + bottom = 20mm) and the border 1mm (again top and bottom = 2mm).

As the outside border is ready, we can have a look at the pattern now. For the pattern, we will use one of the fantastic SVG patterns from heropatterns.com. At the beginning of the article, the result picture shows us that the pattern is above the outside border on the page’s top and bottom. On the left and right, the outer border is visible.

We position the pattern div absolute, move it in from the left by 4mm, and move it outside the body by setting the top to -6mm. The height and width need to consider the wanted element size. The width is 297mm (A4 size) minus 20mm page margin minus 2mm border from the pattern element minus 8mm from the left and right. The height is 210mm (A4 size) minus 20mm margin minus 2mm border from the pattern element plus 12mm as it should be bigger than the body. Lastly, we set the background color and background image, which is copied from the hero patterns.

.border-pattern{
 position:absolute;
 left:4mm;
 top:-6mm;
 height:200mm;
 width:267mm;
 border:1mm solid #991B1B;
 /* http://www.heropatterns.com/ */
 background-color: #d6d6e4;
 background-image: url(https://medium.com/"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%200h16v2h-6v6h6v8H8v-6H2v6H0V0zm4%204h2v2H4V4zm8%208h2v2h-2v-2zm-8%200h2v2H4v-2zm8-8h2v2h-2V4z'%20fill='%23991B1B'%20fill-opacity='1'%20fill-rule='evenodd'/%3E%3C/svg%3E");
}

The result should look like this, depending on the pattern you choose.

Now we will have to style the content element. Again this needs to be positioned absolute, and as the pattern is right now taking the whole space, this content element defines the size of the surrounding pattern.

For this example, let’s give the pattern a size of 10mm and close the pattern area with a border of 1mm. Considering the width of the pattern element 267mm, the content’s width would be 267mm minus 20mm (left and right) minus 2mm (for the border). The content’s height would be 200mm minus 20mm (top and bottom) minus 2mm (for the border). As we want to put our content inside this div element, we also set the background color to white.

.content{
 position:absolute;
 left:10mm;
 top:10mm;
 height:178mm;
 width:245mm;
 border:1mm solid #991B1B;
 background:white;
}

If we render this now, we already see the basic layout of our certificate.

But if you look at the result image again, there is another border before we can start with the actual content, and that’s why we have the inner content element. Here we set another 1mm border and a 4mm margin to have some white space between the border and the pattern area. For the content itself, we place a padding of 10mm, and as we want the element to take the entire space, we set the height. The height of 148mm is the 178mm (of the content element) - 20mm (padding-top and bottom) - 8mm (margin-top and bottom) - 2mm (border-top and bottom).

.inner-content{
 border:1mm solid #991B1B;
 margin:4mm;
 padding:10mm;
 height:148mm;
 text-align:center;
}

So now all the fancy content surrounding is done.

The main header is all uppercase, so we use ‘text-transform’ to achieve this. Additionally, we change the font size and set the margin-bottom to zero, so the subtitle is closer to the header.

The subtitle gets a padding-bottom of 1mm to keep some space between the text and the border underline below. We use a pseudo-element for the subtitle to add a second underline, again via the border-bottom property.

The section titles in our example are done with the H3 element and have just some margin adjustments.

h1{
 text-transform:uppercase;
 font-size:48pt;
 margin-bottom:0;
}

h2{
 font-size:24pt;
 margin-top:0;
 padding-bottom:1mm;
 display:inline-block;
 border-bottom:1mm solid #991B1B;
}

h2::after{
 content:"";
 display:block;
 padding-bottom:4mm;
 border-bottom:1mm solid #991B1B;
}

h3{
 font-size:20pt;
 margin-bottom:0;
 margin-top:10mm;
}

p{
 font-size:16pt;
}

So what is missing? The badge! Let’s take a badge icon from heroicons.com and use a URL-encoder for SVG to generate the background image code. The badge size should be 40mm by 40mm, and we position it in the right bottom corner.

.badge{
 width:40mm;
 height:40mm;
 position:absolute;
 right:10mm;
 bottom:10mm;
 background-image:url(https://medium.com/"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke='currentColor'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='M9%2012l2%202%204-4M7.835%204.697a3.42%203.42%200%20001.946-.806%203.42%203.42%200%20014.438%200%203.42%203.42%200%20001.946.806%203.42%203.42%200%20013.138%203.138%203.42%203.42%200%2000.806%201.946%203.42%203.42%200%20010%204.438%203.42%203.42%200%2000-.806%201.946%203.42%203.42%200%2001-3.138%203.138%203.42%203.42%200%2000-1.946.806%203.42%203.42%200%2001-4.438%200%203.42%203.42%200%2000-1.946-.806%203.42%203.42%200%2001-3.138-3.138%203.42%203.42%200%2000-.806-1.946%203.42%203.42%200%20010-4.438%203.42%203.42%200%2000.806-1.946%203.42%203.42%200%20013.138-3.138z'%20/%3E%3C/svg%3E");
}

We render the PDF one last time and have our final result! If you want to get the complete code, have a look in my GitHub repository or directly check it out on printcss.live!

PrintCSS: Create your Certificate PDFs with HTML and CSS was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ace of Spades

Let us start with the ace of spades. As HTML, we create two divs for the front and backside. This will be two pages in the result PDF. Both wrapper divs for the pages contain another div with the actual page content. In the front side div, we directly add the content ‘♠’, the back side div will get a lovely pattern from Hero Patterns, so all we need in HTML is the empty container.

<div class="front">
   <div class="content">♠</div>
</div> 
<div class="back">
   <div class="design"></div>
</div>

Now to the more exciting part, the CSS. There are many different sizes for playing cards. In this sample, we will go with 63.5mm x 88.8mm.

To do so in CSS, we need to use the @page rule and define the size. Additionally, I will also define a bleed, crop marks, and margin for the pages. For the HTML body, let us also set padding and margin to zero.

@page{
 size:63.5mm 88.8mm;
 marks:crop;
 bleed:5mm;
 margin:5mm;
}

body{
 padding:0;
 margin:0;
}

I will use WeasyPrint on printcss.live to render the PDF, and if you check the result, we get only one page. So the next thing we need to do is put the front and back div on separate pages by using the named pages.

.front{
 page: front;
}

.back{
 page: back;
}

This way, we defined a named page “front” for the div with the class “front” and an own page for the div with the class “back” too.

If we render the PDF again, we will now see two pages.

Next, let us focus on the pattern on the backside. As mentioned above, I want to use some nice Hero Pattern for this. The pattern we will surround by a border to get the typical playing card look.

.design{
 border:1mm solid rgb(188, 11, 6);
 width:51.5mm;
 height:76.8mm;
 background-color: #fdb9b8;
 background-image: url(https://medium.com/"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cpath%20fill='%23bc0b06'%20fill-opacity='0.97'%20d='M0%2017.83V0h17.83a3%203%200%200%201-5.66%202H5.9A5%205%200%200%201%202%205.9v6.27a3%203%200%200%201-2%205.66zm0%2018.34a3%203%200%200%201%202%205.66v6.27A5%205%200%200%201%205.9%2052h6.27a3%203%200%200%201%205.66%200H0V36.17zM36.17%2052a3%203%200%200%201%205.66%200h6.27a5%205%200%200%201%203.9-3.9v-6.27a3%203%200%200%201%200-5.66V52H36.17zM0%2031.93v-9.78a5%205%200%200%201%203.8.72l4.43-4.43a3%203%200%201%201%201.42%201.41L5.2%2024.28a5%205%200%200%201%200%205.52l4.44%204.43a3%203%200%201%201-1.42%201.42L3.8%2031.2a5%205%200%200%201-3.8.72zm52-14.1a3%203%200%200%201%200-5.66V5.9A5%205%200%200%201%2048.1%202h-6.27a3%203%200%200%201-5.66-2H52v17.83zm0%2014.1a4.97%204.97%200%200%201-1.72-.72l-4.43%204.44a3%203%200%201%201-1.41-1.42l4.43-4.43a5%205%200%200%201%200-5.52l-4.43-4.43a3%203%200%201%201%201.41-1.41l4.43%204.43c.53-.35%201.12-.6%201.72-.72v9.78zM22.15%200h9.78a5%205%200%200%201-.72%203.8l4.44%204.43a3%203%200%201%201-1.42%201.42L29.8%205.2a5%205%200%200%201-5.52%200l-4.43%204.44a3%203%200%201%201-1.41-1.42l4.43-4.43a5%205%200%200%201-.72-3.8zm0%2052c.13-.6.37-1.19.72-1.72l-4.43-4.43a3%203%200%201%201%201.41-1.41l4.43%204.43a5%205%200%200%201%205.52%200l4.43-4.43a3%203%200%201%201%201.42%201.41l-4.44%204.43c.36.53.6%201.12.72%201.72h-9.78zm9.75-24a5%205%200%200%201-3.9%203.9v6.27a3%203%200%201%201-2%200V31.9a5%205%200%200%201-3.9-3.9h-6.27a3%203%200%201%201%200-2h6.27a5%205%200%200%201%203.9-3.9v-6.27a3%203%200%201%201%202%200v6.27a5%205%200%200%201%203.9%203.9h6.27a3%203%200%201%201%200%202H31.9z'%3E%3C/path%3E%3C/svg%3E");
}

You may ask yourself now why 51.5mm width and 76.8mm height if the card dimensions are 63.5mm x 88.8mm.

First, we set a margin of 5mm in the @page rule so the card will have white space around the pattern. Also, as you see in the code above, the border around the pattern is 1mm. So the width would be 63.5mm - (5mm * 2) - (1mm *2), which results in 51.5mm. The same calculation for the height leaves us with 76.8mm for the back side pattern.

Next, let’s look at the front side, we need to have the ♠ in the center. Also, if you look at other playing cards, they have the A for the ace of spades and the ♠ symbol on the top left corner and on the bottom right corner rotated by 180 degree.

To add these elements, we can make use of the page margin boxes. We will use ‘@top-left-corner’ for the ‘A’ and ‘@left-top’ ♠ for the top left corner. Similar to the right bottom corner, here we use ‘@bottom-right-corner’ and ‘@right-top’.

To fit all of that information in the page margin boxes, we need to increase their size. In the @page rule, we defined a margin of 5mm so the boxes have a width of 5mm, which will be too small for our content. Gladly we already defined a named page for the front div. This named page will get its own margin now.

@page front{
 margin:15mm;
}

But that also means that the div with the class ‘content’ needs to be smaller than the back side pattern. The calculation for its size is the same as the one above, just that we have a 15mm instead of 5mm margin now.

The content ♠ should be centered, so let’s use the div height as line-height and set the CSS property ‘text-align’ to ‘center’.

.content{
 border:1mm solid rgb(188, 11, 6);
 color:rgb(188, 11, 6);
 width:31.5mm;
 height:56.8mm;
 line-height:56.8mm;
 text-align:center;
 font-size:96pt;
}

As the last step, the page margin boxes are remaining. Let us start with the top left corner of the card. Within the ‘@page front{}’ definition, you should add the following CSS code.

color:rgb(188, 11, 6);

@top-left-corner{
 line-height:15mm;
 text-align:center;
 font-size:36pt;
 content:"A";
}

@left-top{
 line-height:15mm;
 text-align:center;
 font-size:36pt;
 content:"♠";
}

Both boxes get a line-height of 15mm, the text gets aligned in the center. The ‘A’ and ‘♠’ get the font-size 36pt. Also, the content is set directly via CSS.

The same code is used for the bottom right card corner, too, just that we need to rotate the boxes by 180 degree.

@bottom-right-corner{
 line-height:15mm;
 text-align:center;
 font-size:36pt;
 content:"A";
 transform:rotate(180deg);
}

@right-top{
 line-height:15mm;
 text-align:center;
 font-size:36pt;
 content:"♠";
 transform:rotate(180deg);
}

Now you should get a PDF with two pages looking like the following image.

The full code for the ace of spades card is also available in my PrintCSS GitHub repository.

Joker

The HTML code for the joker card is 99 percent the same, just the content is different. I chose the 😼 symbol for the joker card.

<div class="front">
   <div class="content">😼</div>
</div> 
<div class="back">
   <div class="design"></div>
</div>

The back side CSS is also the same as for all cards, so the same Hero Pattern. We do not need the border for the front side, and, as the symbol is bigger, we need to adjust the font size. As the border of 1mm is missing, the width and height are both 2mm larger.

.content{
 color:rgb(188, 11, 6);
 width:33.5mm;
 height:58.8mm;
 line-height:56.8mm;
 text-align:center;
 font-size:72pt;
}

In the page margin boxes, instead of putting the numbers 2–10, the face cards J, Q, K, or A for the ace plus the symbol of hearts, diamonds, spades, or clubs, we just write ‘Joker’.

As the page margin will still be 15mm, each letter of ‘Joker’ should be in a single line. To do so, the CSS for the boxes needs to be adjusted too.

@left-middle{
 line-height:1;
 text-align:center;
 font-size:26pt;
 overflow-wrap: break-word;
 text-transform: uppercase;
 content:"Joker";
 letter-spacing:1em;
 margin:2mm;
}

@right-middle{
 line-height:1;
 text-align:center;
 font-size:26pt;
 overflow-wrap: break-word;
 text-transform: uppercase;
 content:"Joker";
 letter-spacing:1em;
 transform:rotate(180deg);
 margin:2mm;
}

Again the full code and result PDF is available in my GitHub repository.

PrintCSS: How to create a Poker Card was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Usually, you do not want a single line of a paragraph to be alone on the bottom or top of a page.

There are the CSS properties ‘widows’ and ‘orphans’ to take care of such’ lonely’ lines. The integer you are passing as a value to these properties defines the minimum number of lines that can be alone.

Let’s start with a basic HTML and CSS file and see the result on printcss.live with DocRaptor as the selected rendering tool. Of course, you can render the PDF with the other tools too, but be aware that not all rendering tools support this concept yet.

HTML

<div class="headerLeft">
 PrintCSS: Widows and Orphans
</div>
<div class="headerRight">
   A sample document
</div>

<div class="footerLeft">
   <img src="https://printcss.live/img/logo.png" />
</div>
<div class="footerRight">
    <a href="info@azettl.net">info@azettl.net</a><br />
    <a href="https://printcss.live/">printcss.live</a>
</div>

<h1>PrintCSS: Widows and Orphans</h1>
<p>There is the concept of widows and orphans in typography, which describes lines of a paragraph that appear alone.</p>
<p>Orphans are the first lines of a paragraph that appear at the bottom of a page. On the other hand, widows are the last lines of a paragraph appearing on the top of a page.</p>
<p>Usually, you do not want a single line of a paragraph to be alone on the bottom or top of a page.</p>
<p>There are the CSS properties 'widow' and 'orphan' to take care of such' lonely' lines. The integer you are passing as a value to these properties defines the minimum number of lines that can be alone.</p>
<p>Let's start with a basic HTML and CSS file and see the result on printcss.live with DocRaptor as the selected rendering tool. Of course, you can render the PDF with the other tools too, but be aware that not all rendering tools support this concept yet.</p>

CSS

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

    @top-left{
        content: element(headerLeft);
        border-bottom:2px solid #434190;
    }

    @top-center{
        border-bottom:2px solid #434190;
    }

    @top-right{
        content: element(headerRight);
        border-bottom:2px solid #434190;
    }

    @bottom-right {
        content: element(footerRight);
        border-top:2px solid #434190;
    }

    @bottom-center{
        content: counter(page) ' / ' counter(pages);
        border-top:2px solid #434190;
        font-size:8pt;
    }

    @bottom-left{
        content: element(footerLeft);
        border-top:2px solid #434190;
    }
}

.headerLeft{
    position: running(headerLeft);
    font-size:12pt;
}

.headerRight{
    position: running(headerRight);
    font-size:8pt;
    font-style: italic;
    text-align: right;
    color:#667eea;
}

.footerLeft{
    position: running(footerLeft);
}

.footerLeft img{
    width:20mm;
}

.footerRight{
    position: running(footerRight);
    text-align: right;
    font-size:8pt;
}

To avoid the widow we see in the screenshot above, you can extend the CSS with the following paragraphs’ style.

p{
   widows:3;
}

You can see that all three lines are on the second page now as we defined a minimum of three lines as widows.

If you change the properties value to two now you will see that only one line gets moved to the next page and that we actually get an orphan on the first page.

p{
   widows:2;
}

If you now want neither a single line of a paragraph on the bottom or top of the page, you can define both properties.

p{
    orphans:2;
    widows:2;
}

The complete code and result PDF is also available in my GitHub repository.

PrintCSS: Widows and Orphans was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this article you will learn how to create your own CV PDF with HTML, CSS. To render the actual PDF we will use PagedJS an open-source tool to create PDF documents from HTML.

Before we start with the CV, let us think about the structure we want. So in this example we will create a multi-page CV and on each of the pages we will have our main details in a header section.

After the header there will be a short section for a introduction text. Then following a section for the employment history, the education and further skills.

For all sections there will be sub-sections for the different jobs or achievements. On the left side we will put the dates and right the content so what we actually did in that time period.

The header section

For the header let us first define the HTML structure. Our heading will be the first and last name in an H1 element. Next we want to put some links to important websites, like our LinkedIn or GitHub Profile. That these links look nice you can include FontAwesome and add a small icon in front of every link. Last we should put more information about ourselves, like the birthdate, phone number and address.

The profile section

The profile section or introduction text will be our first section. Here we already define the split of left and right content in the sub-sections. We will use the same code in all following sections. Let’s put the sections title in an H2 element and for the left/right sub-sections we will use a flex layout. To do so you need to set the display property of the element to ‘flex’. The left element should have a minimum width and the right element will take the rest of the space.

As the right element has paragraphs or further headlines (H3 elements) inside you should set their margin top to 0. This way they start at the same level as the left sides content.

The other sections

All other sections in your CV document will have the same HTML structure and CSS styling. Have a look at the complete sample below to see how these sections are added.

You can see the complete sample including the resulting PDF document on my GitHub repository for print CSS samples.

If you want to try recreating this CV or create your own one you can use printcss.live to render your PDF. This will save you the time of installing one of the rendering tools on your own dev environment.

If you want a more detailed explanation of the above sample check the Video about the same on YouTube.

PrintCSS: A basic CV example was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.

You will learn how to use counters and nested counters in Print CSS and cross-reference via the target-counter(s) function.

In the end, I shortly show you https://www.myscreenbreak.com with which you can convert any news article to a nice PDF.

PrintCSS Video: Counter and Cross References was originally published in PrintCSS on Medium, where people are continuing the conversation by highlighting and responding to this story.