How to arrange the elements of a semicircle in css/html/js

Question

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!

Answer 1

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/