Mustache example layouts

Templates can often reuse styling. It can be practical to have some reusable layouts to prevent repetitive work. This repository contains some mustache example layouts following the mustache template syntax.

• a4.html - A simple layout for printing a4 pages with a margin and justified content.
• email.html - A simple email layout with inline CSS styles based on a HTML table element.
• pagedjs.html - A layout for printing paginated HTML content with page numbers.
• pagedjs-toc.html - A layout for printing paginated HTML content with page numbers and a table of contents. A table of contents is created for all H2 and H3 elements.

Note: These example layouts contain a mustache partial named template. Use this partial to provide content.

Typesetting with CSS

Browsers provide the following CSS styles for typesetting.

• orphans - minimum number of lines at the bottom of a page
• widows - minimum number of lines at the top of a page
• break-before: avoid-page - avoid page break before a HTML element
• break-after: avoid-page - avoid page break after a HTML element
• text-align: justify - align text to the left and right edges of lines, except at the last line
• hyphens: auto - hyphenate words according to the rules for the language specified with the lang HTML attribute

Paged.js

Both pagedjs.html and pagedjs-toc.html are based on paged.js for paginating content. Paged.js is an open-source library to paginate HTML content for printing. This library is used to design books with HTML and CSS.

https://github.com/pagedjs/pagedjs
https://ashok-khanna.medium.com/beautiful-pdfs-from-html-9a7a3c565404
https://www.adamhyde.net/some-pagedjs-info

Getting started

Npm commands

See package.json for scripts to build the mustache example layouts.

• Run npm run build to build layouts from source code.
• Run npx prettier . --check or npx prettier . --write to format code using prettier (an opinionated formatter).

Source code

Source code for the example layouts is provided in separate files for HTML, CSS and JavaScript. These files are combined with web-resource-inliner or juice.

• src/a4 contains source code for a4.html

• src/email contains source code for email.html
  Most email clients have good support for CSS nowadays. However, inline styles and a layout based on a HTML table is still considered the best way to ensure rendering compatibility across email clients. CSS styles can be inlined with juice.
  Caution: juice removes unused CSS styles.

• src/pagedjs contains source code for pagedjs.html and pagedjs-toc.html

Note: The example layouts use CSS style hyphens: auto and HTML attribute lang="EN" for English hyphenation rules.

Note 2: Both pagedjs.html and pagedjs-toc.html set a boolean window.readyForPdf to true when paged.js finishes rendering. Wait for this flag to be set before rendering a pdf with Puppeteer or Playwright.