Wrap text to a circle shape in svg or canvas

What would be a good solution for fitting text to a circle on a website, so it flows with the curves of the circle, instead of a rectangular bounding box?

Here's what I'm trying to achieve: There are a number of black circles (of a fixed size) on a page, with a textarea next to each of them. When text is entered into the textarea, it appears in the black circle, where it is centered on both axes. If so much text is entered that line becomes longer than the radius of the circle, minus a specified value for margin, the line will break like you would expect from regular wrapping, with the block of text still being centered. Lines nearer the top or bottom will, of course, be shorter than the ones near the middle.

The text will have a fixed size and when the circle is filled with text, the extra content should not be shown (like overflow hidden).

The black circles with the text are really speech bubbles, which are meant to be printed and glued onto a poster.

Do any of the fantastic SVG/Canvas libraries support this or will I have to figure our a method from scratch?

There is a proposed CSS feature call "exclusions" that would make it possible to flow text inside defined areas: http://www.w3.org/TR/css3-exclusions/

This means that SVG and Canvas paths would likely be defined as containers and text would flow/wrap inside the containers.

I did say "proposed" -- it's a ways off from being a reality in browsers.

However...

You can fairly easily wrap text inside a circle using html canvas

enter image description here

The width available to display text on any line changes as you move down the circle.

Here’s how to determine the maximum available width of any horizontal line on a circle

// var r is the radius of the circle
// var h is the distance from the top of the circle to the horizontal line you’ll put text on

var maxWidth=2*Math.sqrt(h*(2*r-h));

You fit text to the line by measuring the width of text—adding one word at a time, until you’ve used up all the available width of that line.

Here’s how to use canvas to measure any text using the current context.font:

var width=ctx.measureText(“This is some test text.”).width;

The rest is just adding text to each line up to the maximum line width and then starting a new line.

If you prefer SVG, you can do similar in SVG using the element.getComputedTextLength method for text metrics.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/upq6L/

<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; padding:20px; }
      canvas{ border:1px solid red;}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script>

  $(function() {

      var canvas=document.getElementById("canvas");
      var ctx=canvas.getContext("2d");

      var text = "'Twas the night before Christmas, when all through the house,  Not a creature was stirring, not even a mouse.  And so begins the story of the day of Christmas";
      var font="12pt verdana";
      var textHeight=15;
      var lineHeight=textHeight+5;
      var lines=[];

      var cx=150;
      var cy=150;
      var r=100;

      initLines();

      wrapText();

      ctx.beginPath();
      ctx.arc(cx,cy,r,0,Math.PI*2,false);
      ctx.closePath();
      ctx.strokeStyle="skyblue";
      ctx.lineWidth=2;
      ctx.stroke();


      // pre-calculate width of each horizontal chord of the circle
      // This is the max width allowed for text

      function initLines(){

          for(var y=r*.90; y>-r; y-=lineHeight){

              var h=Math.abs(r-y);

              if(y-lineHeight<0){ h+=20; }

              var length=2*Math.sqrt(h*(2*r-h));

              if(length && length>10){
                  lines.push({ y:y, maxLength:length });
              }

          }
      }


      // draw text on each line of the circle

      function wrapText(){

          var i=0;
          var words=text.split(" ");

          while(i<lines.length && words.length>0){

              line=lines[i++];

              var lineData=calcAllowableWords(line.maxLength,words);

              ctx.fillText(lineData.text, cx-lineData.width/2, cy-line.y+textHeight);

              words.splice(0,lineData.count);
          };

      }


      // calculate how many words will fit on a line

      function calcAllowableWords(maxWidth,words){

          var wordCount=0;
          var testLine="";
          var spacer="";
          var fittedWidth=0;
          var fittedText="";

          ctx.font=font;

          for(var i=0;i<words.length; i++){

              testLine+=spacer+words[i];
              spacer=" ";

              var width=ctx.measureText(testLine).width;

              if(width>maxWidth){ 
                  return({
                      count:i, 
                      width:fittedWidth, 
                      text:fittedText
                  }); 
              }

              fittedWidth=width;
              fittedText=testLine;

          }

      }


  });   // end $(function(){});

  </script>
</head>
<body>
    <p>Text wrapped and clipped inside a circle</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Recommended topics

Hot tags