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.
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…
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:
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 DESENIO in HTML and CSS, the rendering of the result PDF will be done on printcss.live. If you prefer watching me how I recreated this poster, have a look at my YouTube video covering the same.
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 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.
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.
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.
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.
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 http://www.unicode.org/emoji/charts/full-emoji-list.html to find the right emojis for you.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">…