Joe Shaw
Danny LinMore people need to know about the "tabular numbers" feature that modern fonts have
Use it to make numbers to line up with a UI font (or anything not monospace)
CSS: font-feature-settings: tnum
SwiftUI: .font(.body.monospacedDigit())
Example with the same numbers. Doesn't really change much
Also, a better way to apply it in CSS (thanks for the replies):
font-variant-numeric: tabular-numbers;
Wildduck
ernstb
Torsten Grote@kdrag0n
Does Android have that?
Does Android have that?
Jakub@kdrag0n
font-variant-numeric: tabular-nums; are very high on my list of most annoying things to forget on a delayed frontend task... and it surely is high on my QAs list of easy wins ;-)
font-variant-numeric: tabular-nums; are very high on my list of most annoying things to forget on a delayed frontend task... and it surely is high on my QAs list of easy wins ;-)
Kai Klostermann@kdrag0n Why... why is it bad?
Cassidy James 
@kdrag0n we use these in GNOME for file transfer dialogs, where we show a percent or progress, like ā3 of 5 files transferred.ā It prevents the text around the number from moving around!
Angelo Verlain@cassidy @kdrag0n if you add the `.numeric` style to a widget. the libadwaita stylesheet will ensure tabular numbers.
https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
Kenneth
WC System@kdrag0n Wow! I learned something new today! Thank you very much!
@kdrag0n TIL. neat. does it do "align on decimal point" too?
Luke Channings
Thomas N (old account) 
@kdrag0n in SwiftUI you can also just do .monospacedDigit() if you donāt need to set the font
@kdrag0n once upon a time all fonts had monospaced digits for precisely this reason. Why do non-tabular digits even exist?
Resuna
Michael Cook@kdrag0n Iāve never heard of this before. But I have the perfect use right now. Thanks!
Bepely
The Reply Guy@kdrag0n Just hit tab and it'll line it up for you
Dec [{(
)}]
Saagar Jha
Mdsanto1Really confusingš©
avie!!!@kdrag0n this is awesome, thanks for putting me onto this! one small note:
from MDN:
font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.These lead to more effective, predictable, understandable results than
font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature.here's how to enable tabular numbers using the MDN recommendations:.my-selector {
/* shorthand */
font-variant: tabular-nums;
/* longhand */
font-variant-numeric: tabular-nums;
}https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
Marcel Waldvogel@kdrag0n
Getting numbers in tables right will definitely keep many eyeballs sane.
However, getting numbers in tables right in the right way is also important.
The recommended high-level way (which does not depend on OpenType implementation details) is:
font-variant-numeric: tabular-nums;
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
J@kdrag0n OpenType font features are amazing - and absolutely a deep rabbit hole :D https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide
OpenType font features guide - CSS: Cascading Style Sheets | MDN
Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and several others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and low-level control properties ā font-feature-settings. This article provides you with all you need to know about using OpenType font features in CSS.
Lukas@kdrag0n Using tabular figures is even more important when displaying changing numbers, such as in progress indicators or clocks.
It's somewhat of a pet peeve of mine, so I once wrote a blog post on it: https://blog.horizon-eda.org/misc/2020/02/19/ui.html
Once you've seen it, it's everywhere!
Hugo éØę
ljĀ·rkLaTeX + fontspec
```
\addfontfeatures{Numbers=Monospaced}
```
bspw. in jeder Tabelle:
```
\AtBeginEnvironment{tabular}{\addfontfeatures{Numbers=Monospaced}}
```
@kdrag0n Old fashioned fonts were simply supposed to have fixed-width numbers even if they were not monospaced. I recall getting quite cranky with ones that made "1" narrower than "0".
Conor O'Neill@kdrag0n
And please right-align the column too!
And please right-align the column too!
Matthew Bender
Tipiak75 
š@kdrag0n fonts that support this setting should be better advertised on font library sites as well. Thanks anyhow, you made my day !
Sƶren@kdrag0n WPF: Typography.NumeralAlignment="Tabular"
Rockwell Schrock@kdrag0n In Tailwind this can be applied via the `tabular-nums` class. https://tailwindcss.com/docs/font-variant-numeric
Alina Yossimouse@kdrag0n it is my absolute pet peeve when progress percentage displays jump around because who ever styled it didn't know about tabular numbers, a feature available for decades now
Dave Bryant aka Tom_Clowder@kdrag0n . . . And _donāt_ use it in running text, where it ends up looking awkward and unevenly spacedāa form of bad kerning. (Sorry, as a professional typesetter and graphic designer who sees that far too often, I had to put in my two centsās worth.
King Naga Calyo Lucere-Delphi@kdrag0n I AM BOOKMARKING THIS
And then I am probably going to adhd forget about it by the end of today
Mazzo
tauli@kdrag0n Funny that Swift has that feature built in, but list view in macOS Finder doesn't use it.