Obsidian CV CSS Snippet

Write your CV as a Markdown note in Obsidian and export it to a clean, ATS-safe PDF — with reading view showing you exactly what the PDF will look like.

The snippet turns any note tagged cssclasses: [cv] into a white, serif, print-shaped page. Editing view deliberately stays on your normal (dark) theme so you are not writing into a white screen; reading view is the deliverable.

Why reading view matters

Obsidian's PDF export is reading view — the export renderer walks the same DOM. So the useful goal is not "make the PDF look good", it is "make reading view and the PDF the same thing", after which the PDF looks after itself.

That is the whole design of this snippet. Reading view takes over --background-primary, sets color-scheme: light, overrides the theme's heading colours and sets its own line width, so nothing from your dark theme leaks into the page. What you see is what exports.

Install

1. Download CV.css.
2. Drop it in YourVault/.obsidian/snippets/.
3. Settings → Appearance → CSS snippets → reload → enable CV.

Use

Add the class to the note's frontmatter:

---
cssclasses:
  - cv
---

Then write ordinary Markdown. Example CV.md in this repo is a complete working CV; open it in a vault with the snippet enabled and export it to compare against Example CV.pdf.

The contact block

The row of contact details under your name is a blockquote containing a list:

> - Lisbon - Portugal
> - [jordan.blake@example.com](mailto:jordan.blake@example.com)

> - [+351 900 000 000](tel:+351900000000)
> - [linkedin.com/in/example](https://linkedin.com/in/example)

One blockquote per row. It renders as centred, evenly spaced, marker-less inline items.

This looks like an odd choice, and it is deliberate. A blockquote is core Markdown that a CV would never otherwise use, which makes it a styling hook that cannot collide with anything else in the document — unlike styling all lists, which would take your bullet points with it. It also means no raw HTML, which matters for the next section.

Export settings

Settings → Export → PDF, or the export dialog:

Setting	Value
Page size	A4 or Letter, to taste
Margin	0 — the snippet sets its own page margins
Downscale	100%, or lower to force a page count

ATS notes

Applicant tracking systems parse the PDF's text layer. A few properties of this snippet exist specifically to keep that layer clean, and they are worth understanding if you modify it.

Contact details flow in reading order. The obvious way to build a centred contact row is display: inline-flex. Don't. Chromium then emits the text layer in column order, and pdftotext returns your location, then your phone number, then your email — fields interleaved across rows, in the one region a parser most needs intact. This snippet uses inline-block items in a normal line box, which flow in DOM order, so the extracted text matches what the page shows.

No CSS-generated separators. It would be easy to put a • between contact items with content:. CSS-generated characters land in the PDF text layer too, and a stray bullet inside a parsed contact field is noise. Spacing does the separating here.

No list markers in the text layer. Chromium draws ::marker as vector art, so ordinary bullet points never become stray • characters in the extracted text.

Check your own export rather than trusting any of this — one command, no tools to learn:

pdftotext YourCV.pdf - | head -40      # reading order, as a parser sees it
pdftotext -layout YourCV.pdf - | head  # visual layout, as a human sees it
pdffonts YourCV.pdf                    # every font should show emb=yes uni=yes

If pdffonts shows uni no on any font, the text layer will extract as garbage no matter how the page looks. If the reading-order output has your fields in the wrong order, something in your layout is flowing out of DOM order.

Customising

Every value lives in one block at the top of CV.css, on .cv rather than :root so it cannot affect the rest of your vault:

.cv {
  --cv-font-family: "Times New Roman", Times, serif;
  --cv-font-size-body: 11pt;
  --cv-font-size-h1: 20pt;
  --cv-paper: #ffffff;
  --cv-ink: #222222;
  --cv-rule: #999999;
  --cv-link: #2a6f9e;
  --cv-line-height: 1.25;
  /* … */
}

Two behaviours you might want to change, both marked in the file:

• Centred headings. h1 and h2 are centred in reading view only, so editing stays left-aligned and comfortable to write in. Remove the rule to centre both, or neither.
• The properties block is styled for the light page and then dropped from print entirely, on the grounds that frontmatter is scaffolding rather than part of the document. If you want it in the PDF, delete the @media print rule at the end.

Known quirks

Reading view and the PDF export are different renderers, and they disagree in ways worth knowing before you edit:

• The cssclass lands on a different element in each. Scope rules to .cv alone; keying off .markdown-preview-view or .markdown-reading-view will match one and silently miss the other.
• Reading view draws list bullets as a real <span class="list-bullet">, not a ::marker. No amount of list-style: none hides it. The export renderer never injects one — which is why a list can look correct in the PDF and still show bullets on screen.
• The app decorates external links with a trailing arrow glyph; the export does not. The snippet removes it inside the contact block so the two agree.

Files

File	What it is
CV.css	The snippet
Example CV.md	A complete working CV using it
Example CV.pdf	That file, exported, so you can see the result without installing anything

Requirements

Obsidian 1.x. Written against 1.13, and used with the Minimal theme — the snippet explicitly overrides Minimal's colourful headings, so it works with that setting on. It should work on any theme, since it overrides the theme's variables rather than relying on them.

Licence

MIT — see LICENSE.