Monospace Font Consoles with 15px Height and 7px Width

Asked

Viewed 47 times

0

I’m trying to figure out how I can have a font size that is always exactly 7 pixels wide and 15 pixels high in all letters/characters.

I thought that font-family: consolas; with font-size: 12.73px; was perfect but after testing more accurately (calculating the size of 100 characters) I discovered the following:

function Atualizar(){
  document.getElementById('Font').style.fontSize = document.getElementById('Input').value + "px";
  document.getElementById('Horizontal').innerHTML = document.getElementById('Font').getBoundingClientRect().width;
  document.getElementById('Vertical').innerHTML = document.getElementById('Font').getBoundingClientRect().height;
}
Atualizar()
span {
  font-family: consolas;
}
<span id="Font">1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</span>
<br>
<br>
<span>Tamanho da font: </span><input id="Input" oninput="Atualizar()" value="12.739999294281004971196">
<br>
<span>Largura de 100 caratere: </span><span id="Horizontal"></span>
<br>
<span>Altura de 1 carateres: </span><span id="Vertical"></span>

Note: after writing, reading and listening to so much English online I have no idea if I write in Portuguese Haracter, character, characters, characters, etc. I read characters and characters (letter).

  • here are several terms used for characters: https://pt.wikipedia.org/wiki/Caractere

  • Thank you @Tomásantunes. ^^

1 answer

0


Me too I asked this question in Stackoverflow English and received the solution to use letter-spacing: 0.001px; what I’m not sure is perfect but is close enough.

Still, if anyone still has a better answer, I’d be grateful.
This is something that bothers me a lot but not so much now with this trick.

I am creating a text editor that will use a lot of Javascript and automatic positioning.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.