Developing an application that necessitates counting up and opting for the font Orbitron due to its square appearance.
The issue arises as, unlike the default chrome font, the width of this font's digits is not consistent, causing the count characters to shift left and right depending on the displayed digit sizes.
You can see the problem demonstrated in this fiddle: https://jsfiddle.net/qc863hc4/8/
The only solution found thus far is to separate the digits into different div elements so their positioning can be calculated independently, but this approach appears overly complex.
Is there a way to regulate the character width within 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);
})