Mastering CSS Print Media Queries for Markdown to PDF

If you read Markdown files on the web, they are styled for screens. They feature bright navigation headers, scrollable layouts, interactive buttons, and colorful links. However, when you want to convert that same Markdown document into a PDF for printing or formal distribution, screen styles fall short. You need to adjust margins, hide web-only components, optimize typography, and control where pages break.

In this guide, we’ll cover how to use css print media queries markdown to pdf conversions. By using @media print, you can write custom CSS that applies only when the document is being compiled into a PDF.

What is a Print Media Query?

A CSS media query allows you to apply different styles based on the device type. The @media print query is triggered whenever a document is printed to paper or exported to a PDF format.

By wrapping your print-specific CSS inside @media print, you can ensure that your Markdown looks great on screen during editing, but formats beautifully when exported.

/* Styles for web preview / screen editing */
body {
    background-color: #1e1e2e;
    color: #cdd6f4;
}

/* Styles applied ONLY to the PDF export */
@media print {
    body {
        background-color: #ffffff;
        color: #000000;
        font-size: 11pt;
    }
}

Essential Styling for PDF Exports

Here are three essential techniques you can use inside a print media query to optimize your Markdown-generated PDFs.

1. Hiding Web-Only Elements

Websites often include interactive widgets, sidebars, share buttons, and navigation menus. These elements are useless on paper and waste space.

@media print {
    nav, 
    .sidebar, 
    button, 
    .interactive-banner, 
    .footer-links {
        display: none !important;
    }
}

2. Printing Link URLs Next to Anchor Text

In digital documents, you click links. In printed documents, you need to read the actual URL. You can use CSS pseudo-elements to automatically append the link target next to the anchor text in the PDF:

@media print {
    a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555555;
    }
}

If your Markdown has [Google](https://google.com), the PDF will render it as: Google (https://google.com).

3. Managing Page Breaks and Layouts

Prevent headers from getting separated from their following paragraphs at the bottom of the page, and prevent images from cutting in half.

@media print {
    /* Prevent headers from standing alone at the bottom of a page */
    h1, h2, h3 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Force a new page for major sections */
    .new-chapter {
        page-break-before: always;
        break-before: page;
    }

    /* Prevent images and code blocks from splitting across pages */
    img, pre {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

Best Practices for Print Stylesheets

• Use Absolute Units: When designing for print, use units like in, cm, mm, or pt instead of px or em. For example, margin: 1in; or font-size: 12pt;.
• Avoid CSS Shadows: Drop shadows (box-shadow and text-shadow) can render poorly or look blurry in PDFs. Turn them off for clean vector shapes.
• High Contrast: Use high-contrast dark text on a light background.

Try It Yourself

Want to test how print media queries improve your documents? Try our Markdown to PDF Editor. It allows you to build templates, write CSS containing @media print queries, and see exactly how your document formats when transitioning from screen view to PDF export.