Weasyprint: Difference between revisions

From XPUB & Lens-Based wiki
(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...")
 
No edit summary
Line 1: Line 1:
"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/
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==
==Testing Weasy Print==
Line 70: Line 79:


On Linux `fc-list` will give you a list of fonts installed 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
<source lang="css">
    body { font-size: 14pt;
          color: blue;
          font-family: "Ubuntu Mono";
        }
</source>


== Imposition ==
== Imposition ==
Line 80: Line 108:




== 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.
==CSS style-sheet example==
Yet the results seem promising.
 
More experimentation, prototypes, and feedback is needed in order to make a informed critique.
 
And contributions to [https://github.com/Kozea/WeasyPrint/ Weasy Print], can only help.
 
==CSS style-sheet==
<source lang="css">
<source lang="css">
@page {
@page {
Line 173: Line 192:




==tutorials & posts on Weasy Print==
 
http://diethardsteiner.github.io/reporting/2015/02/17/CSS-for-print.html


==references==
==references==

Revision as of 15:17, 27 October 2016

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

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

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



references