CSS Print

From creative crowd wiki
Revision as of 08:50, 23 March 2023 by Manetta (talk | contribs) (Created page with " ==@page== <source lang="css"> @page { size: A5 portrait; margin: 10mm; } </source> ==@page:right @page:left== <source lang="css"> @page:right { margin-left: 3cm; →‎inner: margin-right:1cm; →‎outer: @bottom-right { content: "Testing 123!!!"; } @bottom-center { content: "Testing margin notes"; } } </source> ------------- <source lang="css"> @page:left { margin-right: 10mm; →‎inner: margin-left: 15mm; →‎outer: @bottom-left {...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

@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: "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 references

Using media queries: @media print, @media screen