CSS Paged Media project

Render CSS Documentation

Render CSS is a new rendering engine based on Paged Media technology often called printcss. It uses HTML+CSS templates to build a PDF.

Render CSS can be used as an alternative to renderpdf, which is based on priint comet technology. priint comet uses Adobe InDesign for templating.

To create HTML from JSON data, you can use Handlebars - a widely used templating language on the web. On XML input you can alternatively use XSLT to produce HTML or transform the XML to JSON and then use Handlebars.

For PDF generation from HTML the rendercss worker will pipe the markup into WeasyPrint or PrinceXML.

• Input Data
  • JSON
  • XML
• HTML Templating
  • Handlebars
  • XSLT
• PDF Generation ("rendering")
  • WeasyPrint
  • PrinceXML

Project Structure

projects using rendercss will have the same general layout as renderpdf projects as seen in the example below:

└── project/
    ├── callback/
    ├── error/
    ├── mediaproxy/
    ├── rendercss/ --> new folder
    ├── restapi/
    └── upload/

In the rendercss folder, we will include all nescessary files as below (here using Handlebars for HTML templating and WeasyPrint for PDF generation):

Example:

└── rendercss/
    ├── handlebars/           // templatingEngine type
    │   ├── default.hbs       // <documentTemplate>.hbs
    │   ├── header.hbs
    │   ├── body.hbs
    │   ├── footer.hbs
    │   └── js_helpers/
    │       ├── isDisable.js
    │       └── prepareData.js
    ├── jobs/
    │   ├── product.json
    │   └── product.xml
    ├── weasyprint/          // renderingEngine type
    │   ├── default.css
    │   └── default.js
    ├── resources/
    │   ├── fonts/
    │   ├── images/
    │   └── icc-profiles/
    └── config.ion

Folder / File Name	Definition
handlebars	contains all handlebars template files. Must have default.hbs as entry point since default is the default documentTemplate.
handlebars/js_helpers	contains all JavaScript helper scripts
jobs	contains data input (support JSON / XML)
weasyprint	rendering engine folder. It contains: - default.css: styling for the template - default.js: additional JS function if supported by the PDF generator
resources	contains static files that are used in the template (fonts, images, etc)
config.ion	contains all variables to config rendercss worker. E.g.: { "templatingEngine": "handlebars", "renderingEngine": "weasyprint", "xmpTemplating": false, ... }

info

For details on RenderCSS configuration and Handlebars templates, refer to the documentation.