<!DOCTYPE html>
<style>
text {
font-size: 50px;
font-style: italic;
}
rect {
stroke-width: 1px;
stroke: green;
fill: transparent;
}
#middleGlyphOverhang {
font-family: cursive;
}
#simpleTextVerticalRl {
writing-mode: vertical-rl;
font-size: 80px;
}
#simpleTextVerticalLr {
writing-mode: vertical-lr;
font-size: 80px;
}
</style>
No glyphs should extend outside the rects.<br>
<svg id="svg" width="700" height="500">
<text id="simpleText" x="50" y="50">ffffffff</text>
<text id="textWithSpan" x="50" y="150">ffffff<tspan>ffffff</tspan></text>
<text id="textWithDifferentSizes" x="50" y="250"><tspan font-size="30px">ffffff</tspan><tspan font-size="80px">ffffff</tspan></text>
<text id="rotatedText" x="50" y="350" rotate="20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 340, 360, 380">fffffffffffffffffff</text>
<text id="middleGlyphOverhang" x="50" y="475">'faQ'</text>
<text id="simpleTextVerticalRl" x="350" y="30">ffffffff</text>
<text id="simpleTextVerticalLr" x="500" y="30">ffffffff</text>
</svg>
<script>
[simpleText, textWithSpan, textWithDifferentSizes, rotatedText,
middleGlyphOverhang, simpleTextVerticalRl, simpleTextVerticalLr].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>
Codebase Browser
chromium