User:SMcCandlish/sandbox Chrom kerning problem

Chrom* browser problem demo
This is a demonstration of a problem with current versions of the Chrome and Chromium browsers (hereafter Chrom*). This browser family is rounding to 0px with small fonts, instead of rounding normally (i.e., up for fractional value of 5 or higher, and down for below 5). It's been reported to me that the browser is inappropriately using a  function, not a   function, to convert calculated values (in   or whatever) to screen pixels. The effect of that in these browsers (and it is likely to be more noticeable on non-Retina displays) is that clearly visible kerning, e.g. of, will round down to appear the same as   and thus simply disappear below font sizes of   or so. This negates the value of any small, proportion (not pixel-based) spacing adjustments exactly where they are most crucial, at small font sizes. Chrom* is the browser doing this, and it needs to be fixed ASAP. It is doing it on all platforms, so this is a problem in the entire Chrom* codebase.

For most people, the  version of the padding-based kerning used in these tests seems to fail at 100% page zoom and a font size of   /   /   (on this site). In other browsers this works all the way down to  font size! The Chrom* failure point for  padding isn't much better, dying at   /   /.

Test with em vs. px padding values and fonts given in pt
Here is an inline test showing what happens to, and some other padding values used to prevent the left-slanted variable from running into the text that follows it:
 * fL – fL – fL – fL – fL – fL – fL – fL – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – kerned with a flexible
 * <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – kerned with a flexible
 * <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – "forcibly" kerned with an inflexible
 * fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – bare, unkerned

Test with em vs. px padding values and fonts given in px
Same as above but in fixed px font sizes to more clearly indicate at what pixel resolution the kerning fails in Chrom*:
 * <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – kerned with a flexible
 * <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – kerned with a flexible
 * <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – "forcibly" kerned with an inflexible
 * fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – bare, unkerned

Test with em vs. px padding values and fonts given in %
Here's essentially the same test with relative font sizes specified in.


 * <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – <i style="padding-right: 0.07em;">f</i>L – kerned with
 * <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – <i style="padding-right: 0.08em;">f</i>L – kerned with
 * <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – <i style="padding-right: 1px;">f</i>L – kerned with
 * fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – fL – bare, unkerned

Proportional vs. monospaced font test
This shows normal text and usage within <code ></code>.