How to force justified size?

Question

Example scenario

I have a dynamically generated table (php), and one of the columns are vehicle boards.

The problem is you get one a certain difference as the letters and numbers are "larger" and/or "smaller".

Example: the letter I is narrower than the letter W, as the number 1 is narrower than the number 9 (of course, depends on the source as well).

Screenshot of the above example:

---

Doubts

• What I’d like is let them equally align (justified!? ), but it would be for a specific size, and not among all the results (because otherwise they would vary in the same way).

Answer 1

As a curiosity, another option, besides the one quoted by friend @wiliamvj would be you use a source mono spaced as the monospace, consolas or Inconsolata

That kind of type-face has all characters with the same "width", so the kerning is always the same no matter if it is the letter I or M the "width" of the character is always the same.

Take the example:

body {
	font-family: monospace;
}

<div>
  iii-1111
</div>
<div>
  mmm-0000
</div>

OBS: Notice that in the very snippet, even without executing the characters already appear aligned :) (the source of the snippet is Consoles)

To better understand what the kerning see this image:

---

Update

There is still another alternative, only with CSS, but does not work in IE/Edge and can only be applied in font numbers in the format OpenType (Opentype is a font format that has better system support, and works on both iOS and Windows, here you can read more)

To adjust the text only with CSS we will use the property font-variant-numeric with the value tabular-nums. Here you can read more about this property. And summing up the source needs to be .OTF and only works with numbers, normal text does not work!

Nassa image was used font-variant-numeric: tabular-nums;

Code of the image above

body {
  font-size: 24px;
  line-height: 18px;
  font-family: fantasy; /* essa fonte aparentemente é .OTF no windows funciona */
}

p.tnum {
  font-variant-numeric: tabular-nums;
}

h4 {
  font-family: 'Times New Roman', Times, serif;
}
div {
  float: left;
  margin: 20px;
}
b {
  color: red;
}

  

<div>
  <h4><b>SEM</b> tabular-nums</h4>
  <p>1111111111</p> 
  <p>1234567890</p>
</div>

<div>
  <h4><b>COM</b> tabular-nums</h4>
  <p class="tnum">1111111111</p> 
  <p class="tnum">1234567890</p>
</div>

Official documentation W3C: https://drafts.csswg.org/css-fonts-3/#propdef-font-Variant-Numeric

Answer 2

You could use the attribute justify (text-align="justify"), but is no longer supported in HTML5, so the only way I know is via CSS.

#teste {
    width: 100%;
} 

p {
   margin: 0 auto;
   max-width: 30%;
   text-align: justify;
}
#teste p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<div id="teste">
  <p>III - 1111</p>
  <p>WWW - 9999</p>
  <p>III - 1111</p>
  <p>WWW - 9999</p>
</div>