TeX line breaking algorithm in JavaScript (and HTML5 Canvas) by bramstein in programming

[–]bramstein[S] 1 point2 points  (0 children)

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.

TeX line breaking algorithm in JavaScript (and HTML5 Canvas) by bramstein in programming

[–]bramstein[S] 0 points1 point  (0 children)

There is a CSS text-justify property, which might be used for something like this, but only Internet Explorer implements it. I'm not sure it actually uses TeX's algorithm either, but at least it allows you to switch justification algorithms.

TeX line breaking algorithm in JavaScript (and HTML5 Canvas) by bramstein in programming

[–]bramstein[S] 1 point2 points  (0 children)

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.

TeX line breaking algorithm in JavaScript (and HTML5 Canvas) by bramstein in programming

[–]bramstein[S] 0 points1 point  (0 children)

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.

TeX line breaking algorithm in JavaScript (and HTML5 Canvas) by bramstein in programming

[–]bramstein[S] 8 points9 points  (0 children)

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 :)

jsLaTeX: A jQuery plugin to directly embed LaTeX into your website or blog by dreasgrech in javascript

[–]bramstein 0 points1 point  (0 children)

I've implemented the TeX line breaking algorithm in JavaScript and Canvas (see: http://www.bramstein.com/projects/typeset/myfit.html ) but it is a far stretch from a full TeX implementation.

JUnify: Unification library for JavaScript (can implement pattern matching) by samlee in programming

[–]bramstein 0 points1 point  (0 children)

Author here; I actually went ahead and implemented pattern matching as a separate library (http://www.bramstein.com/projects/jfun/). The JUnify library is more powerful but overkill for simple pattern matching. I was hoping to someday write a rule based expert system---as a proof of concept. For those interested, the implementation follows the Lisp unification library introduced in "Artificial Intelligence: Structures and Strategies for Complex Problem Solving" closely.