i seem to be lost how to mark up phrases list (named title1, title2, title3, etc on the attached image) in semicircle form. Maybe there is easy css crossbrowser solution (no-no, no IE6, ha-ha), or i need to use javascript? I can't insert it as image, because i have a requirement that all text on the page should be real text.

Or maybe there is some Jquery plugins that could solve such issue..

Thanks in advance!

i seem to be lost how to mark up phrases list (named title1, title2, title3, etc on the attached image) in semicircle form. Maybe there is easy css crossbrowser solution (no-no, no IE6, ha-ha), or i need to use javascript? I can't insert it as image, because i have a requirement that all text on the page should be real text.

Or maybe there is some Jquery plugins that could solve such issue..

Thanks in advance!

• javascript
• css
• html

• 3 have you tried anything yet? if this is static content, it should be easy to place them using position: absolute, but you didn't provide very much detail in your question – GNi33 Commented Jun 4, 2012 at 23:40
• yes, it is a promo page with a static content. there is one problem - we have different languages support, in different languages there can be different "li" elements number, and it will be hard to change it for every language... i thought even to make a jquery plugin, that will calculate center point of red rectangle and then arrange them in semicircle, but it seems not very easy :( – avasin Commented Jun 4, 2012 at 23:47

3 Answers 3

I would use JavaScript and some simple math to calculate the position of each title. The formula for the x and y position on a circle is the following:

x = radius * cos( angle )
y = radius * sin( angle )

So using this, you can calculate the position of each title:

elem.style.left = radius * Math.cos( angle ) + "px"; // angle in radians
elem.style.top = radius * Math.sin( angle ) + "px";

I have made a demo fiddle showing this: http://jsfiddle.net/eGhPg/

Aw, too late, you already accepted an answer :) Well, here's one with the code wrapped up as a re-usable jQuery plugin.

Working Demo: http://jsfiddle.net/ehmEw/1/

Used like so: $('li').semiCircle(300,50,200,100);​

Here's the code:

jQuery.fn.semiCircle = function(cx,cy,radius,radiusY,startDegrees,endDegrees){
  if (radiusY===undefined)      radiusY      = radius;
  if (startDegrees===undefined) startDegrees = 0;
  if (endDegrees===undefined)   endDegrees   = 180;
  var startRadians = startDegrees*Math.PI/180,
      endRadians   = endDegrees*Math.PI/180,
      stepRadians  = (endRadians-startRadians)/(this.length-1);
  return this.each(function(i){
    var a = i*stepRadians+startRadians,
        x = Math.cos(a)*radius  + cx,
        y = Math.sin(a)*radiusY + cy;
    $(this).css({position:'absolute', left:x+'px', top:y+'px'});
  });
};

Just for fun, another answer, probably heavier but i was already in the middle of it:

http://jsfiddle.net/vecalciskay/Rah3D/2/

hope it helps