Subpixel text measurements

by behdad

HTML

<div id='spans'>
<span style="position:static; padding-right:7.5px"></span>
<span style="position:fixed; padding-right:7.5px"></span>
<span style="position:absolute; padding-right:7.5px"></span>
<span style="position:relative; padding-right:7.5px"></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');
for(var i = 0; i < spans.length; i++) {
    rect = spans[i].getBoundingClientRect();
    log( 'span[' + spans[i].getAttribute('style') + ']: rect.width=' + rect.width);
}