Wzorzec 12

Liczby, które nie drgają

W większości fontów cyfra 1 jest węższa niż 8, więc tykający zegar faluje, a razem z nim wszystko obok. Wariant tabular-nums daje cyfrom wspólną szerokość, a slot o szerokości najdłuższego zapisu domyka sprawę.

Timer i cena na żywo

Te same wartości po obu stronach. Po lewej cyfry proporcjonalne falują i telepią sąsiadów, po prawej tabular-nums i slot w jednostkach ch trzymają wszystko w miejscu.

✕ Cyfry proporcjonalne

Czas pracy0:00,0w tym sprincie

Budżet dnia111,11zł netto

✓ tabular-nums w slocie

Czas pracy0:00,0w tym sprincie

Budżet dnia111,11zł netto

Reguły

Zmienne liczby renderują się z font-variant-numeric: tabular-nums.
Slot liczby ma szerokość najdłuższego możliwego zapisu, na przykład w jednostkach ch.
Jednostki i etykiety stoją poza slotem, więc nie wędrują za cyframi.
Animowana wartość zmienia tekst, nigdy szerokość kontenera.

Wzorzec w kodzie

Slot w ch mieści najdłuższy zapis, etykiety stoją obok

<p className="flex items-baseline gap-2">
  Budżet dnia
  <span className="inline-block min-w-[6ch] tabular-nums">
    {price}
  </span>
  zł netto
</p>

To samo czystym CSS

.counter {
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
}