To view my active website, please visit https://abstract.properties
Kerning is the process of adjusting the spacing of characters typeset in a proportional font.
If you have a compliant browser, when you click (or touch) the following word, the letters will subtly: expand.
Unfortunately, not all browsers support sub-pixel letter-spacing. When this happens, the spacing is rounded to the nearest whole pixel:
letter-spacing: -2px;
letter-spacing: -1px;
letter-spacing: 0px;
letter-spacing: 1px;
letter-spacing: 2px;
Luckily, there is a way we can test for this behavior.
If we have two elements with differing sub-pixel letter-spacing that have identical text content, each render to a single line, and contain enough characters to expand to whole pixel differences, their bounding rectangle's width should differ. We can test this by setting two element to have display: inline; whitespace: pre; and differing letter-spacing and then checking each element's .getBoundingClientRect().width.
display: inline; whitespace: pre;
.getBoundingClientRect().width
In other words, you want to have something like this:
<p class="a" style="letter-spacing: 0.1px; display: inline;">abcdefghij</p> <p class="b" style="letter-spacing: 0.2px; display: inline;">abcdefghij</p> <script> (function () { var first = document.querySelector('.first-line').getBoundingClientRect().width; var second = document.querySelector('.second-line').getBoundingClientRect().width; if (first !== second) { // Your browser supports sub-pixel kerning } }()); </script>
And here's that code running on your browser:
abcdefghij
✓ Your browser supports sub-pixel letter-spacing!
✗ Your browser does not support sub-pixel letter-spacing.
This technique should work on all browsers going back to IE5.