CSS Print: Difference between revisions

From creative crowd wiki
Jump to navigation Jump to search
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 14: Line 14:
@page:right {
@page:right {
   margin-left: 3cm; /*inner*/
   margin-left: 3cm; /*inner*/
   margin-right:1cm; /*outer*/  
   margin-right: 1cm; /*outer*/  
    
    
   @bottom-right {
   @bottom-right {
Line 50: Line 50:
    
    
   @bottom-center {
   @bottom-center {
     content: "Testing margin notes";
     content: "A custom note in the bottom-center margin :)";
   }
   }
}
}
Line 69: Line 69:
     content: "";  
     content: "";  
   }
   }
}
</syntaxhighlight>
==@page:nth()==
<syntaxhighlight lang="css">
@page:nth(3) {
  background-color: pink;
}
}
</syntaxhighlight>
</syntaxhighlight>
Line 85: Line 93:
==pagebreaks==
==pagebreaks==


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


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
Line 93: Line 101:
</syntaxhighlight>
</syntaxhighlight>


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


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
Line 114: Line 122:
a[href]:after {
a[href]:after {
content: ' (' attr(href) ')';
content: ' (' attr(href) ')';
}
</syntaxhighlight>
==generated pagenumbers in a table of contents==
See: https://pagedjs.org/documentation/-cross-references/#target-counter()
<syntaxhighlight lang="css">
#toc a::after {
  content: "page: " target-counter(attr(href url), page);
}
}
</syntaxhighlight>
</syntaxhighlight>
Line 119: Line 137:
= Links =
= Links =


==Paged Media CSS references==
Paged Media CSS references:


* 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==
Using 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
Paged.js documentation:
* https://pagedjs.org/documentation/

Latest revision as of 13:05, 5 July 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 custom sections

@page custom{
  background-color: lightyellow;
  
  @bottom-center {
    content: "A custom note in the bottom-center margin :)";
  }
}

section#custom{
  page: custom;
}

@page:first

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

@page:nth()

@page:nth(3) {
  background-color: pink;
}

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) ')';
}

generated pagenumbers in a table of contents

See: https://pagedjs.org/documentation/-cross-references/#target-counter()

#toc a::after {
  content: "page: " target-counter(attr(href url), page);
}

Links

Paged Media CSS references:

Using media queries: @media print, @media screen

Paged.js documentation: