0

How can I have a fixed-size circle surrounding a variable sized number, which gets smaller if it doesn't fit in the circle?

I was looking at How to use CSS to surround a number with a circle? which is fairly similar to my problem. My issue arises with larger numbers, where the number would overflow the surrounding circle. The font-size of the number has to shrink in that case.

I don't want to use JavaScript for the task. However, I do consider a SVG.

Persijn
  • 14,624
  • 3
  • 43
  • 72
Julius
  • 1,155
  • 9
  • 19

3 Answers3

0

Since you mentioned you would consider an SVG without JS I hope this may help you https://codepen.io/anon/pen/daLoWN

<svg width="100" height="100" style="border: solid 2px; border-radius: 50%" xmlns="http://www.w3.org/2000/svg">
  <text x="0%" y="50%" textLength="100%">876543</text>
</svg>
krsna
  • 171
  • 2
  • 8
  • Thanks, this is actually pretty close! However, this doesn't work for me, since it doesn't change the actual size - it just changes the spacing. – Julius Feb 20 '19 at 12:59
0

How about this?

.circle {
  display: inline-block;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  padding: 5px;
  background: red;
  color: white;
  text-align: center;
  line-height: 1;
  box-sizing: content-box;
  white-space: nowrap;
}
.circle:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
  height: 0;
}
.circle span {
  display: inline-block;
  vertical-align: middle;
}
<div class="circle"><span>PERFECTLY ROUND NO MATTER THE FONT SIZE!!!!!!</span></div>

Here is the fiddle: https://jsfiddle.net/fcjwyzsd/4/

Antony Lawlor
  • 3
  • 4
  • Thanks, but I am actually specifically looking for a solution which does not affect the size of the circle, only the size of the font. – Julius Feb 20 '19 at 12:57
  • Ah I understand what you mean now, I think you will need to do this using javascript. Every time the number increased but one unit (for example 99 to 100) you would then change the font size of the element which the numbers are within - i'll mock something up and reply. – Antony Lawlor Feb 20 '19 at 14:07
0

Ok, how about this?

function myFunction(){

var size = document.getElementById('num').innerHTML;

switch(size.length) {
  case 3:
    // code block
        // code block
    document.getElementById('num').style.fontSize = "60px";
    document.getElementById('num').style.marginTop = "15px";
    break;
  case 2:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  case 1:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  default:
    // code block
}

}
.circle{
  width:100px;
  height:100px;
  background-color:red;
  border-radius:50%;
  text-align:center;
}
div > span{
  display:inline-block;
  font-size:60px;
}
<body onload="myFunction();">

<div class="circle">
<span id="num">999</span>
</div>

</body>

Fiddle: https://jsfiddle.net/m3xhqr6n/1/

It accounts from 1 to 3 unit numbers, you can edit to add in what you like, just gives you an idea.

Antony Lawlor
  • 3
  • 4