

Txt – A canvas font and typesetting engine - harrisreynolds
http://txtjs.com/

======
mxfh
Any plans to integrate soft hyphenation out of the box? This makes block
layouts look so much nicer.

[https://code.google.com/p/hyphenator/](https://code.google.com/p/hyphenator/)

[https://github.com/bramstein/hypher](https://github.com/bramstein/hypher)

Also this tool shouldn't obfuscate the text content if not explicitly wanted,
which in the days of captcha reading OCRs is a desperate measure anyways and
doesn't add to the accessibility of the page. Please add the rendered text in
the _alt_ attribute of the canvas by default. Or even better make it degrade
gracefully to proper HTML by using some CSS replacement technique linking to
the dataURL of the dynamically created off-screen canvas image.

See HTMLCanvasElement.toDataURL()

------
diverted247
I wrote txtjs. Free to ask away.

~~~
harrisreynolds
How many times did you want to claw your eyes out when writing this? :-)

~~~
diverted247
There were moments in alignment support where I lost a ton of hair and brain
cells. The hardest part was getting W3C compliant rendering of SVGPath on
<canvas>, after that it was all downhill.

Txt is live in use on:

expressionery.com walmartstationery.com iprint.com

------
james33
This is pretty great! We've put a lot of work into text for our HTML5 game
development, yet our canvas-rendered text is still quite limited in
functionality. Using a library like this is going to save us loads of time and
really open things up for us.

------
couchand
I'm having a hard time imagining when this would be preferable to SVG text.

~~~
Zikes
I'm sure it works well in the context where you are already using canvas,
perhaps for a video game.

~~~
taylorbuley
I once put a good deal of effort prototyping a full-featured <canvas>-based
video player. One feature was subtitles, which was text-on-canvas.

I found that an absolutely positioned div beat the pants off the performance
of rendering text to canvas in almost all scenarios. In fact, I would almost
never espouse layering of canvas rendering, and rather propose the layering of
<canvas> elements themselves and letting markup engines take care of the
composition.

------
amelius
I wonder how they compute their text dimensions.

Anybody else noticed how slow the canvas measureText() function is on Chrome?

~~~
diverted
Fonts arrive with a units specified, typically 1000 and with values for
ascent/decent/xHeight/more.... This provides the basis for font sizing and
kerning. In txt we know the relative sizes detailed in the font and we know
each character size. This level of detail is unknown to the canvas API today,
text is a black box returning images of characters. Also glyphs are drawn
inverted along the true baseline so layout is very accurate in dealing with
lineHeight and vertical positioning.

~~~
amelius
If this library can do text-measurements faster than the native canvas
measureText() calls can do them, then that part of the library would be
interesting to have by itself. That's one thing I know for sure.

------
OliverM
I'd love a library for SVGText that allowed me to adjust kerning, character
effects, and layout in the same way.

~~~
diverted247
I agree. Txt adds SVGPath support to <canvas> and is how we render glyphs, SVG
support would be a great addition to txtjs and many classes would not need to
change at all. Rather than render to Canvas, it would subclass SVGElement.

~~~
OliverM
Hmm, I'll take a look through the repo, thanks for the pointers!

------
dln_eintr
sIFR 2.0?

