How to force size justified?

Navigation
6

Example scenario

I have a dynamically generated (php) table, and one of the columns is vehicle license plates.

The problem is that there is 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, it depends on the source too ).

Sample image above :

Questions

  • What would you like to make them equally aligned (justified !?), but would be for a specific size, and not between all the results (otherwise, they would vary in the same way).
asked by anonymous 31.08.2018 / 12:54

2 answers

5

As a matter of curiosity, another option, other than that quoted by @wiliamvj friend would be to use a mono-spaced font as the monospace , consolas or Inconsolata

This kind of type-face has all the characters with the same "width", so kerning is always the same regardless of whether it is the letter I or M a "width" of the character is always the same.

See the example: 

body {
	font-family: monospace;
}
<div>
  iii-1111
</div>
<div>
  mmm-0000
</div>

OBS: Note that in the snippet , even without running the characters, they already appear inline :) (the source of the snippet is the Consoles) >

To better understand what is kerning see this image:

    
31.08.2018 / 13:36
4

You could use the justify ( text-align="justify" ) attribute, but it is no longer supported in HTML5, so the only way I know it 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>
    
31.08.2018 / 13:20
What is the C / C ++ volatile operator? How to remove a file from the staging area in git?