0

I'm trying to write a piece of software to grab strings and pack them in and ordered layout, like in the image below

enter image description here

I think that to achieve that result the first step I'd take would be being able to calculate the size of a single string in the canvas in order to modify the font-size to fit the desired width.
so, if any1's got a solution to some built-in function, or a way to perform it so that I can code it myself that would be nice (very nice).

thanks in advance
k

6
  • you basically want an ocr - google that, but must tell you that it isn't easy
    – fazo
    Apr 28, 2011 at 16:47
  • In case you decide not to use canvas jquery have 2 nice functions -api.jquery.com/width and api.jquery.com/height
    – Bakudan
    Apr 28, 2011 at 16:51
  • The OP doesn't want a ocr, he wants to format a string in a particular way Apr 28, 2011 at 16:52
  • you mean that I should use the ocr algorithm in order to convert text into an image and then detect its width in a recursive way till I get the matching width? Apr 28, 2011 at 16:55
  • @bakudan yeah, I know even mootools has got the same functions, the only problem is the way they threat fonts, and I need to be über-accurate with this issue, cuz this's a font_based project. so in this case canvas gives me stuff like control over kerning baseline and so on. Apr 28, 2011 at 16:57

1 Answer 1

1

If you decide to do it without CANVAS, this might come in useful: how to calculate a letter's width: http://jsfiddle.net/rudiedirkx/sCUac/ in a specific font with a specific size.

edit
Or a sentence's width.

9
  • thx m8, I was evaluating this possibility, but I'm a little bit concerned about crossbrowing issues with that, u got some advices? Apr 28, 2011 at 17:27
  • There are no xbrowser issues. With this, you get the right width for that font on that browser in that size etc. Just make sure the (very tine) JS suits IE: maybe Node.offsetWidth is called differently in IE. You can test that yourself I assume =)
    – Rudie
    Apr 28, 2011 at 17:29
  • I couldn't resist. Works perfectly in IE8.
    – Rudie
    Apr 28, 2011 at 17:30
  • no way, I just red ur previous comment, and u got me totally wrong: I'm a mootools guy, and to be honest, jquery gives me the creeps :P Apr 28, 2011 at 17:32
  • anyhow I'd give it a shot in the js way, the only problem is that I'll have to use a non standard font. Apr 28, 2011 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.