CSS Print examples: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 69: Line 69:
}
}
</source>
</source>
==@page:customsection==
<source lang="css">
@page customsection {
  background-color: pink;
  @top-center {
    content: "Hello :)";
  }
}
section#custom{
  page: customsection;
}
</source>


==pagenumbers==
==pagenumbers==

Revision as of 10:49, 6 July 2021

@page

@page {
  size: A5 portrait;
}

@page:right @page:left

@page:right {
  margin-left: 3cm; /*inner*/
  margin-right:1cm; /*outer*/ 
  
  @bottom-right {
    content: "Testing 123!!!";
  }
  
  @bottom-center {
    content: "Testing WeasyPrint";
  }
}

@page customsection

@page custom{
  background-color: lightyellow;
  
  @bottom-center {
    content: "Testing WeasyPrint";
  }
}

section#custom{
  page: customsection;
}

@page:left {
  margin-right: 10mm; /*inner*/
  margin-left: 15mm; /*outer*/

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

  @bottom-center {
    content: "Testing WeasyPrint";
  }
}

@page:first

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

@page:customsection

@page customsection {
  background-color: pink;

  @top-center { 
    content: "Hello :)"; 
  }
}

section#custom{
  page: customsection;
}


pagenumbers

...

display links in print

a[href]:after {
	content: ' (' attr(href) ')';
}