cufon LTR to RTL

I got this site

I’m using cufon to convert text to my own font.

Read More

The problem is that the text is shown in reverse.

I’m using JavaScript file called cunfonRTL.js, the content is:

var CufonRTLClass=(function(){
        this.RTL = RTL;

   function RTL(tagName) {
        $(tagName)/*.css('font-size', '19px')*/.wrapInner('<bdo class="cufon" dir=ltr></bdo>');

        $('bdo.cufon').each(function()    {
        var word = $(this).text();
        var splittext = word.split("");
        var reversedtext = splittext.reverse();
        var newtext = reversedtext.join("");
        $(this).text(newtext);
        });

    }
});

CufonRTL = new CufonRTLClass;

The rendered text look like this:

<cufon class="cufon cufon-canvas" alt="כותרת " style="width: 80px; height: 28px; "><canvas width="110" height="28" style="width: 110px; height: 28px; top: 4px; left: -8px; "></canvas><cufontext>כותרת </cufontext></cufon>

Its ‘cufon’ alright but its not RTL.. its LTR..
I’m having syntax problem?

Help will be very appreciated.

UPDATE:
In chrome’s console I found this:
enter image description here

this is how I call the functions:

 Cufon.replace('H1');
CufonRTL.RTL('H1');

UPDATE:
As far as I know there is a jQuery conflict with the $ selectors.
I converted all my $ sings with jQuery
There is no exception now, its just dont run.

I did some debugging and discovered he is not getting inside this loop:
jQuery('bdo.cufon').each(function()

var CufonRTLClass=(function(){
        this.RTL = RTL;

   function RTL(tagName) {
        jQuery(tagName)/*.css('font-size', '19px')*/.wrapInner('<bdo class="cufon" dir=ltr></bdo>');

        jQuery('bdo.cufon').each(function()    {
        var word = jQuery(this).text();
        var splittext = word.split("");
        var reversedtext = splittext.reverse();
        var newtext = reversedtext.join("");
        jQuery(this).text(newtext);
        });

    }
});

CufonRTL = new CufonRTLClass;

help?

Related posts

Leave a Reply

1 comment

  1. Change this line

    $(tagName)/*.css('font-size', '19px')*/.wrapInner('<bdo class="cufon" dir=ltr></bdo>');
    

    To this

    $(tagName)/*.css('font-size', '19px')*/.wrapInner('<bdo class="cufon" dir=rtl></bdo>');