Blocks

Print A4

Block: an A4 page shell (210 by 297mm, 44 to 52px margins, main column plus a 210 to 228px side column), a named @page rule for print and a page-break helper. Pure layout.

Preview

Install

npx shadcn add @eloquent/print-a4

This is a block: it installs components/blocks/print-a4.tsx and styles/print-a4.css, and adds @import "../styles/print-a4.css" to your global stylesheet. The stylesheet holds one rule, a named page, so only a sheet prints on it and the rest of your site prints as before.

Usage

import { PrintA4, PrintA4Aside, PrintA4Columns, PrintA4Main, PrintA4PageBreak } from "@/components/blocks/print-a4";

<PrintA4 margin={48}>
  <PrintA4Columns asideWidth={216}>
    <PrintA4Main>{/* the story */}</PrintA4Main>
    <PrintA4Aside aria-label="Contact and skills">{/* the side column */}</PrintA4Aside>
  </PrintA4Columns>
</PrintA4>
<PrintA4PageBreak />
<PrintA4 margin={52}>{/* page 2 */}</PrintA4>

One PrintA4 is one printed page: it is clipped to 297mm in print, so split longer content across sheets and put a PrintA4PageBreak between them. To keep a block whole inside a column, add break-inside-avoid to it. Print from the browser with margins set to "None" (the page rule already sets none).

States

Keyboard

The layout is not interactive and is not a tab stop. The examples wrap each sheet in a scrollable region so a narrow screen can scroll a sheet at its true size; that region is the only stop.

Vietnamese

Ink adaptation

Brand block with no upstream. Paper and ink only: the side column is divided by a hairline rule, not a box, and there is no radius or shadow. The sample content is placeholder text.