Weasyprint

"WeasyPrint is a visual rendering engine for HTML and CSS that can export to PDF. It aims to support web standards for printing. WeasyPrint is free software made available under a BSD license." http://weasyprint.org/

Useful links

http://weasyprint.readthedocs.io/en/latest/tutorial.html

https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ designing-for-print-with-css

http://diethardsteiner.github.io/reporting/2015/02/17/CSS-for-print.html

Testing Weasy Print

At the first glance Weasy Print sounds promising, so why not try to see how well does it performs conversions from HTML to PDF?

The following PDF results from the conversion of the Beyond Social's article Eiland van Brienenoord onto a PDF using Weasy Print.

The CSS style-sheet that gave origin the PDF is located at the end of this page

http://publicationstation.wdka.hro.nl/wiki/index.php/File:Web2print-BS07.pdf

Running

The standalone command weasyprint can produce a PDF, simply with the instructions:

weasyprint EilandvanBrienenoord.html -s style.css ouput.pdf

Where:

• EilandvanBrienenoord.html - is the souce HTML file (could also be a URL)
• -s - is the option for a CSS stylesheet
• ouput.pdf - the resulting PDF

@page

@page CSS rule that determines orientation and page size is successfully rendered in the PDF.

@page {
size: A5 portrait;
}

@page left @page right

Option for the left and right pages, such as the margin sizes, which have to alternate in order to produce a bound work, are correctly rendered.

@page:right {
  margin-left: 3cm; /*inner margin*/
  margin-right:1cm; /*outer margin*/ 
}

@page:left {
  margin-right: 3cm; /*inner margin*/
  margin-left:1cm; /*outer margin*/
}

@bottom

Weasy-print also applies consistently @bottom rules, including page counting.

  @bottom-right {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #FF05F6;
    content: "Testing WeasyPrint";
    font-size: 6pt;
    color: #00FFF2;
  }

  @bottom-center {
    margin: 10pt 0 30pt 0;
    content: counter(page);
    font-size: 6pt;
  }

CSS Custom Fonts

Weasy Print does not support CSS's (@font-face) rule.

Yet it can use fonts available in your system.

On Linux `fc-list` will give you a list of fonts installed in your system

List system installed fonts:

$ fc-list   #show all the fonts available
/usr/share/fonts/type1/texlive-fonts-recommended/pcrbo8a.pfb: Courier:style=Bold Italic
/usr/share/fonts/type1/gsfonts/n019003l.pfb: Nimbus Sans L:style=Regular
/usr/share/fonts/truetype/UbuntuMono-B.ttf: Ubuntu Mono:style=Bold

Add that font - Ubuntu Mono - in stayle sheet

    body { font-size: 14pt;

           color: blue;

           font-family: "Ubuntu Mono";

         }

Imposition

There is no mechanism to performs page impositions.

However, it is possible to perform imposition over the Weasy Print-generated PDF with software such as BookletImposer, jPDF Tweak, pdftool, or PDFtk.

http://publicationstation.wdka.hro.nl/wiki/images/4/46/Web2print-BS07-booklet.pdf Booklet produced with BookletImposer, having Weasy Print generated PDF as source

CSS style-sheet example

@page {
size: A5 portrait;
}

@page:right {
  margin-left: 3cm; /*inner*/
  margin-right:1cm; /*outer*/ 
  
  @bottom-right {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #FF05F6;
    content: "Testing WeasyPrint";
    font-size: 6pt;
    color: #00FFF2;
  }
  
  @bottom-center {
    margin: 10pt 0 30pt 0;
    content: counter(page);
    font-size: 6pt;
  }
}

@page:left {
  margin-right: 3cm; /*inner*/
  margin-left:1cm; /*outer*/

  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #00FFF2;
    content: "Testing WeasyPrint";
    font-size: 6pt;
    color: #FF05F6;
  }

  @bottom-center {
    margin: 10pt 0 30pt 0;
    content: counter(page);
    font-size: 6pt;
  }
}
 
@page:first {
  @bottom-center { content: ""; }
  @bottom-right { content: ""; }
}



body{
  font-size:8pt;
  font-family: sans;  
  padding: 0.5cm;
  }

a, a:visited, a:hover {color:#00FFF2;}

hr { color:#00FFF2;
   border:solid 1px #00FFF2;
}

div.title-beyond h1 {font-size:4em;
  margin-top:-40px;
} /*title*/

h1,h2,h3,h4,h5 {color:#FF05F6; }


figure {
  margin-left:0px;
  padding-top:0.5cm;  
}
  
img{ width: 6cm; }

figcaption { font-size:0.8em;
  width:6cm;
}

Related pages

• Paged Media_CSS examples