Weasyprint

From XPUB & Lens-Based wiki
Revision as of 15:07, 27 October 2016 by Andre Castro (talk | contribs) (Created page with "http://weasyprint.org/ ==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...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

http://weasyprint.org/

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*/
}

Weasyprint-margins.png

@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

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


More is needed

These tests and prototypes are far from exhaustive.

It is still unclear whether Weasy Print, CSS and HTML can produce quality PDFs, ready to be sent to a printer in order to produce paper-bound publication. Yet the results seem promising.

More experimentation, prototypes, and feedback is needed in order to make a informed critique.

And contributions to Weasy Print, can only help.

CSS style-sheet

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


tutorials & posts on Weasy Print

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

references