# media_type

Choose whether Chrome applies screen or print media styles when rendering.

## How it works

The `media_type` parameter controls the CSS media type Chrome emulates. It affects `@media` rules, linked stylesheets with a `media` attribute, and JavaScript checks such as `window.matchMedia()`.

## Values

| Value | Description |
| --- | --- |
| `screen` | Apply styles intended for screens. This is the default when `media_type` is omitted. |
| `print` | Apply print-specific styles, including rules inside `@media print`. |

## Render with print styles

```bash
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
     --data-urlencode url="https://example.com" \
     --data media_type=print
```

```json
{
  "url": "https://example.com",
  "media_type": "print"
}
```

## Example with different screen and print styles

```json
{
  "html": "<article><h1>Quarterly report</h1><nav>Navigation</nav><p>Report content</p></article>",
  "css": "article { padding: 32px; } @media screen { article { background: #eef6ff; } } @media print { nav { display: none; } article { background: white; color: black; } }",
  "media_type": "print"
}
```

In this example, the navigation is hidden and the print color scheme is applied before the image is captured.

## Common use cases

Use `media_type: "print"` to:

*   Preview a webpage’s print stylesheet
*   Hide navigation, controls, or other screen-only elements
*   Render layouts that use print-specific typography or page-break rules
*   Test how a page responds to `window.matchMedia("print")`

Output format

`media_type` controls CSS rendering only. It does not change the output format to PDF. Request the generated image URL with a `.pdf` extension when you need a PDF.

## Need help?

Talk to a human. Email [support@htmlcsstoimage.com](mailto:support@htmlcsstoimage.com) and we’ll help you get started.