Context
Most browser-based markdown tools export a PDF by rasterizing the page. What comes out is an image of text: nothing selectable, nothing searchable, links dead, headings soft at any zoom above 100 percent. The interesting constraint was that a browser already contains a typesetting engine capable of producing proper documents. It is the print engine, and it is usually ignored in favor of a screenshot.
My role
Sole developer. Built the editor, the live preview, and the export pipeline.
Process
- Rendered the PDF through the browser own print engine rather than a canvas capture, which keeps the output as real text: selectable, searchable, and vector sharp at any zoom, with hyperlinks still clickable in the finished file.
- Made the on-screen paper preview and the printed sheet the same DOM node under the same stylesheet, so what the author sees matches what prints by construction rather than by two layout engines happening to agree.
- Governed pagination with CSS print rules instead of leaving it to chance: headings stay with the paragraph they introduce, code blocks and tables refuse to split across a page boundary, and orphan and widow limits keep single lines from stranding.
- Forced the printed sheet to an ink-friendly light palette regardless of the app theme, so a user working in dark mode does not print a black rectangle.
- Reused the same markdown pipeline for the live preview, the HTML export, and the PDF, which is what keeps three outputs from drifting into three slightly different documents.
- Exposed layout as a small set of named presets rather than raw numbers, mapping each to the CSS the print engine consumes in one place.