Subpixel text measurements

by rbyers

HTML

<div id='spans'>
TTTes.Mxxi<br/>
<span>T</span><span>T</span><span>T</span><span>e</span><span>s</span><span>.</span><span>M</span><span>x</span><span>x</span><span>i</span>
</div>
<hr/>
<pre id='log'>
</pre>

JavaScript

//debugger;
function log(str) {
  document.getElementById('log').innerHTML += str + '\n';            
}
var spansDiv = document.getElementById('spans');
var spans = spansDiv.querySelectorAll('span');
var totalOffset = 0;
var totalRect = 0;
for(var i = 0; i < spans.length; i++) {
    rect = spans[i].getBoundingClientRect();
    log( 'span[' + i + ']: left=' + spans[i].offsetLeft +
         '  width=' + spans[i].offsetWidth + 
         '  rect.left=' + rect.left + 
         '  rect.width=' + rect.width);
    totalOffset += spans[i].offsetWidth;
    totalRect += rect.width;
}
log('totalOffset=' + totalOffset);
log('totalRect=' + totalRect);