Arctext.js – Curving Text with CSS3 and jQuery

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Arctext

View demo Download source

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

How it works

The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle (hence arc) for which the radius can be specified. The space and rotation for each letter will be calculated using that radius and the width of the text.

Options

The following options are available:

radius	: 0, 	
// the minimum value allowed is 
// half of the word length. 
// if set to -1, the word will be straight.

dir		: 1,	
// 1: curve is down, 
// -1: curve is up

rotate	: true,	
// if true each letter should be rotated.

fitText	: false 
// if you want to try out the 
// fitText plugin (http://fittextjs.com/) 
// set this to true. 
// Don't forget, the wrapper should be fluid.
  

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 38

  1. 6

    Not sure what other are saying about not working in IE – seems to work fine on my versions. A question: how do i get rid of using webfonts and just use whatever i specify in my CSS? I thought getting rid of the following – or part thereof – would fix it but to no avail.

    I have stripped the code back to example 1:


    var $example1 = $('#example1').show();

    google.load('webfont','1');

    google.setOnLoadCallback(function() {
    WebFont.load({
    google : {
    families : ['Montserrat','Concert One']
    },
    fontactive : function(fontFamily, fontDescription) {
    init();
    },
    fontinactive : function(fontFamily, fontDescription) {
    init();
    }
    });
    });

    function init() {

    $example1.show().arctext({radius: 500});

    };

    Which works well. i thought if i got rid of – or part thereof – the following code it would still work:


    google.setOnLoadCallback(function() {
    WebFont.load({
    google : {
    families : ['Montserrat','Concert One']
    },
    fontactive : function(fontFamily, fontDescription) {
    init();
    },
    fontinactive : function(fontFamily, fontDescription) {
    init();
    }
    });
    });

    Any ideas?

  2. 9

    I dunno how do you guys at Codrops come up with these innovative ideas. Some of the best tutorials I’ve ever come across are on this blog. Keep it up !

  3. 10

    nice!!!, cool for us retarded people that cant really use ‘them there fancy picture book learnin photoshop tricks’
    funny thing was is that i was struggle with this very same thing this morning assigning damn text to vector paths……d’oh!

    the first tweak i can see is to assign a rotation given some data or a trigger event.
    interesting set of adjustments would be to replicate a watch purely without images and a ‘snap into place’ day/date dial or window.

    the UI possibilities for just this example are endless.

    thanks for a great bookmark

    • 14

      I agree with the “blink” part. I am sure if you set the backface-visibility to hidden (spans) it will not blink. Cheers

Follow this discussion

Leave a Comment