Rotate

Two tools, for two different jobs: Rotated spins a subtree at any angle for stamps and watermarks, and RotatedBox does layout-aware quarter-turns for vertical labels. Both rotate around the element's center.

Rotated - a stamp or watermark

Rotated({ angle }, child) rotates child by angle degrees (clockwise) around its center, exactly like CSS transform: rotate(). It is paint-only: the child keeps its normal layout box, so the spun drawing can overflow its slot and siblings never reflow around it. That is what you want for a stamp - it should not push the content underneath around.

Pair it with a relative Box and Positioned to lay a "BEZAHLT" / "PAID" stamp diagonally across a document:

import { Box, Text, Positioned, Rotated } from "@jasy/pdf";

Box({ relative: true }, [
  // ... your invoice ...
  Positioned(
    { h: "center", v: "center" },
    Rotated({ angle: -18 }, Box({ border: "#c0392b", borderWidth: 4, radius: 12, padding: { x: 26, y: 12 } }, [
      Text("BEZAHLT", { size: 40, bold: true, color: "#c0392b" }),
    ])),
  ),
]);

Positioned({ h: "center", v: "center" }) centers the stamp on the card; Rotated tilts it in place around its own center. See the Stamped invoice in the showroom.

RotatedBox - a vertical label

A stamp does not change layout - but a vertical label beside a table should. RotatedBox({ turns }, child) does whole quarter-turns and is layout-aware: a 90 or 270 turn swaps the box's width and height, so it reserves its narrow width and tall height, and siblings lay out around it. turns is the number of clockwise quarter-turns (1 = 90 deg, 2 = 180, 3 = 270).

import { Row, Column, Text, RotatedBox } from "@jasy/pdf";

Row({ align: "center" }, [
  RotatedBox({ turns: 3 }, Text("SECTION A", { size: 16, bold: true })), // reads bottom-to-top
  Column({ gap: 6 }, rows), // the list; the label sits tight to its left, vertically centered
]);

Because the rotated box reports its real footprint, the label takes only its narrow width (no dead space) and stays vertically centered against the list.

Which one

• Rotated - any angle, layout untouched. Stamps, watermarks, decorative badges.
• RotatedBox - 90 deg steps, layout follows. Vertical table / column labels.

Good to know

• Pivot is the center. Both rotate around the element's box center (CSS transform-origin: center).
• Rotate is paint-only in Rotated. After a 90 deg Rotated, the layout box does NOT become tall - it stays as it was and the drawing overflows. Reach for RotatedBox when you want the layout to follow.