SoSei - សរសេរ

A template for creating beautiful printable documents with HTML & CSS

View on GitHub →

Overview

This document demonstrates the print component system for the SoSei project. The header and footer components automatically appear on every page, with support for page range restrictions.

Features

The SoSei template provides a complete set of components for creating professional printable documents. Each component is designed to work seamlessly with Paged.js for automatic pagination.

  • PageHeader & PageFooter - Running headers and footers that appear on every page automatically
  • Positioning Components - TopLeft, TopCenter, TopRight for headers and BottomLeft, BottomCenter, BottomRight for footers
  • PageNumber - Automatic page numbering with current/total page display
  • Page Range Support - Show or hide content on specific page ranges

Quick Start

Getting started with SoSei is straightforward. Create a new page using the LayoutPrint component and add your content:

---
import LayoutPrint from "../layouts/LayoutPrint.astro";
import PageHeader from "../components/print/PageHeader.astro";
import TopLeft from "../components/print/TopLeft.astro";
---

<LayoutPrint title="My Document">
  <PageHeader slot="header">
    <TopLeft>My Company</TopLeft>
  </PageHeader>
  
  <h1>My Document Title</h1>
  <p>Your content here...</p>
</LayoutPrint>

Customization

SoSei is built with customization in mind. All components use scoped CSS, making it easy to override styles for your specific needs. Modify colors, fonts, spacing, and layout through CSS custom properties or component styles.

The template uses modern CSS features including Grid, Flexbox, and logical properties. This ensures your documents look great both on screen and in print.

Next Steps

Ready to create your own printable documents? Start by exploring the example components in this template, then customize them to match your brand and requirements. Check out the GitHub repository for more examples and documentation.