How do I force fonts to always have the same width?
I will dynamically be rendering content into these two grids. As you can see there always might be some space left on the sides of each grid item. I wanna force the element inside to always take up the full given space. What can I do?
Container structure: last picture.
I’ve already tried text-transform: full-width. It does what I want as you can see in my third picture but it changes my font dramatically. I don’t want that.
I also tried font-variant-numeric: tabular nums, but it did not change anything since I would also wanna display characters.
I’ve tried font: monospace but it also did not have any effect on my content width.
Is there a way to achieve the same width of characters/ elements inside a grid?
16 Replies
i have a better idea
split each character into a span
set the parent to display grid
set the first span to be on the left the other on the right
each span should have 1ch of width (set in the grid template and not on the element), with the text aligned in the middle - or left and right
this should give you a variable middle space, but everything in aligned in 2 columns
or make an svg
the tspan in an svg will change the height of the text if needed, to fit within the maximum width
a monospace font is an easier alternative, but may have a negative performance impact due to loading one extra file
So turns out, you gotta use both a monospace font and the grid....
https://codepen.io/Nandesh-S/pen/vYMVWay
I tried both our approch, the space varies too much if you don't use a monospace font
but if you use text-align as well, it works
its not as neat as a monospace font, but works
text-align left and right right?
Without monospace, with monospace
see? it works
now try centering, and it looks kinda semi half decent
There is only one option to make this work. The space there varies because of the legibility of those fonts. Monospace is not a help there.
The only option is to use a font that is uniwidth expecially for such usecase:
https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7
Medium
Uniwidth typefaces for interface design
Uniwidth typefaces have great potential for the use in interactive interfaces. This is a short compilation of some available typefaces.
It will still vary between the characters, but for example, when you like to interchange the font weight, this is better.
Hey people, thank you very much for all your suggestions. I can’t switch to a uniwidth font or monospace font. I tried the hacky way with a function that wraps each character into a span, but that’s not it, this solution comes with weird side-effects. I will let you all know how we solved our little spacing problem.
can you show the function?
You were right. This was the easiest way to solve my problem. I followed your suggestion and wrapped each character in a span.
Thanks again 😀
you're welcome