<!DOCTYPE html>
<style>
  html {
    zoom: 1.8;
  }
  text {
    font-size: 12px;
    font-style: italic;
  }
  rect {
    stroke-width: 1px;
    stroke: green;
    fill: transparent;
  }
  #middleGlyphOverhang {
    font-family: cursive;
  }
</style>
No glyphs should extend outside the rects.<br>
<svg id="svg" width="200" height="100">
  <defs>
    <path id="path" d="M20 20 L 200 20"/>
  </defs>

  <text id="pathText">
    <textPath xlink:href="#path">ffffffffffffffffffffffff</textPath>
  </text>
  <text id="tspanText" x="20" y="50">ffffff<tspan font-size="24px">ffffff</tspan></text>
  <text id="middleGlyphOverhang" x="20" y="75">'faQ'</text>
</svg>
<script>
  [pathText, tspanText, middleGlyphOverhang].forEach(function (textElement) {
    var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', textElement.getBBox().x);
    rect.setAttribute('y', textElement.getBBox().y);
    rect.setAttribute('width', textElement.getBBox().width);
    rect.setAttribute('height', textElement.getBBox().height);
    document.getElementById('svg').appendChild(rect);
  });
</script>