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 WeasyPrint

At the first glance WeasyPrint 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 WeasyPrint.

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

WeasyPrint 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";

         }

Stylesheet 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;
}

See also

• Paged Media_CSS examples