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…

PrintCSS Cloud Logo

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…

In the last article, I covered how to create a Bauhaus Poster with HTML and CSS. Now let us try to recreate a Saturn and Earth planet poster from DESENIO.

The Saturn Poster rendered with WeasyPrint

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>

In this article, you will learn how to recreate a Bauhaus Poster from DESENIO in HTML and CSS, the rendering of the result PDF will be done on If you prefer watching me how I recreated this poster, have a look at my YouTube video covering the same.

Bauhaus 1923

Resulting PDF Rendered with WeasyPrint

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…

We all know the Certification PDFs you get at many e-learning platforms. Maybe you even need to create one for your own online course or platform; then this article is for you.

As in all other articles, we will use 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.

The result certificate PDF rendered with WeasyPrint.
The result certificate PDF rendered with WeasyPrint.
The result certificate PDF rendered with WeasyPrint.

Let us…

There are many different things you can do with the help of CSS Paged Media. I already covered some use cases in this publication, like business cards, book covers, and CVs. Today I want to show you how to create beautiful poker cards. We will design one standard card and a joker card together. All other cards you can make with the same HTML and CSS by just changing the values.

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…

There is the concept of widows and orphans in typography, which describes the line of a paragraph that appears alone. A Orphan is the first line of a paragraph that appears at the bottom of a page. On the other hand, a widow is the last line of a paragraph appearing on the top of a page.

Sample of a widow, rendered with DocRaptor.
Sample of a widow, rendered with DocRaptor.

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. …

CV Sample PDF, Skills Section
CV Sample PDF, Skills Section
PDF CV example, Skills section

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.

If you ever wondered how to animate the title of your website with the use of Unicode emoji characters and JavaScript this short post is perfect for you.

This sample might not be useful for any real use case but it is still fun to do and also should be easy to adapt for a message counter or similar like WhatsApp Web offers.

First, you should check out some emojis which you wanna rotate as animation in your title, you can use to find the right emojis for you.

After you found the desired emojis it is time to add some JavaScript to your existing HTML page. As a sample, I used the HTML shown below.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">…

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 with which you can convert any news article to a nice PDF.

Andreas Zettl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store