Useful CSS Rules
Here, we're trying to list the most useful css rules for (print/pdf/ebook) publications.
Page Setup
Originally, CSS was designed for websites, not paged media. Therefore, we have to tell CSS that we want pages.
@pageDOC
The @page at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins.
@page {
size: A4; /* This is the page size */
margin: 2cm; /* margin between page border and content. */
}sizeDOC
Total page size, Example values: A4, 10cm 10cm, …
marginDOC
Margin between border and your content.
You can set different margins on each site: margin: 1cm 2cm 3cm 4cm; will set the following margins: top 1cm, right 2cm, bottom 3 cm, left 4cm.
margin-top / margin-left / margin-right / margin-bottom
Same as margin but explicitly for one side. Use either margin: OR margin-top etc.
@page:left / @page:right / @page:first / @page:blank
You may additionally define one or multiple of these rules. @page:left only applies to left pages, etc.
@top-left-corner/@top-left/@top-center/@top-right/@top-right-corner/@bottom-left-corner/@bottom-left/@bottom-center/@bottom-right/@bottom-right-corner/@left-top/@left-middle/@left-bottom/@right-top/@right-middle/@right-bottom
With these rules you can add content inside the margins, e.g. page numbers or a headline. Have to be used inside a page or page:left (etc.) rule!
@page {
@bottom-center {
content: "Test Footer";
}
@top-center {
content: "Headline!";
}
}
Typesetting
text-alignDOC (Text Alignment)
Sets the text alignment. Typical values:
The inline contents are aligned to the left edge of the line box.
The inline contents are aligned to the right edge of the line box.
The inline contents are centered within the line box.
The inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line.