Paged Media CSS examples: Difference between revisions

From XPUB & Lens-Based wiki
 
(7 intermediate revisions by the same user not shown)
Line 4: Line 4:
=@page=
=@page=


<source lang="css">
<syntaxhighlight lang="css">
@page {
@page {
   size: A5 portrait;
   size: A5 portrait;
   margin: 10mm;
   margin: 10mm;
}
}
</source>
</syntaxhighlight>


==@page:right @page:left==
==@page:right @page:left==


<source lang="css">
<syntaxhighlight lang="css">
@page:right {
@page:right {
   margin-left: 3cm; /*inner*/
   margin-left: 3cm; /*inner*/
Line 26: Line 26:
   }
   }
}
}
</source>
</syntaxhighlight>


-------------
-------------


<source lang="css">
<syntaxhighlight lang="css">
@page:left {
@page:left {
   margin-right: 10mm; /*inner*/
   margin-right: 10mm; /*inner*/
Line 43: Line 43:
   }
   }
}
}
</source>
</syntaxhighlight>


==@page custom sections==
==@page named groups==


<source lang="css">
<syntaxhighlight lang="css">
@page custom{
@page custom{
   background-color: lightyellow;
   background-color: lightyellow;
Line 59: Line 59:
   page: custom;
   page: custom;
}
}
</source>
</syntaxhighlight>


==@page:first==
==@page:first==


<source lang="css">
<syntaxhighlight lang="css">
@page:first {
@page:first {
   @bottom-center {  
   @bottom-center {  
Line 72: Line 72:
   }
   }
}
}
</source>
</syntaxhighlight>


==pagenumbers==
==pagenumbers==


<source lang="css">
<syntaxhighlight lang="css">
@page{
@page{


Line 83: Line 83:
     }
     }
}
}
</source>
</syntaxhighlight>


==pagebreaks==
==pagebreaks==
Line 89: Line 89:
Force page breaks before each h1
Force page breaks before each h1


<source lang="css">
<syntaxhighlight lang="css">
h1 {
h1 {
   break-before: always;
   break-before: always;
}
}
</source>
</syntaxhighlight>


Start a section on the right page
Start a section on the right page


<source lang="css">
<syntaxhighlight lang="css">
section {
section {
   break-before: right;
   break-before: right;
}
}
</source>
</syntaxhighlight>


==hyphens==
==hyphens==


<source lang="css">
<syntaxhighlight lang="css">
html{
html{
     hyphens: auto;
     hyphens: auto;
     hyphenate-limit-chars: 8;
     hyphenate-limit-chars: 8;
}
}
</source>
</syntaxhighlight>


==display links in print==
==display links in print==
<source lang="css">
<syntaxhighlight lang="css">
a[href]:after {
a[href]:after {
content: ' (' attr(href) ')';
content: ' (' attr(href) ')';
}
}
</source>
</syntaxhighlight>


= Links =
== Links ==


==Paged Media CSS references==
===Paged Media CSS documentation===


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


==Using media queries: @media print, @media screen==
===Media queries: @media print, @media screen===


* https://developer.mozilla.org/en-US/docs/Web/CSS/@media
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media
* https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
* https://developer.mozilla.org/en-US/docs/Web/Guide/Printing


==web-to-print PDF rendering engines==
==See also==
 
* your browser (use CTRL+P or CMD+P)
* 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=
 
==Paged.js workshop==
 
(13 October 2022)
 
* https://pad.xpub.nl/p/pagedjs
* [https://media.xpub.nl/2022/2022-10-13-pagedjs.html Recording of the presentation by Julie Blanc and Julien Taquet]
 
==Paged.js example==
 
* <code>paged.js-polyfill.js</code> you can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/
* <code>paged.js-interface.css</code> 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: <code>$ python3 -m http.server</code>.
 
<source lang="html">
<!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>
</source>
 
You can also use one of the Paged.js '''starterkits''': https://gitlab.coko.foundation/pagedjs/starter-kits
 
And this '''cheatsheet''' is helpful too: https://pagedjs.org/documentation/cheatsheet/
 
In general Paged.js has a lot of documentation on their website with lots of examples, check it out!
 
=Pandoc=
 
https://pandoc.org/
 
You can use Pandoc to generate PDF's directly from other document formats, like Markdown, wikitext or Libre Office.
 
A range of PDF engines are supported at the moment, including paged.js, weasyprint and LaTeX. You need to select the one of choice using the <code>--pdf-engine</code> option, and have the PDF engine installed on your computer.
 
You can follow this page for instructions: https://pandoc.org/MANUAL.html#creating-a-pdf
 


* [[Paged Media CSS]]


[[Category:Cookbook]]
[[Category:Cookbook]]
[[Category:PagedMedia]]
[[Category:PagedMedia]]

Latest revision as of 10:22, 6 October 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 named groups

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

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 documentation

Media queries: @media print, @media screen

See also

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Paged_Media_CSS_examples&oldid=248650"