PrintCSS Cloud Logo

Today I want to talk to you about my latest project, , 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, , , and !

The Print CSS features covered thanks to these renderers are:


In , I covered . Now let us try to recreate a and planet poster from .

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

In this article, you will learn how to recreate a Bauhaus Poster from 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 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 ; 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.

Let us…


There are many different things you can do with the help of . I already covered some use cases in this , like , , and . 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.

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 ‘’ and ‘’ to take care of such’ lonely’ lines. …


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

© Copyright 2023 PrintCss.Blog


In the end, I shortly show you with which you can convert any news article to a nice PDF.


In this article, you will learn everything about page selectors and breaks. Both are very important when you plan to style a multi-page publication, like booklets.

You will learn how to start each chapter on a separate page and style the left and right pages differently.

Page Selectors and Breaks

Using the , you can give a general style to all pages. But if you want to be more specific, page selectors like , and need to be used.

To see how these selectors work, let us start with a basic multi-page document. You can copy below HTML and CSS code…


Also, if you prefer reading check out !

PrintCSS

Everything you need to know about PrintCSS, aka CSS Paged Media!

Get the Medium app