This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I wanted to share a quick tip I just learned from Henry Desroches on how to prevent the layout shift that occurs with numbers that have different widths.
Let’s dig in!
An example
Imagine you have a counter app you can use to increase a number from 0 to 5, and display it in the UI. The HTML, looks like this.
<button data-count="down">Decrease</button>
<span class="count" aria-live="polite">
0/5
</div>
<button data-count="up">Increase</button>Whenever someone clicks one of the [data-count] buttons, you increase or decrease the count by 1, and update what’s displayed in the UI.
let count = document.querySelector('.count');
let total = 0;
// Listen for click events
document.addEventListener('click', function (event) {
// Only run on [data-count] buttons
let direction = event.target.getAttribute('data-count');
if (!direction) return;
// If counting up and total is less than 5, increase the count
if (direction === 'up' && total < 5) {
total++;
count.textContent = `${total}/5`;
return;
}
// If counting down and total is greater than 0, decrease count
if (direction === 'down' && total > 0) {
total--;
count.textContent = `${total}/5`;
}
});
Notice how as the number jumps from 0 to 1, the Increase button shifts left, because 1 is narrower than 0. Then, as you increase from 1 to 2, it shifts right again, because 2 through 5 are wider.
Let’s fix that!
The font-variant-numeric: tabular-nums property
The font-variant-numeric: tabular-nums CSS property is an Open Type feature that tells the browser to render numbers with a consistent width.
It’s not available in all fonts, but for those that support it, it prevents that layout shift from happening.
.count {
font-variant-numeric: tabular-nums;
}Here’s an updated demo. Now, there’s no more layout shift as the numbers increase and decrease.
If you want to learn more about other Open Type features, my friend Jason Pamental goes into a lot of detail on over at Responsive Web Typography.
⏰ Last Chance! A new session of the Vanilla JS Academy starts on Monday. Join today and get 25% off registration.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-03-28T14:30:00+00:00) Preventing layout shift with numbers using CSS. Retrieved from https://www.scien.cx/2022/03/28/preventing-layout-shift-with-numbers-using-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.