Resize text within Circle with CSS/Query

Question

I have found various libraries to resize text according to a containers size however my container is a circle and so I am having trouble with it still extending past the border.

Below is a Fiddle and the code for the circles. Is there a way to make it fit without overflowing? In the linked example, the font-size designated is the max font-size to be utilised.

.quizItemAnswerText {
  background: #333;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 60px;
  font-family: 'News Gothic Std';
  font-size: 60px;
  font-weight: bold;
  padding: 15px;
  display: flex;
  height: 300px;
  width: 300px;
  color:#72B74D;
  border: 3px solid black;
  margin-bottom:200px;
}

<div data-answervalidation="false" data-answerindex="3" class="quizItemAnswerClick quizItemAnswerText">Proin ac libero sit amet metus semper aliquet. Proin ut tellus ut nulla pharetra</div>
<div data-answervalidation="false" data-answerindex="3" class="quizItemAnswerClick quizItemAnswerText">TRUE</div>

Answer 1

Here is a solution using the standalone version of fittext.js.

I added little javascript code executed on 'Document Load' traversing an array of querySelectorAll elements for class .fittext.

Parameters for 'fitText': element, compressor and {min,max} font-size. After fiddling with the parameters, this seems to get a nice result: window.fitText(elem, 1.2, { min: '14px', max: '60px' })

My javascipt code is at the end. Notice the 'responsive sizing' CSS code of html {font-size: calc(0.625vmin + 0.75rem)} and .quizItemAnswerText { width; height}, both calc(9vmin + 127.2px), all using equation y=mx+b, the 'definition of a straight line'.

Make sure to check comments in the CSS.

Now you add the JS code for a square inside a cirlce....

Intermediate Update (2)

The original 'fittext.js' use JS clientWidth including padding. Added option (and code) to choose whether to strip padding from clientWidth or not. The padding needs to be stripped for 'responsive padding' to work correctly.

Done:

• Check whether the text already fits and do nothing. The original code does indeed ignore that, which I consider a flaw (or omission).

Now 'fitText' will leave the font-size as-is when the text fits in the element. Left some debugging code inside, will be gone next update...

Still to do:

• create the CSS calc() for 'responsive padding' (y=mx+b adjusted with Pythagoras, this may take a while to figure out...)

'use-strict';

const crlf  = '\r\n';
const br    = '<br>';

// Standalone versions of 'getTextWidth' and 'getDimensions'
// for debugging or use elsewhere

function getTextWidth(txt, fontname, fontsize){
var c=document.createElement('canvas');     // Create a dummy canvas (render invisible with css)

var ctx=c.getContext('2d');                 // Get the context of the dummy canvas
    ctx.font = fontsize + ' ' + fontname;   // Set the context.font to the 'actual' font

var width = ctx.measureText(txt).width;     // Measure the string
    c.remove();                             // No loose ends...
return Math.ceil(width);                    // Return rounded up width
};

function getDimensions(element) {
    var cmp = getComputedStyle(element);

    // get dimenision including padding
    var width  = element.clientWidth;
    var height = element.clientHeight;

    // convert strings (+'px') to float
    var t = parseFloat(cmp.paddingTop);
    var r = parseFloat(cmp.paddingRight);
    var b = parseFloat(cmp.paddingBottom);
    var l = parseFloat(cmp.paddingLeft);

    // Remove padding
    width  -= r + l;
    height -= t + b;

    // Wit hand height (include padding for easy "already converted" access)
    return { width: width, height: height, padding: { top: t, right: r, bottom: b, left: l } };
};

