eleqtriq

I got hooked on desktop-publishing the moment when I attached a text to a path for the first time in Freehand 3. It was magic. Suddenly you could create designs that used to take days or even weeks in less than an hour. If you take a look at late 80s/early 90s design, you will see how the new possibilities shaped the visual language of the time: twirlig, flying letters with zero gravity - from todays perspective its very much like the exaggerated stereo effects in records from the early sixties when music producers tried to show off all their new toys.

For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path. Click on the picture below to see the proof of concept. All typography is pure HTML and CSS3, no Bitmap, flash or SVG in sight (fingers crossed the google font directory isn't down again right now).

Of course it isn't an option to do all this transformations manually, it would kick us back into the pre-DTP-era in terms of labor intensiveness. Therefore I took the challenge to build a tool for CSS text warping myself. Through my AS3 experiments I already had enough knowledge of bezier-math to find out the proper angles and positions. Unfortunately CSS3 doesn't offer us something like :nth-letter, so every letter must be wrapped into a new span for now, which is the recommended practice for in-word letter styling by the W3C. Anyway I'm not absolutely happy with this solution and am currently working on a Javascript to do the warping dynamically. I will post it here when I'm finished.

The tool allows you to attach any text to an arbitrary bezier path or a circle. Click "Generate HTML" to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.

The technology

CSSWarp is mainly HTML5 and Javascript with a slight dose of Flash (for font-detection). The HTML5 canvas is used for drawing the curves and circles. jQuery helps with DOM-manipulation. I added some spice with CSS3-animations for Webkit and Fox>3. The App has been successfully tested in Internet Explorer 9, older versions are not supported of course.

Use of fonts

Font warping isn't worth anything as long as you can't apply it to a wide array of fonts. As a consequence CSSWarp gives you access to the google font-directory and it is possible to use your local fonts (which admittedly can be tricky. See in-app documentation for more info). If you have flash installed, the app will show you a listing of the installed local typefaces. I would love to support web font services like Typekit, but right now I don't see how this should be possible without the support of the service providers. For now you're out of luck if you don't have a copy of your webfont installed locally on your machine. Don't forget to embed your fonts with @font-face declarations before you upload your HTML to the web.

I still have to test how good CSSWarp supports font replacement technologies. For sIFR I predict inconsistent behavior, because not every browser supports CSS transformations on swfs. I wouldn't recommend using sIFR anyway, as this will result in a Flash-Player instance for every single letter, not the worst method to melt your CPU. Cufon will most probably work, but as Cufon will create a bitmap *before* CSSWarp applys any transformation, expect bad kerning and a more or less blurry look.

Finally some words about file size. Every transform in the CSS for a warped text must be present in up to 4 flavours: -ms-, -o-, -moz- and-webkit-. One would expect that the CSS containing the sum of all these vendor prefixes would be unacceptably large, but still the stylesheet for the example above is only around 3Kb (gZipped) compared to around 30Kb (depending on loss) for the same graphic as jpeg. Seems we do have a clear winner here, but take into account that all the fonts in the graphic will sum up to some additional 200k. In the end it's a trade off: do you use your fonts only in one graphic or multiple times? Is crawlability and readability of text important for your site? If all these aspects have been taken into consideration, this method can help to enrich the visual experience of a website.

What's next?

Still a lot of work. First I will clean up code. It has gotten a little bit messy under the hood and I apologize in advance for every event-listener I forgot to unbind. Then I will integrate support for kerning tables. And then there are a lot more nice to haves: local storage, undo/redo relative units and last but not least dynamic text warping with Javascript.

Please take your time to play around with the app. I would be glad if you send me some feedback to help me improve it and of course bug reports are welcome:

Open Example

Trackback

20 Responses to “Fresh from the Lab: CSS3 Text-Warping”

  1. Comment by Castles Sat Mar 5th, 2011, 09:14

    very cool, well done.

  2. Pingback by CSS3 Text-Warping | Design Newz Thu Mar 10th, 2011, 02:41

    [...] CSS3 Text-Warping [...]

  3. Pingback by CSS3 Text Warp by Eleqtriq.com | Don Relyea's Blog Thu Mar 10th, 2011, 03:33

    [...] Weber at Eleqtriq.com has a variety of useful tutorials on HTML 5 and has a great blog to check out if you are into keeping up with HTML 5 and [...]

  4. Pingback by CSS3 Text-Warping | The best Tutorials Thu Mar 10th, 2011, 03:58

    [...] CSS3 Text-Warping CSS3 Text-Warping [...]

  5. Pingback by CSS3 Text-Warping | The best Tutorials Thu Mar 10th, 2011, 05:10

    [...] CSS3 Text-Warping [...]

  6. Comment by duopixel Thu Mar 10th, 2011, 10:00

    This is amazing! This should be all over the web, already posted it to Hacker News.

  7. Pingback by CSS3 Text-Warping | WebDevKungfu Thu Mar 10th, 2011, 17:02

    [...] CSS3 Text-Warping [...]

  8. Pingback by Warp & Gradient Tools – CSS3 Release Thu Mar 17th, 2011, 19:05

    [...] that looks as if it were created with Illustrators attach to path tool. Read the developers very own presentation of this handy tool.Visit CSS [...]

  9. Pingback by Must Read Links for Web Designers and Developers – Volume 6 | Tech King Fri Mar 18th, 2011, 15:02

    [...] CSS3 Text Warping [...]

  10. Trackback by Visual-Blast Magazine Thu Apr 7th, 2011, 03:04

    CSS3 Text to Path Generator – CSSWarp Online Tool…

    Online tool that allows you to attach any text to an arbitrary bezier path or a circle and create Illustrator like “warped” text with pure CSS and HTML…….

  11. Comment by duopixel Thu Jul 28th, 2011, 05:36

    Not working right for me anymore on Chrome 12 :(

    When I enter the text is along the path, but when I move the bezier curve the x y positions don’t update, but the rotation does. If I click on Warp It! then it does work.

  12. Comment by Dirk Thu Jul 28th, 2011, 11:06

    Hello Duopixel, I’m aware that there is a problem with Chrome 12 (which wasn’t present in V. 11 btw. :( ). Hope I will find time soon to debug :/ Thank you, Dirk.

  13. Comment by drawby Thu Sep 1st, 2011, 02:51

    this is REALLY sweet! can you make text fill a path (rather than go around it) or is their already html5 support for that?

  14. Comment by AzizMostafa Fri Oct 7th, 2011, 18:45

    That’s Fantastic! Think my Flower Crosswords can go online.
    http://www.Typophile.com/node/51401
    Either by stair step rotating text around concentric circles:
    http://www.Typophile.com/files/Key-Whls.pdf
    Or by inserting text in a clockwise + counterclockwise manner:
    http://www.Powerwordpuzzles.com/sunbursts/
    All the Best

  15. Comment by Jacob Mon Oct 17th, 2011, 17:48

    This is amazing! I suggest an option to upload/display a raster background image to easily follow a path that was defined in Illustrator.

  16. Comment by Peter Löbel Fri Oct 21st, 2011, 17:51

    Hallo Dirk,
    das ist einfach Klasse. Vielleicht solltest Du Dich mal beim Microsoft Blend Team melden. Die müssen ja nun alle Silverlight Features für HTML-CSS anpassen. Und lass Dich gut bezahlen, Du bist es wert. ;-)

    Viele Grüsse aus der schönen Schweiz ins schöne Hilden.

    Peter

  17. Comment by Dirk Mon Nov 7th, 2011, 14:20

    Danke :). Mal nachdenken: “Silverlight” – was war nochmal “Silverlight”? ;)

  18. Comment by Zoltan Tue Nov 15th, 2011, 22:25

    Hey … cool stuff!

    Any chance you will be releasing the code for this anytime soon? It would be great to be able to have a library that can produce these curves by adding some “warping” attributes inside an HTML tag. I would love to give that a shot, if you are willing. :-)

  19. Comment by Luke Wed Nov 16th, 2011, 20:47

    This is great, I’d love to see this combined with animation for some accesible HTML5 kinetic text.

  20. Comment by Dirk Fri Nov 25th, 2011, 19:44

    Hey Zolltan, nice to see you here, I’m an avid reader of your blog :) (actually was experimenting with cssSandpaper to bring textwarping to IE<9). I will definetely upload it to github when I have a little time to clean up everything. Hopefully during holiday season.