text-decoration:underline seems to render too close to the text

[altryne]

see example : http://d.pr/lG4o

[niklasvh]

Currently the way it measures the position for text-decoration:underline and line-through is not very accurate. The problem is that script currently only has information regarding the top, bottom left and right positions of the text, but not the actual true position of the baseline (where the underline should be positioned) nor the height of the median or cap height (see here http://en.wikipedia.org/wiki/Baseline_(typography) and http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-textbaseline).

One work around I've been thinking is to use pre-defined ratios for all the common fonts used on the web and use the current guesstimate approach for non-common fonts, unless there is a efficient and accurate way of actually finding the baseline position using JavaScript.

The line-through and underline problems are quite apparent on the http://html2canvas.hertzen.com/tests/text.html test page as well, depending on the size of the font.

[niklasvh]

I reworked the logic behind finding the baseline of a font. It should be pixel perfect now on Chrome, see examples at http://html2canvas.hertzen.com/tests/text-underline.html and http://html2canvas.hertzen.com/tests/text-underline-lineheight.html. However, for example Firefox uses a completely different approach as well as doesn't have a fixed 1px for the underline, there is still more work to be done to make it consistent on all browsers.

[jahewson]

Have you seen http://mudcu.be/labs/Typography/googleFontsAPI.html from http://mudcu.be/journal/html5-typographic-metrics/#baselineCSS - is this where you got the img-based technique?

[niklasvh]

It uses a similar approach to calculating the baseline, but most of the other values it calculates are irrelevant for this script, as the browsers have support for placing the content accordingly with just the baseline alone.