Friday, February 19th, 2010

TeX line breaking algorithm in JavaScript

Category: JavaScript, Library

Bram Stein has done some really fun work. He has taken the Knuth and Plass line breaking algorithm and implemented it using Canvas:

The goal of this implementation is to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.

You can see the subtleties at work:


Check out the linebreak code which does more than solely justification. It can also perform all sorts of alignment with an appropriate selection of boxes, glue and penalties. It is also possible to give it varying line widths to flow text around illustrations, asides or quotes. Alternatively, varying line widths can be used to create interesting text shapes.

Posted by Dion Almaer at 6:57 am

4.4 rating from 21 votes


Comments feed TrackBack URI

It does not feels right to use canvas for text.

Comment by Aimos — February 19, 2010

You could probably remove all spaces and replace them with span elements (inline-block) with correct widths. No need to use canvas here.

Comment by MartijnHoutman — February 19, 2010

Can someone please just implement a canvas tag in canvas and be done with it?

Comment by blueskiwi — February 19, 2010

As a typesetter and a web designer, this brings joy to my heart :)

Comment by Skilldrick — February 19, 2010

Looks lovely. Now if only the text were selectable… add that to your TODOs!

Comment by mjuhl — February 19, 2010

been doing this with javascript without canvas for years.

Comment by leptons — February 19, 2010

To tell the truth, I find the browser’s rendition more readable.

Comment by ExtAnimal — February 22, 2010

Knuth is severly overrated, as we all know.

Comment by r0ckst4r — February 22, 2010

Leave a comment

You must be logged in to post a comment.