WORKFLOWS

The Ultimate Plain Text & Markdown to PDF Export Guide

Generating Clean Vector PDFs with Pure CSS Print Media Queries

By Sheikh Faraz Ahmed • • 7 min read • 100% Client-Side
Markdown to vector PDF conversion workflow illustration
Markdown to vector PDF conversion workflow illustration

Why Server-Side PDF Converters Compromise Quality

Many web-based PDF generators upload your raw Markdown to a remote headless browser or third-party API. Beyond exposing sensitive documents to third-party servers, server-side converters frequently introduce layout shifts, blurry rasterized typography, and missing system fonts.

By relying on native browser print media queries (@media print), you generate 100% crisp, searchable vector PDFs locally in milliseconds.

Essential CSS Print Media Declarations

To ensure headings never leave orphaned lines and code blocks don't split awkwardly across page margins, configure these CSS print rules:

css
@media print {
  /* Hide navigation, sidebars, and ads */
  header, footer, nav, .ad-banner, .toolbar {
    display: none !important;
  }

  /* Optimize page layout and margins */
  @page {
    margin: 20mm 15mm;
    size: letter portrait;
  }

  /* Prevent page-break anomalies */
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  pre, blockquote, table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Step-by-Step Clean PDF Generation Workflow

  1. Write your document in standard Markdown using structured # H1 and ## H2 tags.
  2. Toggle the Markdown Preview mode in Olevx to confirm table borders and list spacing.
  3. Click Export > Save as PDF or press Ctrl + P / Cmd + P.
  4. Ensure Destination is set to Save as PDF and disable Headers and footers for a pristine publication-grade finish.
SF

Sheikh Faraz Ahmed

Product Architect & Founder

About the Author →

Related Guides & Workflows