I'm working on a small audiobook project with custom player controls. Unfortunately, when displaying the progress and time remaining, the numbers shift a bit and cause the progress track to jump around a bit.
CSS to the Rescue! Watch the video below to see how CSS's font-variant-numeric property can be used to solve this problem.
TL:DW : By default, CSS uses font-variant-numeric: normal to display numbers. This means the numbers just take up as much space as the need. When numerals that are wider are displayed it causes some shifting. To avoid this, use font-variant-numeric: tabular instead. This will force all numerals to take up the same space.
UPDATE: Tailwind has a utility class for font variants. For my use case, tabular-nums provides the same functionality.
