Text and typography / font-variant-numeric
How to align numbers in a PDF table column
font-variant-numeric: tabular-nums switches to fixed-width digit glyphs, so every digit occupies the same horizontal space.
What it is for
Proportional digits are narrower for 1 than for 8, which means a column of currency values does not line up even when it is right-aligned, because the decimal points drift. This is the single highest-value typographic setting for a financial document.
Support: Works everywhere
Works wherever the font has tabular figures, which most professional families do. Fonts without them silently keep the proportional set.
The syntax
Written the way it would appear in a document stylesheet, using font-variant-numeric as intended.
.amount,
.document td.numeric,
.totals {
font-variant-numeric: tabular-nums;
text-align: right;
/* Slashed zero, where the font offers it and the document is read closely. */
font-feature-settings: "zero" 1;
}The mistake people make
Assuming right alignment is enough. It aligns the last character, which is not the decimal point once the digits have different widths.
Frequently asked
Does font-variant-numeric work when generating a PDF?
Works everywhere. Works wherever the font has tabular figures, which most professional families do. Fonts without them silently keep the proportional set.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to embed a custom font in a PDF
@font-face. Works everywhere.
Which font-display value should a PDF use
font-display. Works everywhere.
How to use different fonts for different scripts in a PDF
unicode-range. Works everywhere.
How to enable hyphenation in a PDF
hyphens. Works everywhere.
How to wrap long URLs and reference numbers in a PDF
overflow-wrap. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.