Direkt zum Hauptinhalt

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:

left

The inline contents are aligned to the left edge of the line box.

right

The inline contents are aligned to the right edge of the line box.

center

The inline contents are centered within the line box.

justify

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.

 

nach oben