![]() Still hoping that someone will point out any flaws in the process. I'm also not sure how good Verdana's default kerning is, though I understand it's better than Arial - suggestions on other fonts to try gratefully accepted. Ideally I'd throw multiple random strings at it and do a pixel by pixel comparison. ![]() This.fillTextWithSpacing(textContext1, text, 0, 0, 0) TextContext1.font = "72px Verdana, sans-serif" ![]() TextContext1 = element1.getContext('2d') Subtract the width of the shorter string from the width of the entire string, giving the kerned width of the character, wChar = wAll - wShorterĬode for demo/eyeball test: element1 = document.getElementById("Test1") Measure wShorter, the width of the resulting shorter string using measureText(). Print the first character at position (X, Y) using fillText() Remove the first character from the string Measure wAll, the width of the entire string using measureText() Here's the code: this.fillTextWithSpacing = function(context, text, x, y, spacing) Here's the HTML: Your browser does not support canvas. If you have any comments on it then I would point you to my question on the subject ( Adding Letter Spacing in HTML Canvas)īasically it uses measureText() to get the width of the whole string, and then removes the first character of the string and measures the width of the remaining string, and uses the difference to calculate the correct positioning - thus taking into account kerning pairs and the like. It should take that into account, and rough testing suggests it does. To allow for 'letter kerning pairs' and the like, I've written the following. Note also that 'rolling your own'-drawing each character with a custom offset-is going to produce bad results for most fonts, given that there are letter kerning pairs and pixel-aligned font hinting. Use HTML layered with Canvas and perhaps even SVG, each doing what it does best. I would suggest that you should combine the appropriate technologies for each usage. This is not possible the HTML5 Canvas does not have all the text-transformation power of CSS in HTML. Var inp = document.querySelectorAll('input'),
0 Comments
Leave a Reply. |