CODEWITHSUNDEEP
htmlcssfonts
Hao Wu
Hao Wu

Reputation: 20689

How do I make the width of each character the same?

I'm using a custom font. The design doesn't allow me to change font.

While the number change, the content after it got pushed around due to the different width of digits.

Is there a way to make all the digits same width? I don't want to assign the width of the span component because I need this to be inline and the width should be determined by the number of digits it has.

const numberDom = document.querySelector('.number');
let number = 0;

function tick() {
  number += 1;
  numberDom.innerText = number;
}

setInterval(tick, 50);
p {
  font-size: 1rem;
}

.number {
  font-family: 'Carter One', cursive;
  font-size: 1.5rem;
  color: #365;
}

.number::after {
  content: 'pt';
  font-size: 0.75em;
  margin-left: 0.1em;
  color: #587;
}
<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">

<p>You got <span class="number"></span>, good job!</p>

Upvotes: 1

Views: 2635

Answers (3)

Khondaker tanvir mahmud
Khondaker tanvir mahmud

Reputation: 111

You can use

.numbers{
 font-family: Tahoma;
}

It will fix the number jumping/height abnormality issue. Use any monospace font as font-family and you will fix the issue.

Upvotes: 1

xmaster
xmaster

Reputation: 1050

Okay so first I made a function that it changes the looks of your <p>. after that the only solution I could find to stop the jiggling was to put the number in an inline-block.

Here is my fiddle

Edit

I made a script that changes the width of the inline-block. It's an if statement that if your number is 1000 or higher the width will change.

Fiddle

You can always make an else if with over 10000 et cetera.

Upvotes: 1

UI Developer
UI Developer

Reputation: 78

Change your number class as:

.number {
    font-family: 'Carter One', cursive;
    font-size: 1.5rem;
    color: #365;
    width: 56px;
    display: inline-flex;
}

Upvotes: 2

Related Questions