Menu
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?
509
Right-click on the shape border and select "Format Shape." Click on "Text Options" in the Format Shape pane that appears on the right and click on the text icon marked with a green A. Check the "Wrap Text in Shape" box to apply text wrapping at the borders of the shape.
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
