Paged Media CSS examples: Difference between revisions

From XPUB & Lens-Based wiki
 
(25 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>
 
==@page customsection==
 
<source lang="css">
@page custom{
  background-color: lightyellow;
 
  @bottom-center {
    content: "Testing WeasyPrint";
   }
   }
}
}
 
</syntaxhighlight>
section#custom{
  page: customsection;
}
</source>


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


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


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


   @bottom-center {
   @bottom-center {
     content: "Testing WeasyPrint";
    content: "More margin notes";
  }
}
</syntaxhighlight>
 
==@page named groups==
 
<syntaxhighlight lang="css">
@page custom{
  background-color: lightyellow;
 
  @bottom-center {
     content: "Testing margin notes";
   }
   }
}
}
</source>
 
section#custom{
  page: custom;
}
</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>


==pagebreaks==


==pagenumbers==
Force page breaks before each h1


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


Start a section on the right page


==pagenumbers==
<syntaxhighlight lang="css">
 
section {
<source lang="css">
  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
===Media queries: @media print, @media screen===


* https://www.pagedjs.org/
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media
* https://weasyprint.readthedocs.io/
* https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
* https://pandoc.org/  


markdown to PDF oneliners
==See also==


* <code>$ pandoc -f markdown --pdf-engine weasyprint -c stylesheet.css filename.md -o filename.pdf</code>
* [[Paged Media CSS]]
* <code>$ weasyprint -s stylesheet.css filename.html filename.pdf</code>


[[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