CSS reference¶

The HTML WeasyPrint lays out is pandoc's HTML plus the markup the steps and plugins add. This page lists what a template can style. To see the HTML of a real export, use --debug.

Order of the CSS¶

1. The base CSS of ope (<style id="obsidian-pdf-exporter-base">), at the start of <head>. It holds working defaults for the markup ope adds, so a template does not need rules for it.
2. The template CSS (get_css() or the folder's main CSS).
3. The template's page_css, if any.

A later rule wins, so a template can restyle everything from the base CSS.

Colour and font variables of default¶

default.css keeps its colours and fonts in custom properties on :root. A template that starts from a copy of it can change the look by changing these:

The redline template adds --color-ins-bg, --color-ins-text, --color-del-bg and --color-del-text.

Document structure¶

Text¶

Tables¶

Tips:

• Do not put break-inside: avoid on table. A table that does not fit the rest of a page would then jump to the next page and leave a gap. Put it on tr: the table breaks between rows and the header row repeats.
• td, th { overflow-wrap: break-word } is in the base CSS, so long words wrap.

Callouts¶

.callout-warning { background: #fff8e1; border-left-color: #f59e0b; color: #7a4b00; }
.callout-title { text-transform: uppercase; letter-spacing: 0.03em; }
.callout[data-callout="checklist"] { border-left-color: #2c7a7b; }

Images and diagrams¶

Mermaid diagrams¶

A rule of the template wins over the size ope sets, because ope gives the size as a rule with zero specificity:

.mermaid-pie   { height: 6cm; width: auto; }
.mermaid-gantt { width: 100%; }

A diagram is never wider than the text (max-width: 100%). default styles images with img:where(.doc-image), so a class rule such as .mermaid-pie also wins over its height: auto. A template that sets height on img.doc-image needs a selector that is at least as specific, for example img.mermaid-pie.

Footnotes¶

Each footnote is a span.footnote with data-footnote-number at the place of its reference. The base CSS floats it to the footnote area at the bottom of the page:

.footnote { float: footnote; font-size: 0.75rem; line-height: 1.35; font-weight: normal; font-style: normal; }
.footnote::footnote-call { content: attr(data-footnote-number); vertical-align: super; font-size: 0.65rem; line-height: 0; }
.footnote::footnote-marker { content: attr(data-footnote-number) ". "; }
.footnote-paragraph { display: block; }
@page { @footnote { margin-top: 0.8em; padding-top: 0.3em; border-top: 0.5pt solid #999; } }

A note takes its style from where it is referenced, so a note referenced in a callout inherits its colour. default sets .footnote { color: var(--color-dark) }. Use data-footnote-number, not counter(footnote): the numbers come from pandoc and run through the whole document, also into the list at the end.

Redline¶

The colours are the variables --rl-ins, --rl-del, --rl-move, --rl-fmt and --rl-bar. All elements and how to restyle them: Styling the redline.

The base CSS¶

ope adds this before the template CSS. A template can override any of it.

ul.task-list, ol.task-list { list-style: none; }
ul.task-list > li, ol.task-list > li { list-style: none; }
.task-checkbox { display: inline; margin-right: 0.4em; font-family: "DejaVu Sans", sans-serif; }
span.math.display { display: block; text-align: center; margin: 0.6em 0; }
svg.math-svg { display: inline; overflow: visible; }
.math-source code { white-space: pre-wrap; }
td, th { overflow-wrap: break-word; }
.landscape-figure .landscape { margin-left: auto; margin-right: auto; }
figure.pdf-embed { break-inside: auto; page-break-inside: auto; }
img.pdf-embed-page {
  display: block; margin: 0 auto 0.8em; box-sizing: border-box;
  width: auto; height: auto; max-width: 100%; max-height: 22cm;
  border: 0.75pt solid #999; break-inside: avoid;
}
.pdf-embed-more { font-size: 0.85em; color: #666; margin: 0 0 0.3em; }
figure.pdf-embed figcaption { break-before: avoid; page-break-before: avoid; }

plus the footnote rules above, and one rule per image width used in the document (:where(img[width="300"]) { width: 300px; }), because WeasyPrint ignores the width attribute.

WeasyPrint is not a browser¶

• Flexbox and grid work only in part. Block layout, simple flex and CSS counters are safe.
• Images cannot be split. An image that does not fit below the current text moves to the next page. Limit its size, for example with max-height, to keep it on the page.
• Print media applies: @media print rules are used.
• Supported CSS is listed in the WeasyPrint docs.