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

I'm trying to make a curved text effect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect?

Update: To clarify: The text that will be styled this way will be dynamic.

Arched or Curved Text Example

Answers:

Answer

SVG supports text-on-a-path directly, though it does not 'bend' the individual glyphs along the path. Here's an example of how you create it:

...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
Answer

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <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 ;)

Answer

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">
  <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>
Answer

It's not a pure CSS solution but CircleType.js works great for arced text.

http://circletype.labwire.ca/

Answer
<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
    </defs>
  </svg>
</embed>
Answer

You can try this jQuery plugin http://codecanyon.net/item/jquery-text-arch/3669779
It has a lot of options for customizing text arches and text circles.
Works in all major browsers and OS's

Answer

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.

Answer

I used the tutorial mentioned above (by Simon Tewsi) to write a better solution, regarding the kerning issue. Uses no library, pure JS.

See it at http://jsfiddle.net/fidnut/cjccg74f/

function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)

Note: SO is demanding that I put all the code from JSFiddle in here too. I don't think this is wise, too much code, so I am adding only the name of the function.

Answer

You can use SVG with TextPath like this:

<html>
<head>
<script>
 function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
 }
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
  <svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="CurvedPath"
          d="M 0 150 Q 325 50 650 150 " />
  </defs>
<text font-size="54" x='325' y='50'  text-anchor="middle"  fill="darkgreen" font-family=Arial,Helvetica  style="text-shadow: 2px 2px 3px gray;"
>       <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
    </textPath>
  </text>
</svg>
</body>

</html>

Answer

There is a jQuery Plugin to curve text using CSS3 called arctext.js. It's pretty good and has a range of configuration options. I guess it won't work on IE8 but I guess most CSS3 thing don't!

There's also a demo page with some example of it in action here.

Answer

I realize this is over a year late, but here is my solution

JS Fiddle snippet

it wraps the text around but I can't figure out how to flip the letters vertically along the bottom because I really really really hate the canvas transformations and I can't wrap my head around how to do two rotations on text (flip once along the y axis and once again about the center of an imaginary circle).

Answer

This tutorial shows you exactly how to do it using HTML5 and canvas. One of the other replies, above, had a similar idea, to use the canvas.rotate method. This one also uses canvas.translate.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.