Suggestion: Utility class for `font-variant-numeric: tabular-nums` (not to be confused with `.font-monospace`)
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
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:
For a better comparision:
https://codepen.io/editor/alexplus/pen/01a04337-f30e-7f7b-84b6-94420d1f6d8d
Preview:
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:
- phone numbers
- currency amount
- opening hours
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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