Can I have equal space per letter in web page?

0

Issue

For a web page, I want to have a paragraph with disguised words, much like hangman. But instead of guessing letters, they guess words.

So you might see:

_ _ _ _ _     _ _ _

Then if they guess ‘there’, you would get:

there _ _ _

But I don’t want the words and text to jump around as words are guess correctly.
Like _ _ _ _ _ takes up more width than ‘there’, so when they guess it, the _ _ _ would jump to the left, if you know what I mean.

Also, _ _ _ _ _ has spaces in between the chars otherwise you would get _____. So if I simply replace each _ in _ _ _ _ _ you would get ‘t h e r e’ which isn’t what I want either.

Anyone know what I mean and how to make this look good?

Also, I am doing this in Blazor if that matters.

Solution

What your searching for are monospaced fonts: https://en.wikipedia.org/wiki/Monospaced_font

See this for a list of known monospaced fonts:
https://en.wikipedia.org/wiki/List_of_monospaced_typefaces

There are a bunch of monospaced fonts provided by GoogleFonts:
https://fonts.google.com/?category=Monospace

By using one of them every character including a space will take the same width.

Answered By – Fabian S.

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More