CSS Print: Difference between revisions
Jump to navigation
Jump to search
(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 {...") |
No edit summary |
||
| Line 2: | Line 2: | ||
==@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 24: | Line 24: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
------------- | ------------- | ||
< | <syntaxhighlight lang="css"> | ||
@page:left { | @page:left { | ||
margin-right: 10mm; /*inner*/ | margin-right: 10mm; /*inner*/ | ||
| Line 41: | Line 41: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==@page custom sections== | ==@page custom sections== | ||
< | <syntaxhighlight lang="css"> | ||
@page custom{ | @page custom{ | ||
background-color: lightyellow; | background-color: lightyellow; | ||
| Line 57: | Line 57: | ||
page: custom; | page: custom; | ||
} | } | ||
</ | </syntaxhighlight> | ||
==@page:first== | ==@page:first== | ||
< | <syntaxhighlight lang="css"> | ||
@page:first { | @page:first { | ||
@bottom-center { | @bottom-center { | ||
| Line 70: | Line 70: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==pagenumbers== | ==pagenumbers== | ||
< | <syntaxhighlight lang="css"> | ||
@page{ | @page{ | ||
| Line 81: | Line 81: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
==pagebreaks== | ==pagebreaks== | ||
| Line 87: | Line 87: | ||
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:51, 23 March 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) ')';
}