ansaurus

Question

Is there a way to curve / arc text using CSS3 / Canvas

Answer 1

+1 A:

You can certainly do it with canvas, try out this code as an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">

    </style>

  </head>
  <body>
      <canvas id="cnv"></canvas>
      <script type="text/javascript" charset="utf-8">
          cnv = document.getElementById("cnv");
          cnv.width = 500;
          cnv.height = 300;
          ctx = cnv.getContext("2d");
          ctx.font = "bold 12px sans-serif";
          text = "abcdefghijklm"
          for (i = 0; i < text.length; i++) {
              ctx.fillText(text[i], 300, 100);
              ctx.rotate(0.1);
          }
      </script>
  </body>
</html>

It doesn't do it exactly right, but I'm certain you'll manage to tweak it to your likening ;)

Jakub Hampl 2010-05-15 16:59:01

Throws Javascript error in IE8 but works in Chrome.

Vishal Seth 2010-05-15 17:06:34

For IE you have to use excanvas: check this out http://diveintohtml5.org/canvas.html#ie

Jakub Hampl 2010-05-15 17:15:33

Answer 2

A:

I was able to run examples from http://apike.ca/prog_svg_text.html into Chrome but it does not work in IE.

You can use SVGWeb, http://code.google.com/p/svgweb/

Alternatively, you can write your own image generating utility at server site (in .NET/PHP) like an Http Handler and pass text to it and it would return GIF/PNG by using the graphics library and rendering image on the fly for you.

Vishal Seth 2010-05-15 17:05:02

Answer 3

+2 A:

Or you can do it using some CSS, however I'm sure you won't get it running on IE any time soon. On the other hand the cool thing is that the text is selectable :D

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
        .num1 {
            -webkit-transform: translate(0px, 30px) rotate(-35deg); 
        }
        .num2 {
            -webkit-transform: translate(0px, 25px) rotate(-25deg); 
        }
        .num3 {
            -webkit-transform: translate(0px, 23px) rotate(0deg); 
        }
        .num4 {
            -webkit-transform: translate(0px, 25px) rotate(25deg); 
        }
        .num5 {
            -webkit-transform: translate(0px, 30px) rotate(35deg); 
        }

       span {display: inline-block; margin: 1px;}
    </style>

  </head>
  <body>
    <div style="width: 300px; height: 300px; margin: 50px auto">
      <span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
    </div>
</body>
</html>

Jakub Hampl 2010-05-15 18:00:49

Frankly, I don't care about IE. This is intended for an iPhone-optimized website so I'm only worried about it displaying properly in Webkit. I might be able to pull off what you're suggesting for dynamic text using a bit of JavaScript trickery. Thanks.

gabriel 2010-05-15 18:27:09

ansaurus

tags:

views:

answers:

Is there a way to curve / arc text using CSS3 / Canvas

related questions