fixed character width for an imported font

Question

Working on a app that requires a count up and have chosen the font Orbitron for its square look.

The problem being that,unlike the default font on chrome, the width of this font's digit isn't fixed, meaning that the count characters will move left and right depending of the size of the digits being displayed.

Here's the problem illustrated in a fiddle: https://jsfiddle.net/qc863hc4/8/

Only solution I found so far is to separate the two digits into two different divs so that their position is calculated independently, but it seems over-complicated.

Is there any way to fix the width of the characters of the <p>?

HTML

<body>
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <div class="countainer">
    <p class="count">00</p>
  </div>
  <button>
  count++
  </button>
</body>

CSS

.countainer{
  width : 100px;
  height : 50px;
  border: 2px solid black;
  font-size: 40px;
  text-align : center;
  letter-spacing : 15px;
  text-indent : 10px;
  font-family : "orbitron";
}

.countainer p {
  margin : 0;
}

JS

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
  p.innerHTML = ("0" +count).slice(-2);
})

Here's an update to your original fiddle that might help you: https://jsfiddle.net/teddyrised/qc863hc4/26/ — Terry, Apr 19 '18 at 15:30

score 1 · Accepted Answer · answered Apr 19 '18 at 15:36

As it is explained in the other answers you can't do this with pure css, your idea to set each number inside an element, isn't bad at all you can use it like this

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
   var value = ("0" +count).slice(-2);
   var arr = value.split('');
   value = arr.map(function(element) {
    return '<span>'+element+'</span>';
   }).join('');
   p.innerHTML = value;
})

https://jsfiddle.net/RACCH/t8xg6dys/

fixed character width for an imported font

1 Answers1