Paged Media CSS examples: Difference between revisions
No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
=@page= | =@page= | ||
< | <syntaxhighlight lang="css"> | ||
@page { | @page { | ||
size: A5 portrait; | size: A5 portrait; | ||
margin: 10mm; | margin: 10mm; | ||
} | } | ||
</ | </syntaxhighlight> | ||
==@page:right @page:left== | ==@page:right @page:left== | ||
< | <syntaxhighlight lang="css"> | ||
@page:right { | @page:right { | ||
margin-left: 3cm; /*inner*/ | margin-left: 3cm; /*inner*/ | ||
| Line 26: | Line 26: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
------------- | ------------- | ||
< | <syntaxhighlight lang="css"> | ||
@page:left { | @page:left { | ||
margin-right: 10mm; /*inner*/ | margin-right: 10mm; /*inner*/ | ||
| Line 43: | Line 43: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==@page custom sections== | ==@page custom sections== | ||
< | <syntaxhighlight lang="css"> | ||
@page custom{ | @page custom{ | ||
background-color: lightyellow; | background-color: lightyellow; | ||
| Line 59: | Line 59: | ||
page: custom; | page: custom; | ||
} | } | ||
</ | </syntaxhighlight> | ||
==@page:first== | ==@page:first== | ||
< | <syntaxhighlight lang="css"> | ||
@page:first { | @page:first { | ||
@bottom-center { | @bottom-center { | ||
| Line 72: | Line 72: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==pagenumbers== | ==pagenumbers== | ||
< | <syntaxhighlight lang="css"> | ||
@page{ | @page{ | ||
| Line 83: | Line 83: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==pagebreaks== | ==pagebreaks== | ||
| Line 89: | Line 89: | ||
Force page breaks before each h1 | Force page breaks before each h1 | ||
< | <syntaxhighlight lang="css"> | ||
h1 { | h1 { | ||
break-before: always; | break-before: always; | ||
} | } | ||
</ | </syntaxhighlight> | ||
Start a section on the right page | Start a section on the right page | ||
< | <syntaxhighlight lang="css"> | ||
section { | section { | ||
break-before: right; | break-before: right; | ||
} | } | ||
</ | </syntaxhighlight> | ||
==hyphens== | ==hyphens== | ||
< | <syntaxhighlight lang="css"> | ||
html{ | html{ | ||
hyphens: auto; | hyphens: auto; | ||
hyphenate-limit-chars: 8; | hyphenate-limit-chars: 8; | ||
} | } | ||
</ | </syntaxhighlight> | ||
==display links in print== | ==display links in print== | ||
< | <syntaxhighlight lang="css"> | ||
a[href]:after { | a[href]:after { | ||
content: ' (' attr(href) ')'; | content: ' (' attr(href) ')'; | ||
} | } | ||
</ | </syntaxhighlight> | ||
= Links = | = Links = | ||
Revision as of 08:49, 3 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 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) ')';
}