PrintCSS: Recreating a eBook Cover

In this article, we will not go into specifics of CSS paged media. Instead, let us have some fun today and try to recreate the eBook cover from Florin Pop’s first eBook.

The goal is to get as close as possible to the original cover. If you want to try the below code yourself, you can install a PDF generation tool or head over to printcss.live. This website allows you to try different rendering tools in the browser.

Enough now with the boring intro! Let us start!

Ten++ Ways to Make Money as a Developer by Florin Pop

The eBook is not released yet, but you can find the cover and details about the book on Gumroad.

Ten++ Ways to Make Money as a Developer by Florin Pop

The HTML Part

Gladly Florin did not go super crazy with the book cover layout, so our HTML should be pretty basic. The only thing we leave out from the layout is the picture of the pig.

Yeah, I know this is a major part, and I also found the picture on some websites. The thing is, I do not want to copy it from somewhere and did not find it on a stock photo site.

Instead, we will put a picture from Bill Murray via the amazing fillmurray.com image placeholder website.

So our HTML will look like the following.

<div class="purple">&#x3C;h1&#x3E;</div>
<div class="title">
  Ten<span class="purple">++</span> Ways to Make Money as a Developer
</div>
<div class="purple">&#x3C;/h1&#x3E;</div>
<div class="author">Florin Pop</div>
<img src="[https://www.fillmurray.com/400/400](https://www.fillmurray.com/400/400)" />

Rendering only the HTML code will result in a pretty basic PDF page. Be aware that you might get a different image of Bill Murray.

Florins eBook Cover without CSS, rendered with Weasyprint

The Fun/CSS Part

For this and also all the other book covers let us assume a page size of 8.27 inch by 11.69 inch (ISO Code A4).

As we all know, Florin’s favorite color is green. Kidding, it’s purple, so let us start with the purple parts. The left part of the cover is completely purple, and we can use the page margin boxes to achieve the same.

Florins eBook Cover with some CSS, rendered with Weasyprint

@page{
   size:8.27in 11.69in; 
   margin:0.39in;

   @top-left-corner{
       content:"";
       background-color:#663399;
   }

   @left-top{
       content:"";
       background-color:#663399;
   }

   @left-middle{
       content:"";
       background-color:#663399;
   }

   @left-bottom{
       content:"";
       background-color:#663399;
   }

   @bottom-left-corner{
       content:"";
       background-color:#663399;
   }
}

In the next step, let us style the title of the book. First, we will need to redo our HTML element for the title. Instead of one div, let’s split it into multiple divs to achieve the desired line breaks.

<div class="title">
  Ten<span class="purple">++</span>
</div>
<div class="title">
  Ways
</div>
<div class="title">
  to Make Money
</div>
<div class="title">
  as a
</div>
<div class="title">
  Developer
</div>

Now we need to get the title’s styles right, which means guessing the font and font size.

As I am terrible at guessing fonts, let us take Roboto from Google Fonts, and let’s pick a font size of 74pt. For the H1 tag and the ‘++’, we will use a font size of 32pt.

All our divs will also get a margin-left, so they are not starting at the purple stripe we added on the left.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;900&display=swap');


body{
   font-family: 'Roboto', sans-serif;
}

div{
   margin-left:0.78in;
}

.purple{
   color:#663399;
   font-size:32pt;
}

.title{
   font-size:74pt;
   font-weight:bold;
   text-transform:uppercase;
}

In the code above, you can see that I also added the ‘text-transform’ property, so the title looks like the one on Florin’s eBook.

The current progress of our title, rendered with Weasyprint

In the image above, you also see that the image of Bill Murray disappeared. Actually, it is now on the second page of our PDF as it is not fitting anymore due to the font size change.

Before we take care of the image, let us first fix the author’s name and the ‘++’.

.title .purple{
   position:relative;
   top:-16pt;
   left:16pt;
   letter-spacing:4pt;
}

.author{
   margin-top:1.39in;
   font-size:26pt;
   font-weight:bold;
}

eBook Cover with Author and ‘++’ positioned correctly and rendered with Weasyprint

In the end, let us bring the image back to the first page and position it in the right bottom corner.

img{
   position:absolute;
   bottom:0;
   right:0.78in;
   max-width:2.5in;
}

So here it is our recreation of Florin’s book cover! Not a 100 percent the same, but I am pretty happy about the result.

The final result rendered with Weasyprint

Oh, those renderers!

What you need to be aware of, all the samples you see above were rendered with Weasyprint. With all these PDF generation tools, it is a little bit like in the old days of web development. Different tools give you different results. For that, I rendered the same with four different tools, and as you can see below, we get four totally different PDFs.

The code from this article rendered with four different tools