twbs / twbs/bootstrap

Suggestion: Utility class for `font-variant-numeric: tabular-nums` (not to be confused with `.font-monospace`)

Open
#42,872 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css feature v5 v6
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Prerequisites
Proposal

I'd propose to add .font-tabular-nums or similar or .table-tabular-nums to set font-variant-numeric: tabular-nums.

https://caniuse.com/font-variant-numeric
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-numeric
https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-numeric

The example on mozilla.org might be misleading, the w3c example shows an example rendering and the goal achieved:

Image

For a better comparision:
https://codepen.io/editor/alexplus/pen/01a04337-f30e-7f7b-84b6-94420d1f6d8d

Preview:

Image Image
Motivation and context

Aside from monospacing, there are supported options for fonts to have numbers aligned between rows.

There are some best practices in typography for decades, also regarding differences between 0 O but are often not supported by fonts. But tabular-nums is, that's why I suggest to add only this - not the other values.

I would NOT suggest to make this a default table behaviour though, it should be enabled on each table-cells.

I'd prefer to see this on a font-level as there are scenarios to want this behaviour in paragraphs, not just table cells:

  1. phone numbers
  2. currency amount
  3. opening hours
  4. or any other cases with numbers if those should visually be "monospaced" but keep the font and not to switch into a different mono-spaced font.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Start by reviewing Bootstrap’s existing font and utility-class conventions, then consult the linked Can I Use and MDN references for browser support. Done means a documented utility applies font-variant-numeric: tabular-nums without changing the default table behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, css, scss
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.