Cufon’la Sağdan Sola Yazmak

Birkaç ay önce bir Facebook uygulamasında hem Cufon kullanıp hem de bunu sağdan sola olacak şekilde yapmak durumunda kaldım. Bunu yaparken Cufon’un RTL desteklemediğini öğrendim. İleriki zamanlarda sağdan sola yazım Cufon tarafından desteklenecekmiş ama fazla vaktim olmadığı için bir javascript çözümü buldum.

Bu kod sayfa yüklenirken yavaşlamaya sebep olabilir. Ara ara da font değişimi sırasında yaşanan geçişler görünebilir. Ama eğer sayfanın büyük bir bölümünde Cufon kullanmıyorsanız sorun olmayacaktır.

Cufon'la Sağdan Sola Yazmak

HMTL

Sağdan sola yazım için “reverse” isimli bir sınıf kullandım.  Bunu herhangi bir elemente uygulayabilirsiniz.

<span class="reverse">Lorem ipsum dolor sit amet</span>

JS

$('.reverse').wrapInner('<bdo dir=ltr></bdo>');
$('bdo').each(function()    {
  var word = $(this).text();
  var splitText = word.split('');
  var reversedText = splitText.reverse();
  var newText = reversedText.join('');
  $(this).text(newText);
});
Cufon.replace('bdo');

Önce eğer dosyanız sağdan sola tanımlanmış ise bunu soldan sağa yapmak için “dir=ltr” yazıldı. Sonra karakterleri ters çevirmek için bir takım jQuery kodu kullanıldıktan sonra Cufon yenilendi. Kodun çalışması için sayfaya jQuery, Cufon ve kullandığınız Cufon fontlarını eklemeyi unutmayın.

Örnek

Kaynaklar

Using Cufón with Right-To-Left text