Skip to content

Rasterization Styling

Styling for rasterized documents differs from the main application because: 1. It often bypasses the main application layout. 2. It needs to be pixel-perfect for "print" media (PDF/A4). 3. It serves non-interactive content.

SASS Files Positioning

Stylesheets for rasterization are typically located in app/assets/stylesheets/app/rasterization/.

They often map 1:1 to the view or component they are styling. For example, a spec might define: app/rasterization/client/billing/deal_summary/documents/pdf.css.sass

Dealing with Bootstrap

We often use a specific "theme" or layout for rasterization to avoid polluting the global namespace or bringing in unnecessary JS interactions.

Example Imports:

// Import the specific rasterize layout styles from vendor or shared theme
@import "vendor/bs4_iplan_theme_layouts/rasterize.css.sass"

// Custom page styles
.deal-summary-pdf
  font-size: 12pt
  // ...

Best Practices

  • Avoid Pixels for Layout: Use cm, mm, or pt for dimensions where physical print size matters (e.g., margins, A4 spacing).
  • Print Media Queries: Sometimes you might need @media print rules, but since the rasterizer is a "headless chrome" acting as a printer, usually the main styles should just be written for the target output.
  • Fonts: Ensure fonts are loaded/embedded correctly so the rasterizer can see them.