The picture does not match the text

[Alkamenos]

Maybe am I doing something wrong? My HTML does not match the picture. Can you help me?http://jsfiddle.net/Alkamenos/jov9kojf/

[cburgmer]

Are you speaking of the padding? Does the following fix it? http://jsfiddle.net/cburgmer/jov9kojf/1/

It seems that HTML snippets passed to drawHtml() should not get the default padding the browser applies to the body element.

[Alkamenos]

Thanks! I was not attentive! :)

[Alkamenos]

http://jsfiddle.net/cburgmer/jov9kojf/1/
The second line from the bottom does not match.

[cburgmer]

Font rendering is a pretty complex thing and AFAIK much of that is delegated to the host operating system. It might be difficult to find an easy work-around for this issue here. If you look at http://jsfiddle.net/jov9kojf/2/ the overlay shows that beginning with the first list of f's the character stream is offset by one character in Chrome. Firefox renders a near complete match, only the line under the text is offset by a pixel. There might be some CSS properties that can influence that.

[cburgmer]

It looks like font-kerning: normal fixes your issue: http://jsfiddle.net/jov9kojf/3/ From what I understand the default auto allows the browser to optimize and disable kerning.

Setting it by default though might not be a good idea as the browser is allowed to disable kerning for "normal" rendering (unless explicitly set in CSS), so that overwriting it for drawHtml() will again diverge.

[Alkamenos]

It's resolving the issue. Thank you for help and for your library!

[cburgmer]

I've documented the kerning issue in the wiki https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues/_compare/0a730c1eda1858a3f2b98a401d70c8eb0f6c2a6d...b014ae6fb4192aadafa5d64af9ec05354f1aeb25. Thanks for providing feedback!