Home/ Questions/Q 8046361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:45:50+00:00

i seem to be lost how to mark up phrases list (named title1, title2,

  • 0

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..

example

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0