如何在边界框内放置文本？

Question

I have extracted some text using Google vision api. Now the idea is to plot the text on a file using the coordinate and dimensional information from the bounding box.

I have the position and the height and width of the bounding box. Now I need to fit the text inside the box. I am not able to obtain the correct font size property that will fit perfectly inside the box.

I am trying to plot the data on a web page using a Python script. So I am trying to get the font-size property of a span containing the text.

So far I've tried fitText() plugin using jQuery but it doesnt seem to work. Any other ideas how to get the appropriate font size?

Answer 1

You could increase the font size as long as its height is less or equal to the bounding box height:

 fitTextInsideBox(document.querySelector('.text'), document.querySelector('.bounding-box')); function fitTextInsideBox(text, box) { // bounding box parameters var boxPosX = 20 var boxPosY = 20; var boxWidth = 500 var boxHeight = 500; box.style.position = 'absolute'; box.style.left = `${boxPosX}px`; box.style.top = `${boxPosY}px`; box.style.width = `${boxWidth}px`; box.style.height = `${boxHeight}px`; text.style.position = 'absolute'; text.style.left = `${boxPosX}px`; text.style.top = `${boxPosY}px`; text.style.width = `${boxWidth}px`; var fontSize = 0; increaseFontSize(text, box); function increaseFontSize(text, box) { fontSize++; text.style.fontSize = `${fontSize}px`; var textHeight = text.getBoundingClientRect().height; if (textHeight <= boxHeight) { increaseFontSize(text, box); } else { fontSize--; text.style.fontSize = `${fontSize}px`; } } }

 body, html { margin: 0; padding: 0; }.bounding-box { border: 2px solid red; box-sizing: border-box; }

 <div class="bounding-box"></div> <span class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>