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

Question

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

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

Update:. To clarify: the text that will be created in this way will be dynamic.

Arched or Curved Text Example

+49

javascript html css css3 canvas

gabriel May 15 '10 at 16:29

source share

12 answers

Phrogz · Answer 1 · 2011-01-16 16:09

SVG supports direct text along the path, although it does not “bend” individual glyphs along the path. Here is 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> ...

Jakub Hampl · Answer 2 · 2010-05-15 16:59

You can, of course, do this with a canvas, try 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>

He does not do it for sure, but I’m sure that you will be able to customize it to your liking;)

Jakub Hampl · Answer 3 · 2010-05-15 18:00

Or you can do it using some kind of CSS, however I am sure that you will not be able to run it in IE any time soon. On the other hand, the fact is that the text can be selected: 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>

peterhry · Answer 4 · 2013-03-01 01:06

This is not a clean CSS solution, but CircleType.js works great for encoded text.

http://circletype.labwire.ca/

Mark Rhodes · Answer 5 · 2012-11-15 21:33

There is a jQuery plugin for crooked text using CSS3 called arctext.js . This is pretty good and has a number of configuration options. I think this will not work on IE8, but I think most CSS3 things do not!

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

signano Anas · Answer 6 · 2011-08-05 05:28

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

Aleksandar Timic · Answer 7 · 2012-12-21 16:00

You can try this jQuery plugin http://codecanyon.net/item/jquery-text-arch/3669779
It has many features for customizing text arches and text circles.
Works in all major browsers and OS

Vishal Seth · Answer 8 · 2010-05-15 17:05

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

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

Alternatively, you can write your own utility for creating images on the server (in .NET / PHP), for example, an Http handler and transfer text, and it will return GIF / PNG using the graphics library and displaying the image on the fly for you.

puk · Answer 9 · 2011-05-26 12:04

I understand that this is for a year, but here is my decision

JS script fragment

it wraps text around, but I can’t figure out how to flip letters vertically below because I really hate transforming the canvas, and I can’t plunge into my head how to make two turns on the text (flip once along the y axis and times about the center of an imaginary circle).

Simon Tewsi · Answer 10 · 2012-04-05 07:32

This tutorial shows you how to do this using HTML5 and a canvas. One of the other answers above had a similar idea to use the canvas.rotate method. This also uses canvas.translate.

Rookie Vee · Answer 11 · 2015-01-26 01:54

I used the lesson mentioned above (Simon Tewey) to write the best solution regarding the kerning problem. Doesn't use library pure JS.

Take a look at http://jsfiddle.net/fidnut/cjccg74f/

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

Note: SO requires me to also add all the code from the JSFiddle. I don’t think it’s wise, there is too much code, so I add only the name of the function.

Vereb · Answer 12 · 2017-06-17 21:19

You can use SVG with TextPath as follows:

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

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

More articles: