Arctext.js – Curving Text for Your Presentations

January 31, 2012

What do you think it would take to build something like the below?

I'm guessing you would fire up Photoshop and start creating this as an image. What if I told you that there's another way to do it; a way that doesn't involve images at all?

Turns out that this can be done with Arctext.js, a jQuery plugin that uses CSS3 transforms to rotate letters along a curved path. The above can be re-created using Arctext to curve the text and plain 'ole CSS to style it.

As usual, start by downloading the plugin from here and hosting it on the web somewhere. Then, using our digital signage software, create a Presentation containing some HTML that represents the text that you want to curve. After linking to the plugin in the Presentation's HTML, you can invoke it on the appropriate element.

Get started with Rise Vision

For example, if I have the following HTML:

<h3 id="example1">I wanna be different</h3>

I can curve the text by executing the following Javascript:

$('#example1').arctext({radius: 300});

This uses jQuery to select the element with an ID of example1, and rotates the letters across the imaginary arc of the supplied radius parameter (in this case, 300). The result will be something like this:

 

There are additional options for specifying whether the letters should curve up or down, and whether each letter should be rotated or left straight. If you so desire, you can also animate the curving effect:

$('#example1').arctext('set', {
radius : 500,
dir : -1,
animation : {
speed : 1000,
easing : 'ease-out'
}
});

One advantage of choosing CSS over images is that the number of requests that need to be made to the server are reduced, thereby saving bandwidth and decreasing latency time.

You can check out a live demo here.