/*! 
* FitText.js 1.01 jQuery free version
*
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
* Modified by Slawomir Kolodziej http://slawekk.info
*
*    v1.01 by Rene van der Lende, March 2020
*             - added 'getTextWidth' and 'getDimensions'
*             - extra boolean parameter to select
*               (default)  with padding
*               (optional) without padding
*/
(function(){

var addEvent = function (el, type, fn) {
  if (el.addEventListener)
    el.addEventListener(type, fn, false);
      else
          el.attachEvent('on'+type, fn);
};

var extend = function(obj,ext){
  for(var key in ext)
    if(ext.hasOwnProperty(key))
      obj[key] = ext[key];
  return obj;
};

window.fitText = function (el, kompressor, options, incpad) {
  var settings = extend({
    'minFontSize' : -1/0,
    'maxFontSize' :  1/0
  },options);

    // start RvdL, March 2020
    var getDimensions = function (el) {
        var cmp = getComputedStyle(el);

        // get dimenision including padding
        var width  = el.clientWidth;
        var height = el.clientHeight;

        // convert strings (+'px') to float
        var t = parseFloat(cmp.paddingTop);
        var r = parseFloat(cmp.paddingRight);
        var b = parseFloat(cmp.paddingBottom);
        var l = parseFloat(cmp.paddingLeft);

        // Remove padding
        width  -= r + l;
        height -= t + b;

        // width and height (include padding for easy "already converted" access)
        // height and padding redudant in `fitText`, but who knows...
        return { width: width, height: height, padding: { top: t, right: r, bottom: b, left: l } };
    };

    function getTextWidth(el) {
       var c = document.createElement('canvas');   // Create a dummy canvas (render invisible with css)

       var ctx = c.getContext('2d');               // Get the context of the dummy canvas
         ctx.font = getComputedStyle(el).fontSize + ' sans-serif'; 
       // TODO: Flawed because using fixed 'sans-serif'

       // Use only first node of element (the text) as 'innerText' may contain child elements
       var width = ctx.measureText(el.childNodes[0].nodeValue).width;
         c.remove();                               // No loose ends...
       
         return Math.ceil(width);                    // Return rounded up width
    };
    // end RvdL, March 2020

    var fit = function (el) {
      var compressor = kompressor || 1;     // if null default to 1
      var padded = (incpad=null) || incpad; // if null then 'old behaviour' with padding

      var resizer = function () { // include/exclude padding
        var elWidth = (padded) ? el.clientWidth : getDimensions(el).width;

        if ( elWidth < getTextWidth(el) ) { // Skip when text fits already
           el.style.fontSize = Math.max(Math.min(elWidth / (compressor*10),
                                         parseFloat(settings.maxFontSize)),
                                         parseFloat(settings.minFontSize)) + 'px';
        };
    };
    // Call once to set.
    resizer();

    // Bind events
    // If you have any js library which support Events, replace this part
    // and remove addEvent function (or use original jQuery version)
    addEvent(window, 'resize', resizer);
    addEvent(window, 'orientationchange', resizer);
  };

  if (el.length)
    for(var i=0; i<el.length; i++)
      fit(el[i]);
  else
    fit(el);

  // return set of elements
  return el;
};
})();

/******************************************************/
window.addEventListener('load', initialize); // Do when all HTML/CSS has been loaded
/******************************************************/
var forEachEntryIn = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); } };

function initialize() {
var cmp;

    forEachEntryIn(document.querySelectorAll('.fittext'),
        function (idx,elem,scope) {
            cmp =  window.getComputedStyle(elem); // debug

            // Original font size
            console.log('canvas', getTextWidth(elem.childNodes[0].nodeValue, 'sans-serif', cmp.fontSize),
                        'fs'    , cmp.fontSize);

            // Params: element, compressor, min/max font-size, strip padding from width
            window.fitText(elem, 1.2, { min: '14px', max: '60px'}, false );

            // fitText font size
            console.log('canvas', getTextWidth(elem.childNodes[0].nodeValue, 'sans-serif', window.getComputedStyle(elem).fontSize),
                        'fs'    , window.getComputedStyle(elem).fontSize);
    });
};

/* 
     made responsive y=mx+b 
     points p1(320,14) p2(1280,20)
*/
html { font-size: calc(0.625vmin + 0.75rem) }

.quizItemAnswerText {
    display: flex;
    justify-content: center;
    align-items: center;

/* 
     made responsive y=mx+b 
     points p1(320,156) p2(1920,300)
*/
    height: calc(9vmin + 127.2px);
    width : calc(9vmin + 127.2px);

    padding: 15px;
    margin: 5px 60px;
    margin-bottom:200px;

    font-family: 'News Gothic Std',arial,sans-serif;
    font-weight: bold;

/* 
     made responsive y=mx+b 
     points p1(320,24) p2(1280,60)
*/
    font-size: calc(3.75vmin + 0.75rem); /* modified from 60px */
    text-align: center;

    border-radius: 50%; /* adjusted from 100% */
    border: 3px solid black;
    background: #333;
    color:#72B74D;
}

<div data-answervalidation="false" data-answerindex="3" class="fittext quizItemAnswerClick quizItemAnswerText">Proin ac libero sit amet metus semper aliquet. Proin ut tellus ut nulla pharetra</div>
<div data-answervalidation="false" data-answerindex="3" class="fittext quizItemAnswerClick quizItemAnswerText">TRUE</div>