AleksandrHovhannisyan/fluid-type-scale-calculator

Tabular numbers not well aligned

meduzen opened this issue · 3 comments

meduzen commented

On the following video, we see the total width taken by the number varies when the values change:

fluid-type-scale-numbers-alignment.mp4

This can be improved using CSS:

.my-class-for-numbers {
  font-feature-settings: "tnum"; /* optional */
  font-variant-numeric: tabular-nums;
}

font-variant-numeric alone should be enough.

Knowledge reference:

AleksandrHovhannisyan commented

@meduzen Thanks for flagging this! I'll take a look 👍

By the way, feel free to open a PR for this if you'd like to. There's a class for numeric columns here: https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator/blob/master/src/_includes/components/FluidTypeScaleCalculator/Preview/styles.module.scss#L19

Although I might move that CSS to the static utils stylesheet here since it doesn't need to be in a CSS module: https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator/blob/master/styles/_utils.scss.

If not, no worries; just let me know and I'll put up a PR.

meduzen commented

Not planning to work on it in the coming weeks, but if I see it still open in 2-6 months, I may give it a look.

You can proceed. 👍

AleksandrHovhannisyan commented

Cool, sounds good!