Bend and Set Text on a Circle Without Using Photoshop

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials • Posted on 5 Comments

When web designer creates pages, sometimes they want to set an element where they need to bend  or wrap texts inside a circle (e.g. for the site’s logo or title). Photoshop and some image editing software is often the go-to software for creating these images.

On the other hand, bending and setting text on a circle without using Photoshop gives flexibility to the design and value to the SEO since search engines can’t read texts in images.

This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.

Today we’re going to look on how to bend text or set text on a circle using CSS3 (which is the harder way) and jQuery (which is the easier way).

Resource You Will Need to Complete This Tutorial:

Using CSS3 (The Harder Way)

To give you ideas how we will implement this using only CSS3, take a look at the figure below.

break

As you can see, for us to be able to do this using CSS3 only, we need to break the text apart to individual letters. We can do this by using the span tag on each single text. First, we need to wrap all texts in a container ID named simple_arc, then, put each lettert on a span tag. We will also need to put a unique class to each spanned text to optimize their position later on using CSS. Take a look at the HTML code below.

            <div id=”simple_arc”>
                                         <span class='w0'>S</span>
					 <span class='w1'>I</span>
					 <span class='w2'>M</span>
					 <span class='w3'>P</span>
					 <span class='w4'>L</span>
					 <span class='w5'>E</span>
					 <span class='w6'> </span>
					 <span class='w7'>A</span>
					 <span class='w8'>R</span>
					 <span class='w9'>C</span>
              </div>
 

Now, to properly position the text, we need add width and height to our container ID simple_arc . Check out the code below.

#simple_arc {
	     display: block;
             width:306px;
             height:305px;
	}

Next, to simplify the process for each class that we put on each span text, we need to use the child selector (>) to select all child elements of span class w, the class that we placed, followed by its number (according to its order). Then we place nth-of-type(n + 0) selector to match every element that is the nth child of span class.

Click here learn more about nth-of type(n). Afterwards, we set the position of each element to absolute and then use the transform-origin property to change the position on transformed elements.

#simple_arc>span[class^=w]:nth-of-type(n+0){
					 display:block;
					 position:absolute;
                     -moz-transform-origin:50% 100%;
					 -webkit-transform-origin:50% 100%;
					 -o-transform-origin:50% 100%;
					 -ms-transform-origin:50% 100%;
					 transform-origin:50% 100%;
					 }

Now, go ahead and add some basic styles such as font size and font face to the span element. So you’ll have this.

#simple_arc span{
					 font-family:'Viga';
					 font-size:38px;
					 font-weight:regular;
					 font-style:normal;
                     line-height:0.65;
					 white-space:pre;
					 overflow:visible;
					 padding:0px;
					 }

Next let’s add styles to each span class that we’ve added. Firs, we will use the transform property and give it a property value of rotate. The value of rotate will have the numeric value of the radius (which will be represented by rad). This will rotate the text position to a specific radius value.

Next, we’ll also give it width and height and manage the position using left and top properties.

#simple_arc .w0 {
					 -moz-transform: rotate(-1.14rad);
					 -webkit-transform: rotate(-1.14rad);
					 -o-transform: rotate(-1.14rad);
					 -ms-transform: rotate(-1.14rad);
					 transform: rotate(-1.14rad);
                     width: 21px;
					 height: 24px;
					 left: 42.7px;
					 top: 93.95px;
					 }

I won’t be covering each span class that was set for each text since all of the class have the same concept in setting up their position on the screen but you can download the files to check them.

We have 3 examples (simple arc, reverse arc and auto-radius) on the demo you can check to know how you can apply these codes. This part gives you the basic understanding on how to manipulate the text position and place them to look like a set on a circular shape.

css

Tip: If you want to use a web tool that generates codes for bending or setting text on a circle using CSS only, you might want to check out CSS Warp, a CSS to path generator.

Using jQuery (The Easiest Way)

To bend text set text on a circle using jQuery, we will use a plugin called circletype.js, a tiny jQuery plugin that lets you set type on a circle. OK, let’s put this plugin to work.

Simple Arc

For this part, let’s create a simple arc which gives you a sweet text bend.

Here’s the HTML code.

<p id="simple_arc">SIMPLE ARC</p>

Notice that we gave it an ID of Simple Arc. Next, load the jQuery library and and then call this code below before the closing body tag. This will set the radius to 135, which will bend the text upward.

$('#simple_arc').circleType({radius:135});

simple arc

Reversed Arc

Now that we have a simple arc, let’s go ahead and reverse the bend position of the text.

Here’s the HTML code.

<p id="reversed_arc" >REVERSED ARC</p>

Next, call this code below before the closing body tag. This will set the radius to 160 and then by setting dir to -1, the text will flow counter-clockwise.

$('#reversed_arc').circleType({radius: 160, dir:-1});

reverse arc

Auto-Radius

Now that we have tried the simple and reversed arc, let’s put some text around a circle. So to do this, set the HTML code below:

<p id="auto_radius">AUTO RADIUS TEXT ALL OVER </p>

Then call this code below before the closing body tag. By leaving the radius empty, CircleType.js will execute a perfect radius and will set the text on a circle.

$('#auto_radius').circleType();

auto-radius

Final Words

Curving, bending or setting text on a circle on web type is much easier to be done with jQuery. On the other hand, using CSS only gives you full control on the text positions. Hope you’ve learned on this tutorial and see you next time!

50 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

5 Comments Best Comments First
  • Samiullah Khan

    Friday, March 7th, 2014 09:52

    1

    Photoshop or Illustrator already allow you to convert shape into css3. I hope soon they will such capability to css too.

    By the way, there is a history behind that. Firstly people stated using border radius, box shadows and gradients in their designs. Later W3C made CSS capable to achieve those effects or design elements just using css styles. Not long ago Photoshop thinking of their designer’s adding export to CSS feature.

    0
  • Ralph

    Friday, March 7th, 2014 15:11

    2

    Check your hyperlinks (before hitting publish)!

    0
  • Nahid

    Saturday, March 8th, 2014 20:01

    3

    wow……………………………This is really helpful to enhance my typography skill. Thank you very much.

    0
  • Vikas Kapadiya

    Sunday, March 16th, 2014 15:02

    4

    its really good tutorial . the js option is easy and nice . thanks

    0
  • Khánh Hân

    Monday, March 24th, 2014 20:34

    5

    Convenient access, faster load speed images

    0
  • Khánh Hân

    Monday, March 24th, 2014 20:34

    5

    Convenient access, faster load speed images

    0
  • Vikas Kapadiya

    Sunday, March 16th, 2014 15:02

    4

    its really good tutorial . the js option is easy and nice . thanks

    0
  • Nahid

    Saturday, March 8th, 2014 20:01

    3

    wow……………………………This is really helpful to enhance my typography skill. Thank you very much.

    0
  • Ralph

    Friday, March 7th, 2014 15:11

    2

    Check your hyperlinks (before hitting publish)!

    0
  • Samiullah Khan

    Friday, March 7th, 2014 09:52

    1

    Photoshop or Illustrator already allow you to convert shape into css3. I hope soon they will such capability to css too.

    By the way, there is a history behind that. Firstly people stated using border radius, box shadows and gradients in their designs. Later W3C made CSS capable to achieve those effects or design elements just using css styles. Not long ago Photoshop thinking of their designer’s adding export to CSS feature.

    0

Comments are closed.

54.242.231.109 - unknown - unknown - US