CODEWITHSUNDEEP
htmlcssfontscharacter
Eliâ Melfior
Eliâ Melfior

Reputation: 369

Accounting for character size difference

So, supposing that i have to fill the space below (Of a definite width) with characters:
-----------------------
AAAAAAAAAAA (11 Characters cover it when these characters are all uppercased As)
-----------------------
aaaaaaaaaaaaa (13 Characters cover it when they are lowercased as)

Is there any way i can account for these differences and adjust my width in HTML accordingly? (So my program would read the characters and the resulting "width" from the sentence)

The problem lies in which characters are used, the user can input everything from simple letters to numbers and special characters, is there a definite known solution for this problem?

Edit.:
(Using a monospace font is not an option)

Upvotes: 0

Views: 59

Answers (1)

James Douglas
James Douglas

Reputation: 3446

Warning, only works in Firefox, at time of post:

https://caniuse.com/#feat=css-text-justify

If you can't use a monospace font, then you could try using CSS text-align: justify;, text-align-last: justify; and text-justify: inter-character; on a container <div> to ajust the spacing between the lowercase a's to make it the same width as the same number of uppercase A's:

.justify {
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}
<h4>Before:</h4>
<div>
  <span>AAAAAAAAAAA</span>
  <br>
  <span>aaaaaaaaaaa</span>
</div>
<h4>After:</h4>
<div class="justify">
  <span>AAAAAAAAAAA</span>
  <br>
  <span>aaaaaaaaaaa</span>
</div>

Note that you will also need a display: inline-block on the container <div> so that the letter spacing doesn't expand to take up the whole width of the screen. eg

Upvotes: 1

Related Questions