Knuth and Plass line breaking algorithm in JavaScript

#1

Post by apl » Mon, Dec 06, 2010, 12:46 PM UTC

Knuth and Plass line breaking algorithm in JavaScript
bramstein.com

Re: Knuth and Plass line breaking algorithm in JavaScript

#2

Post by sfvisser » Mon, Dec 06, 2010, 1:16 PM UTC

I must say this is a very pretty render for a web-based text. Too bad the justification breaks when zooming in/out.

Also, the computation takes a while. Is this a dynamic programming algorithm? Maybe browsers should support this natively.

Re: Knuth and Plass line breaking algorithm in JavaScript

#3

Post by Groxx » Mon, Dec 06, 2010, 1:17 PM UTC

I see no hyphens... breaks (eg: lines 3-4), but no markers for them.

edit: wait, they're there when I zoom out a couple levels. Weird.

Re: Knuth and Plass line breaking algorithm in JavaScript

#4

Post by bramstein » Mon, Dec 06, 2010, 1:18 PM UTC

Groxx wrote: post #3

I see no hyphens... breaks (eg: lines 3-4), but no markers for them. edit: wait, they're there when I zoom out a couple levels. Weird.

That's probably a bug, what browser and operating system are you using?

Re: Knuth and Plass line breaking algorithm in JavaScript

#5

Post by adolph » Mon, Dec 06, 2010, 1:20 PM UTC

sfvisser wrote: post #2

I must say this is a very pretty render for a web-based text. Too bad the justification breaks when zooming in/out. Also, the computation takes a while. Is this a dynamic programming algorithm? Maybe browsers should support this natively.

Oh, I was wondering if it was just me. A few lines seem to have hanging right margins. This is probably because my morning lean-back browsing is done at +2 zoom-factor in Safari.

Re: Knuth and Plass line breaking algorithm in JavaScript

#6

Post by dchest » Mon, Dec 06, 2010, 1:21 PM UTC

bramstein wrote: post #4

Groxx wrote: post #3

I see no hyphens... breaks (eg: lines 3-4), but no markers for them. edit: wait, they're there when I zoom out a couple levels. Weird.

That's probably a bug, what browser and operating system are you using?

Same here, Chrome 8.0.552.215, Mac OS X 10.6.5.

Re: Knuth and Plass line breaking algorithm in JavaScript

#7

Post by nixy » Mon, Dec 06, 2010, 1:22 PM UTC

It looks really good in Firefox! However, I just tried printing the page and though it still looks decent, the justification is a lot worse than when rendered on-screen.

Re: Knuth and Plass line breaking algorithm in JavaScript

#8

Post by bramstein » Mon, Dec 06, 2010, 1:25 PM UTC

sfvisser wrote: post #2

I must say this is a very pretty render for a web-based text. Too bad the justification breaks when zooming in/out. Also, the computation takes a while. Is this a dynamic programming algorithm? Maybe browsers should support this natively.

Zooming is problematic, I haven't quite figured out a reliable way of fixing it yet. The problem is most apparent in Webkit based browsers, Firefox seems to handle it much better (though there are still some small problems--most can be fixed though.)

Yes, this is an application of dynamic programming. The computation is actually quite fast, most of the time is spent in retrieving the text metrics (put each word in a span, retrieve width and move on to the next word.) If that can somehow be alleviated it would become a feasible solution.

I agree with you that browsers should support this natively (Internet Explorer actually does.) If you are interested, I've written a bit on this subject in this Typophile thread: http://typophile.com/node/71247

Re: Knuth and Plass line breaking algorithm in JavaScript

#9

Post by Groxx » Mon, Dec 06, 2010, 1:37 PM UTC

bramstein wrote: post #4

Groxx wrote: post #3

I see no hyphens... breaks (eg: lines 3-4), but no markers for them. edit: wait, they're there when I zoom out a couple levels. Weird.

That's probably a bug, what browser and operating system are you using?

Similar to dchest, though Chrome 9.0.something. Up-to-date dev release.

Re: Knuth and Plass line breaking algorithm in JavaScript

#10

Post by bramstein » Mon, Dec 06, 2010, 1:44 PM UTC

nixy wrote: post #7

It looks really good in Firefox! However, I just tried printing the page and though it still looks decent, the justification is a lot worse than when rendered on-screen.

I honestly hadn't thought about printing it out yet. I had a quick look, and I think the issues you are seeing can probably be fixed. My initial plan was to render PDFs server-side, instead of relying on the browser's print mode.