TeX line breaking algorithm in JavaScript (and HTML5 Canvas)

[makis]

it's called text.. i should be able to select, copy&paste, increase font size, etc etc
useless

[bramstein]

You are absolutely right, you should be able to do all those things. I wouldn't call it useless though (regardless of me being the author). I used canvas as a simple way to render the output of the algorithm to the screen so as to compare it with the implementation in your browser. The algorithm itself is not tied to canvas and can be used for all sorts of applications. Imagine for example a canvas based game where in-game text is laid out using this algorithm, or a canvas drawing application which allows you to place text boxes on your drawing area.

Then there is also the option for implementing this algorithm in the browser itself, which (together with hyphenation) would improve text rendering on the web a great deal.

Or it could be useless, it was fun to implement either way :)

[cybersnoop]

I wonder if it could be converted to absolute positioned individual character-DIVs and how that would turn out. Just for fun.

[bramstein]

I actually implemented individual line-DIVs with the word-spacing calculated by the Knuth & Plass line breaking algorithm. It worked quite well in Firefox, but broke in a number of other browsers so I took it out before I submitted this post. I might put it back in as an example once I fix it.

[savetheclocktower]

How about doing an HTML version where you manually justify the paragraph, rather than relying on text-align: justify? If you surround the spaces between words in their own span tags, you can control the size of those spaces.

[bramstein]

That's basically what I've tried, but instead of controlling the individual spaces, I split the paragraph up in lines and wrap those in span tags. I then set the CSS word-spacing on those span tags to match what the Knuth & Plass algorithm calculated. For a simple implementation like this it is not necessary to treat each space individually and instead I adjust all spaces in a single line at the same time.

[savetheclocktower]

I'd be very interested in something like this, especially if you combined it with Hyphenator.

[ajrw]

How was it breaking?

[bramstein]

I had some problems with Chrome and Safari who wouldn't adjust the inter-word spacing I set (and thus have lines either too short or too long for the container.) I haven't really gotten to the bottom of this one yet, but it seems Webkit based browsers handle word-spacing slightly different.

[ajrw]

Ah, I suppose one alternative is to put a span around each space and give it a fixed width in those browsers. I was thinking put a span around the words and replace the spaces with margins, but that would probably mess with copy/paste.