CODEWITHSUNDEEP
javascriptjquerywordpressright-to-leftcufon
Iliya Reyzis
Iliya Reyzis

Reputation: 3677

cufon LTR to RTL

I got this site

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

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?

Upvotes: 2

Views: 1385

Answers (1)

Nick Rameau
Nick Rameau

Reputation: 1318

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>');

Upvotes: 2

Related Questions