What problem does it solve?
Designing and debugging complex print layouts (like books or reports) using HTML and CSS can be challenging, especially when dealing with page breaks, headers, and footers. This skill streamlines the entire workflow, from content editing to PDF rendering and debugging.
Core Features & Use Cases
- Print Layout Design: Create sophisticated paginated documents with CSS Paged Media features, including dynamic headers/footers, page numbers, and custom page breaks.
- Layout Debugging: Tools and guidance to troubleshoot common issues like unwanted page breaks, content overflow, and incorrect counter increments.
- PDF Rendering Workflow: Supports generating high-quality PDFs from your HTML/CSS designs, ensuring professional print-ready output.
- Use Case: You're creating a new TTRPG rulebook and need precise control over page breaks, chapter titles in headers, and consistent page numbering. This skill helps you design, preview, and debug your HTML/CSS layout before generating the final PDF.
Quick Start
Example: Basic page setup
@page {
size: A4;
margin: 2cm;
}
Example: Page breaks
.chapter {
break-before: page;
}
Example: Running headers
h1 {
string-set: chapter-title content();
}
@page {
@top-center {
content: string(chapter-title);
}
}
