# print

> Sugar over `media("print", input)`.

```ts
import { print } from "@sdxc/u/responsive";
```

Sugar over `media("print", input)`. `"print"` is a media type, so it's
passed without parentheses — used to hide interactive chrome, force a
light surface, and expand truncated content back to full height on paper.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.print(u.hidden())` | `css({ "@media print": { display: "none" } })` |

## Examples

### Basic example

Use `print(...)` to apply utilities only when the page is printed, like hiding buttons that mean nothing on paper. Open your browser's print preview to see the buttons gone:

```tsx
<div mix={[vstack({ gap: 3 }), ...]}>
	<p mix={[weight("semibold")]}>Invoice #1042 — $240.00</p>
	<div mix={[hstack({ gap: 2 }), print(hidden())]}>
		<button type="button" mix={[bg("brand.solid"), fg("brand.onSolid"), ...]}>
			Pay now
		</button>
		<button type="button" mix={[bg("neutral.tint"), fg("neutral.emphasis"), ...]}>
			Download
		</button>
	</div>
</div>
```

### Expanding scroll areas

Release fixed heights for print, like `print([overflow("visible"), bs("auto")])`, so content behind a scroll area reaches the paper. Open your browser's print preview to see the whole text:

```tsx
<div
	mix={[
		scroll("y"),
		bs(24),
		is(72),
		maxIs("100%"),
		print([overflow("visible"), bs("auto")]),
		...,
	]}
>
	<p mix={[...]}>
		This paragraph is taller than its box, so on screen the last lines of it are behind a
		scroll. On paper nothing scrolls, so the box grows to print every line of it.
	</p>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.print(u.hidden()))
```

## Signature

```ts
u.print(input: UtilityInput<Node>)
```