v131 · css
Book Spread
A simulated book spread showing how @page :left and @page :right assign different margin box content to even and odd pages. Left pages get the chapter name in the top-left and page number in the bottom-left; right pages mirror them. Switch templates to see how the layout changes across book, report, and thesis formats.
Feature detection: checking…
Left page (even) ←→ Right page (odd)
←Chapter
←4
@page :left (even pages)
Author→
5→
@page :right (odd pages)
Generated @page CSS for selected template
loading…
/*
@page :left — even-numbered (left-hand) pages
@page :right — odd-numbered (right-hand) pages
Margin box positions:
top-left top-center top-right
left-top right-top
left-middle (page body) right-middle
left-bottom right-bottom
bottom-left bottom-center bottom-right
content: string(chapter-title) reads from the nearest
string-set: chapter-title content() declaration in the document
*/
@page :left {
@top-left { content: string(chapter-title); }
@bottom-left { content: counter(page); }
}
@page :right {
@top-right { content: string(author-name); }
@bottom-right { content: counter(page); }
}
/* First page: usually blank or title-only */
@page :first {
@top-left { content: ''; }
@top-right { content: ''; }
@bottom-center { content: counter(page); }
}