The textblock in a circle.

Question

Prompt how to solve a problem, please.

I have a div containing text.

It is necessary that the text was in a circle.

From what to me to start to solve the given problem? Can be methods javascript (on a site it is connected jQuery)?

P.S. The decision should be crossbrowser.

Answer 1

Maybe you are looking for this plugin:

http://nicodmf.github.com/TextMorph/en.html

Here are some demos:

http://nicodmf.github.com/TextMorph/demos/jquery.html

Answer 2

Can I guess at a translation?

• you have a div containing text
• you don't know the size, perhaps because the div size is linked to the browser width / screen resolution / parent div
• you want a circle to "spin round the block" (have animated movement?) ie you want a circle to move round the div that contains the text
• you want this to always happen irrespective of the size of the text-container div
• the effect will be kind of like a 10,000 metre runner running round a track except the size of the track is dynamically generated

Not a solution, but I think a translation might be a better first start... Is this anywhere close to what you are trying to describe?

Answer 3

I can think couple of methods:

1. Wrap the text block by bigger element, resize it so that the circle will fit (you will need some serious math skills!) and use cross-browser Raphael library to draw a circle on it.

2. Based on the width & height of text block, adjust top/bottom padding until the box is square and choose best matching background from different size pre-drawn images.

Sample code (using jQuery) to get the second idea, totally untested:

var images = [300, 200, 100];  // image dimensions from biggest to smallest
var textbox = $('#my-textbox');
var padding = 20;  // base padding, choose your own
var w = textbox.width();
var h = textnox.height();
var filler = (w > h ? (w - h) : (h - w)) / 2;  // how much extra padding needed?
var pver = w > h ? filler : padding;  // padding vertical
var phor = w > h ? padding : filler;  // padding horizontal
textbox.css({ paddingTop: pver, paddingBottom: pver,
              paddingLeft: phor, paddingRight phor });
$.each(images, function(i, dimension) {
    if (dimension < textbox.width())
        textbox.css('backgroundImage', 'url(/img/circle_' + dimension + '.png)');
});