JSFiddle - React, Tailwind, and code Playground

by Matt Wistrand

HTML

<svg style="background-color: #eee" width="300" height="300">
    <text id="textNode" x="30" y="30" font-size="15">Lorem ipsum dolor sit amet</text>
    
    <text id="bidiTextNode" x="30" y="30" font-size="15">&lrm;Lorem ipsum dolor sit amet</text>
</svg>

<h1>Without LRM:</h1>
<ul id="boxValues"></ul>

<h1>With LRM:</h1>
<ul id="bidiBoxValues"></ul>

JavaScript

var textNode = document.getElementById('textNode'),
    bidiTextNode = document.getElementById('bidiTextNode'),
    results = document.getElementById('boxValues'),
    bidiResults = document.getElementById('bidiBoxValues');

displayBoxValues(results, textNode);
displayBoxValues(bidiResults, bidiTextNode);

function displayBoxValues(parent, node) {
    var bBox = node.getBBox(),
        key,
        li;

    for (key in bBox) {
        li = document.createElement('li');
        li.appendChild(document.createTextNode(key + ': ' + bBox[key]));
        parent.appendChild(li);
    }
}