A couple of days ago I set out to implement Cufón on a client’s website that makes use of a custom font in Hebrew, only to discover that Cufón does not support RTL text. Well not at the moment, anyway.
Simo Kinnunen, the man behind Cufón, has informed me that they are hoping to provide RTL support later this year, but for those of you who like me need a solution NOW, here’s a little jQuery script I’ve written to solve the problem for my client.
It slows things down a bit, obviously, but if you don’t make heavy use of Cufón on the page and you’re willing to tolerate the occasional flicker, I think it’s a usable solution. At least for the time being until the Cufón lot offer native RTL support.
The HTML:
I’ve used Cufón for the main menu links and for several <h1> and <h2> titles throughout the site. I’ve added class=”cufon” to the titles I wanted to replace as a jQuery hook.
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cufon-yui.js"></script>
<script type="text/javascript" src="scripts/Tabasco_500.font.js"></script>
...
</head>
<body>
...
<h1 class="cufon">השגי המועדון</h1>
<ul id="mainmenu">
<li><a href="homepage.asp">דף הבית</a></li>
<li><a href="theclub.html">המועדון</a></li>
<li><a href="training.html">האימונים</a></li>
...
</ul>
...
</body>
The script:
The web-safe font I use for the headers is much larger than my custom font size (when given the same font-size attribute), so before actually replacing the font I’ve had to change the font-size so that it would look roughly the same size.
Because my document text direction is set to RTL , I’ve also had to change the direction of the text I wanted to replace to LTR (so that when the script reverses the text, the words won’t come out all jumbled up). I’ve done that by wrapping the text with <bdo dir="ltr"> </bdo> tags. If your document is set to LTR (or defaults to it) you can skip this step.
$(function(){
$('h1.cufon').css('font-size', '19px').wrapInner('<bdo dir=ltr></bdo>');
$('h2.cufon').css('font-size', '17px').wrapInner('<bdo dir=ltr></bdo>');
$('#mainmenu>li>a').wrapInner('<bdo dir=ltr></bdo>');
});
After these preliminary steps I’ve included the replacement function:
Cufon.replace('bdo');
The script then executes the text-reversing function for each <bdo> tag I’ve inserted earlier (if you didn’t need to reverse the text direction, you can of course use any other tag or attribute as a hook for this function).
This function takes the text inside the tag and assigns it to the variable ‘word’. It then splits the text to its individual characters and reverses their order. The new text is then joined together and assigned to the variable ‘newtext’. Finally the new text is inserted into the targeted element (in this case, the <bdo> tag).
$('bdo').each(function() {
var word = $(this).text();
var splittext = word.split("");
var reversedtext = splittext.reverse();
var newtext = reversedtext.join("");
$(this).text(newtext);
});
That’s all there’s to it. Here’s the full script:
$(function(){
$('h1.cufon').css('font-size', '19px').wrapInner('<bdo dir=ltr></bdo>');
$('h2.cufon').css('font-size', '17px').wrapInner('<bdo dir=ltr></bdo>');
$('#mainmenu>li>a').wrapInner('<bdo dir=ltr></bdo>');
Cufon.replace('bdo');
$('bdo').each(function() {
var word = $(this).text();
var splittext = word.split("");
var reversedtext = splittext.reverse();
var newtext = reversedtext.join("");
$(this).text(newtext);
});
});
You can see this script at work on my client’s site.
Don’t forget to link to the jQuery library, the Cufón script and the replacement font.
I’ve used the jQuery library because I already use it elsewhere on the page. Loading it just for this little script alone does seem like a bit of an overkill, so if you’d rather not use jQuery, this script could easily be translated into ‘real’ javascript.
Tags: Cufon, font replacement, jQuery, right-to-left, RTL
thanks a lot man!
most helpful…
i was just started to write this script by myself and than i tried to “google” it and i found your post…
another thing, do you think that this script can handle also paragraphs? it’s working with titles but broken when i try to use it with paragraphs.”
I started to read about typekit…what is it? how it’s work? and is it working with hebrew? (i guess not).
Thank you Oren.
Because the text direction is changed to LTR for this script to work, it messes up the paragraph text direction. The only way around it would be to wrap each line in tags, but it’s bad practice as it tempers with accessibility (and it’s too much like hard work….)
Javascript text replacement techniques aren’t really suitable for large sections of text. It becomes sluggish and the text replacement becomes noticeable. If you execute my replacement script on top of that it would be even slower and more noticeable. So my advise would be, if you’re going to use this script, stick to small bits of text for titles / navigation.
Hope this helps,
Shira
Hey Shira,
I have very poor knowledge in JQuery and js, but I’m trying my best to implement this on a blog I’m working on – and can’t seem to make it (my headlines just don’t show any characters).
Can I ask for a bit of personal help…?
Hi Guy,
Sure. I’ll get in touch with you by email.
hey
and that should help. Of course it will reverse all text but I’m sure you can fine tune it. anyway just thought i’d give you my input 
takecare
pretty coool, i’ve been experimenting trying to get arabic to work
and you can do away with juqery if you use the
cufon.js file and simply edit
the ‘chars’ variable and add the reverse() function to it in the javascript code
it’s probably some simple debugging. but i can’t get this working.
either the direction gets fixed and i lose the font or the font doesn’t load.
test page:
http://geulah.org.il/drupal6/he/node/51