Canvas Text Replacement
sIFR without the flash!
Web fonts suck
JavaScript text replacement helps
- You can use image replace (server intensive) or sIFR (requires flash)
- Most browsers support some sort of vector rendering
- True-type fonts are vectors — coincidence?
- Introducing the Canvas Text Replacment Technique…
How it works
It's pretty simple
- Convert TTF into vector data - all lines and quadratic curves
- Read in innerHTML of the element
- Read the CSS styles of the element to be replaced
- Render each character
Pros and Cons?
Why would you use it?
- Accessible
- Degradable
- Doesn't require a proprietary technology
- Scalable
- Doesn't suffer from Flash overlay issue
Why wouldn't you use it?
- Lose Cut-and-paste
- CPU intensive
- Wouldn't want to do long passages of text