Paged Media CSS examples: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
__TOC__
=@page=
=@page=


<source lang="css">
<syntaxhighlight lang="css">
@page {
@page {
   size: A5 portrait;
   size: A5 portrait;
  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 19: Line 23:
    
    
   @bottom-center {
   @bottom-center {
     content: "Testing WeasyPrint";
     content: "Testing margin notes";
   }
   }
}
}
</source>
</syntaxhighlight>


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


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


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


   @bottom-center {
   @bottom-center {
     content: "Testing WeasyPrint";
     content: "More margin notes";
   }
   }
}
}
</source>
</syntaxhighlight>


==@page customsection==
==@page named groups==


<source lang="css">
<syntaxhighlight lang="css">
@page custom{
@page custom{
   background-color: lightyellow;
   background-color: lightyellow;
    
    
   @bottom-center {
   @bottom-center {
     content: "Testing WeasyPrint";
     content: "Testing margin notes";
   }
   }
}
}


section#custom{
section#custom{
   page: customsection;
   page: custom;
}
}
</source>
</syntaxhighlight>


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


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


==@page:customsection==
==pagenumbers==
 
<source lang="css">
@page customsection {
  background-color: pink;


  @top-center {
<syntaxhighlight lang="css">
    content: "Hello :)";
@page{
  }
}


section#custom{
    @bottom-left{
  page: customsection;
        content: counter(page);
    }
}
}
</source>
</syntaxhighlight>
 
 
==pagenumbers==
 
...
 


==pagebreaks==
==pagebreaks==
<source lang="css">


Force page breaks before each h1
Force page breaks before each h1


<source lang="css">
<syntaxhighlight lang="css">
h1 {
h1 {
   page-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 {
   page-break-before: right;
   break-before: right;
}
}
</source>
</syntaxhighlight>


==hyphens==
==hyphens==


<source lang="css">
<syntaxhighlight lang="css">
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
* https://www.princexml.com/doc/paged/
html2print PDF engines


* https://www.pagedjs.org/
===Media queries: @media print, @media screen===
* https://weasyprint.readthedocs.io/
* https://pandoc.org/


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


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


$ weasyprint -s stylesheet.css filename.html filename.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"