6 ms·

Txt – A canvas font and typesetting engine

70 points by harrisreynolds 12y ago

couchand 12y ago
I'm having a hard time imagining when this would be preferable to SVG text.
- Zikes 12y ago
  I'm sure it works well in the context where you are already using canvas, perhaps for a video game.
  - taylorbuley 12y ago
    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.
- mrspeaker 12y ago
  There are quite a few "canvas-only" environments now (like Create.js that they built it for)... my favourite in Ejecta http://impactjs.com/ejecta http://impactjs.com/ejecta - that let's you wrap up your canvas games/experiments in an iOS app that run really fast (for canvas!)... the guy re-implemented most of the canvas API on top of openGL. I used to get a good frame rate even on my ancient iPhone 3G. I used simple old-school style bitmap fonts there, though. More retro ;)
- diverted247 12y ago
  Our use case was web2print and mobile support was a big issue. SVG is great but it has mixed mobile support and performance varies. With <canvas> we are able to control rendering fine grained so when the app is not interacted, it is imagelike in performance. Most of the features in txtjs can easily be ported to SVG as the primary renderer required is SVGPath. FontLoader/Fonts would require zero change but new controls would need to subclass SVG elements. I am very interested in seeing better text in SVG as well as on <canvas> for creative use.
OliverM 12y ago
I'd love a library for SVGText that allowed me to adjust kerning, character effects, and layout in the same way.
- diverted247 12y ago
  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 12y ago
    Hmm, I'll take a look through the repo, thanks for the pointers!
dln_eintr 12y ago
sIFR 2.0?
james33 12y ago
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.
diverted247 12y ago
I wrote txtjs. Free to ask away.
- harrisreynolds 12y ago
  How many times did you want to claw your eyes out when writing this? :-)
  - diverted247 12y ago
    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
- hyperbovine 12y ago
  Have to ask: a dive trip, of all places?
  - diverted247 12y ago
    I wrote the beginnings of txtjs on a trip to Bonaire in June. I find I am about 2x-3x as productive writing software during surface intervals while diving than any other time. The diving forces you to relax, think, breath, and you cannot use a computer. When the dive is over, you are 3x productive and things are easier to implement. Also I dive with Nitrox with adds 10% more O2 into the tank, I end up sleeping better, less risk of n2 narcosis, longer bottom times, and I can think very clearly after a dive. It sounds absurd but I have found I will hit flow more on dive trips than any other time. Get certified: padi.com
    - hyperbovine 12y ago
      I am, although NAUI. Diving leaves me surprisingly sleepy and unmotivated (I don't do any blended air stuff). The idea of cranking out a typesetting engine on a dive boat was a new one. :)
mxfh 12y ago
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()
amelius 12y ago
I wonder how they compute their text dimensions. Anybody else noticed how slow the canvas measureText() function is on Chrome?
- diverted 12y ago
  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 12y ago
    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.

couchand 12y ago

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

Zikes 12y ago
I'm sure it works well in the context where you are already using canvas, perhaps for a video game.
- taylorbuley 12y ago
  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.
mrspeaker 12y ago
There are quite a few "canvas-only" environments now (like Create.js that they built it for)... my favourite in Ejecta http://impactjs.com/ejecta http://impactjs.com/ejecta - that let's you wrap up your canvas games/experiments in an iOS app that run really fast (for canvas!)... the guy re-implemented most of the canvas API on top of openGL. I used to get a good frame rate even on my ancient iPhone 3G. I used simple old-school style bitmap fonts there, though. More retro ;)
diverted247 12y ago
Our use case was web2print and mobile support was a big issue. SVG is great but it has mixed mobile support and performance varies. With <canvas> we are able to control rendering fine grained so when the app is not interacted, it is imagelike in performance. Most of the features in txtjs can easily be ported to SVG as the primary renderer required is SVGPath. FontLoader/Fonts would require zero change but new controls would need to subclass SVG elements. I am very interested in seeing better text in SVG as well as on <canvas> for creative use.

OliverM 12y ago

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

diverted247 12y ago
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 12y ago
  Hmm, I'll take a look through the repo, thanks for the pointers!

dln_eintr 12y ago

sIFR 2.0?

james33 12y ago

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.

diverted247 12y ago

I wrote txtjs. Free to ask away.

harrisreynolds 12y ago
How many times did you want to claw your eyes out when writing this? :-)
- diverted247 12y ago
  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
hyperbovine 12y ago
Have to ask: a dive trip, of all places?
- diverted247 12y ago
  I wrote the beginnings of txtjs on a trip to Bonaire in June. I find I am about 2x-3x as productive writing software during surface intervals while diving than any other time. The diving forces you to relax, think, breath, and you cannot use a computer. When the dive is over, you are 3x productive and things are easier to implement. Also I dive with Nitrox with adds 10% more O2 into the tank, I end up sleeping better, less risk of n2 narcosis, longer bottom times, and I can think very clearly after a dive. It sounds absurd but I have found I will hit flow more on dive trips than any other time. Get certified: padi.com
  - hyperbovine 12y ago
    I am, although NAUI. Diving leaves me surprisingly sleepy and unmotivated (I don't do any blended air stuff). The idea of cranking out a typesetting engine on a dive boat was a new one. :)

mxfh 12y ago

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

amelius 12y ago

I wonder how they compute their text dimensions. Anybody else noticed how slow the canvas measureText() function is on Chrome?

diverted 12y ago
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 12y ago
  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.