- Docs
- Parameters
- media_type
media_type
Choose whether Chrome applies screen or print media styles when rendering.
How it works
Section titled “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
Section titled “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
Section titled “Render with print styles”curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \ --data-urlencode url="https://example.com" \ --data media_type=print{ "url": "https://example.com", "media_type": "print"}Example with different screen and print styles
Section titled “Example with different screen and print styles”{ "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
Section titled “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")
Need help?
Talk to a human. Email support@htmlcsstoimage.com and we’ll help you get started.