Today I Learned - Rocky Kev

TIL how to make numbers the same width and prevent shifting layout

POSTED ON:

TAGS: css fonts twitter mdn

I give up at how font characters are different sizes. Outside of just changing font types, you're kinda screwed.

But there's hope with numbers. It's called font-variant-numeric

i think i've shared this tip before but if your font supports it, you can use font-variant-numeric: tabular-nums in your CSS to keep your numerals the same width and prevent shifting layout.

✨i think i've shared this tip before but if your font supports it, you can use `font-variant-numeric: tabular-nums` in your CSS to keep your numerals the same width and prevent shifting layout. pic.twitter.com/uqFDLXmI4T

— henry ✷ (@xdesro) March 27, 2022

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

via MDN

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')