Revision as of 11:09, 17 March 2023

@page

@page {
  size: A5 portrait;
  margin: 10mm;
}

@page:right @page:left

@page:right {
  margin-left: 3cm; /*inner*/
  margin-right:1cm; /*outer*/ 
  
  @bottom-right {
    content: "Testing 123!!!";
  }
  
  @bottom-center {
    content: "Testing margin notes";
  }
}

@page:left {
  margin-right: 10mm; /*inner*/
  margin-left: 15mm; /*outer*/

  @bottom-left {
    content: "Testing margin notes";
  }

  @bottom-center {
    content: "More margin notes";
  }
}

@page customsection

@page custom{
  background-color: lightyellow;
  
  @bottom-center {
    content: "Testing margin notes";
  }
}

section#custom{
  page: custom;
}

@page:first

@page:first {
  @bottom-center { 
    content: ""; 
  }
  @bottom-right { 
    content: ""; 
  }
}

@page:customsection

@page customsection {
  background-color: pink;

  @top-center { 
    content: "Hello :)"; 
  }
}

section#custom{
  page: customsection;
}

pagenumbers

@page{

    @bottom-left{
        content: counter(page);
    }
}

pagebreaks

Force page breaks before each h1

h1 {
  break-before: always;
}

Start a section on the right page

section {
  break-before: right;
}

hyphens

html{
    hyphens: auto;
    hyphenate-limit-chars: 8;
}

display links in print

a[href]:after {
	content: ' (' attr(href) ')';
}

Links

Paged Media CSS references

https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media

Using media queries: @media print, @media screen

web-to-print PDF rendering engines

Paged.js https://www.pagedjs.org/
Weasyprint https://weasyprint.readthedocs.io/
Reportlab (Python Library) https://www.reportlab.com/
Prince https://www.princexml.com/
LaTeX https://www.latex-project.org/
ConTeXt https://wiki.contextgarden.net/Main_Page
wkhtmltopdf https://wkhtmltopdf.org/

PDF-generating oneliners

$ pandoc -f markdown --pdf-engine weasyprint -c stylesheet.css filename.md -o filename.pdf

$ weasyprint -s stylesheet.css filename.html filename.pdf

Paged.js workshop

(13 October 2022)

Paged.js example

paged.js-polyfill.js you can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/
paged.js-interface.css you can download here: https://gitlab.coko.foundation/pagedjs/interface-polyfill

Remember: you need to open a Paged.js document through a web server. You can use a local server, either through your code editor or by running a local server in Python: $ python3 -m http.server.

<!DOCTYPE html>
<html>
<head>
	<title>Paged.js template example</title>
	<meta charset="utf-8">
	<!-- load paged.js 
		(the polyfill is used to turn your whole page into pages) 
	-->
    <script src="paged.js-polyfill.js"></script>
    <!-- load the paged.js interface stylesheet -->
    <link href="paged.js-interface.css" rel="stylesheet" type="text/css">
    <!-- load your own stylesheet -->
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<section id="cover"></section>
	<section id="introduction"></section>
	<section class="article"></section>
	<section id="backcover"></section>
</body>
</html>

Paged Media CSS examples: Difference between revisions