Curved Text inside a circle and center to bottom center

Question

I have a circle, and i need to have text inside the circle, that follows the circles path. I have found this other question: Wrapping a text around a circular element

However, i was not able to achieve what i'm trying to do. My text has a dynamic length, and i need it to be always centered to the bottom center of the circle, and wrap "upwards" on both sides, if that makes sense. I have tried the svg approach, but when the text is too long, it gets cut off. What would be the best approach to do this?

The text would be orange here (dynamic length), and it needs to centered to the bottom of the circle (blue dot)

Answer 1

Having tried positioning text with middle in the svg I found it cut the text if the text was following a path - as in the question.

Could not find a solution for this in SVG and/or CSS so resorted to a method with JS and show it here just in case of use as an interim measure.

In this snippet, the width of the text is found and the amount the SVG needs to rotate in order to put the mid point of the text at the bottom center of the circle is calculated:

 const textPath = document.querySelector('textPath'); const temp = document.createElement('div'); temp.innerHTML = textPath.innerHTML; temp.style.display = 'inline-block'; temp.style.fontSize = '20px'; document.body.append(temp); const w = temp.offsetWidth; document.body.removeChild(temp); const circumference = Math.PI * 200; document.querySelector('svg').style.transform = 'rotate(' + Number((180 * w / circumference) - 90) + 'deg)';

 .qr--label { font-size: 20px; margin: 0 0 -15px 0; text-align: center; }

 <div class="qr"> <div> <svg width="220" height="220"> <path fill="white" d="M0,110a110,110 0 1,0 220,0a110,110 0 1,0 -220,0"/> <path fill="none" id="innerCircle" d="M10,110a100,100 0 1,0 200,0a100,100 0 1,0 -200,0"/> <text> <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#innerCircle" class="qr--label"> Some dynamic text here </textPath> </text> </svg> </div> </div>