I would like to list a vertically aligned set of numbers with the 0s digit perfectly aligned. This means any number with a fractional piece (.0001) would need to be shifted to the right so the fractional piece exceeds the container boundary. Likewise, a percentage like 58% would need to shift the % out of the container. Or something like “532,532/day” would need to shift /day out of the container. And so on. One of the problems I’ve encountered using CSS right:
or transform: translateX()
is that even in em
units it doesn’t seem to always be the # of characters I would think to achieve visual alignment. That probably is due to varying width of characters. And while I could maybe get that to work for %, it wouldn’t work for a varying length fractional piece.
Examples:
134,435,234
23,135
22
513.0353
85%
2,532/day
8/ea
Is this doable in CSS? If not, is there a simple, concise (elegant) Javascript option? I know I could cobble together something ugly in Javascript, but looking for elegance.