• 201118 Mar

    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.

    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.

  • Leave a Comment

    (will not be published)

Hosting by: