tarihinde Fatih Hayrioğlu

[LiveGO][]’ya zaman zaman dil desteği ekliyoruz. Son olarak Almanca ve Arapça dil desteğini ekledik. Almanca ve diğer latin alfabesi ile yazılan dillerde bazı ufak tefek sığmama sorunları dışında bir sorun yaşamadık, ancak Arapça dil desteğini vermeye karar verdiğimiz ve uygulamaya geçtiğimizde bazı sorunlarla karşılaştık. Bu sorunlar dilin latin alfabesi olmaması ve soldan sağa değil sağdan sola doğru akmasından kaynaklanıyor. Benzer yapıdaki diğer dillerde de aynı sorunlar yaşanabilir.

direction özelliği

Bu özellik uygulana eleman içindeki akışın yönünü belirler.

Yapısı : direction: (değer) Aldığı Değerler : ltr | rtl | inherit
Başlangıç değeri: ltr
Kalıtsallık: Var

Aldığı değerler

  • ltr : Soldan sağa (left to right)
  • rtl: Sağdan sola(right to left)

Yazı akışının soldan sağa doğru değilde sağdan sola doğru olmasını css’in bu özelliği ile sağlayabiliyoruz.

body{
	direction:rtl
}

body elemanına vererek tüm siteyi sağdan sola doğru akmasını sağlayabildiğimiz gibi, sadece bir eleman ve içeriğinide sağdan sola doğru akmasını sağlayabiliyoruz.

div#deneme{
	direction:rtl
}

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 5.5+ 1.0+

Biz LiveGOfda tüm html’in sağdan sola akmasını sağlayacak şekilde kodlamadık. Belli alanlarda sağdan sola akmasını sağladık geri kalan yerler, normaldeki gibi soldan sağa oldu.

Ben bizim siteyi kodlarken bazı makaleler okudum ve uygulamada bazı sorunlar yaşadım ve çözümlerini buldum. Bulduğum kadarı ile buraya tecrübelerimi aktarmak istedim.

Ayrıca yine bu konu ile ilgili unicode-bidi özelliğide mevcut ancak kafanızı karıştırmamak için bu özelliğe fazla değinmeyeceğim.

İpuçları

  • Karakter seti olarak utf-8 seçmeliyiz.
  • Metinleri değiştirirken resimlerdeki yazıları değiştirmeyi unutmamalıyız.
  • Akışı sağdan sola olarak değiştirdiğimizde float:left ve float:right kabullerimiz tam tersi oluyor. float:left’leri float:right; float:right’larıda float:left olarak değiştirmeliyiz.
  • Tüm dokümanın sağdan sola olması için body elementine direction:rtl değerini tanımlamamız yeterli.
  • Metinlerin hizalaması için kullandığınız değerleri tam tersi olarak değiştirmeliyiz. text-align:left ve text-align:right değerlerini tam tersi olarak değiştirmeliyiz.
  • Mesafe değerlerinide tersine çevirmeliyiz. padding, margin değerleri mesela
  • Yazı tipi boyutlarını arapça sitede biraz daha büyük seçmemiz daha iyi olacaktır.
  • Bir metni Phoshop’a taşıdığımızda ters çeviriyor ve bozuyor, bu durumu düzeltmek için http://www.adobe.com/support/downloads/thankyou.jsp?ftpID=4107&fileID=3813 adresindeki şablondan yardım almamız gerekiyor. Faik‘e teşekkürler bu link için

Farklı diller için site yapmaktan çok farklı farklı Arapça, Farsça, İbranice gibi akışı sağdan sola olan ve latin alfabesi dışındaki diller için site yapmak çok farklı. Kafanızdaki kabulleri tersine çeviren bu durum sizi biraz zorlasada farklı bir yapı ile uğraşmak zevkli oluyor.

Ben yukarıda karşılaştığım sorunları ve bulabildiğim cevapları sıralamaya çalıştım, umarım sizede lazım olduğunda işinize yarar.

Kaynaklar

tarihinde Fatih Hayrioğlu

Başlığı açıklayıcı yazayım diye uzattım, yinede tam açıklamıyor sorunu. Tam metin şöyle olmalı “overflow:auto atanan eleman içinde %100 genişlikli tablo kullanımı ve bu tablonun ie7’de meydana getirdiği fazladan yatay kaydırma çubuğu sorunu ” Bu tanımı daha iyi yaparım deyipte başlık öneren varsa başlığı değiştirebilirim.

Hayatımız İnternet Explorer ile uğraşmak ile geçiyor. Allah bizi gerçek hayatımızda para sıkıntısı ile, aile sorunları vb.sorunlar ile sınarken; sanal alemde de İnternet Explorer ile sınıyor galiba:D Ne yapalım başa gelen çekilir diyeceğiz ve çözüm arayıp düzeltmeye çalışacağız.

Bir örnek yapalım.

HTML Kodu(Tabloya verilen border ve bordercolor tanımları örneğe görsellik kazandırmak için eklenmiştir, sorun ile alakalı kodlar değildir.)

<div id="kapsul">
  <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
  </tr>
  <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  </table>
</div>

CSS Kodu

#kapsul{
	width:40%;
	height:150px;
	overflow:auto
}

Örneği görmek için tıklayınız.

Üstte ie7 altta Firefox görüntüsünü görüyoruz.

Bu sorun ile belli bir yükseklikteki içeriği overflow:auto ile otomatik kaydırma çubuğu çıkarmak için oluşturduğumuz bir alan içinde eğer yüzde yüz genişlikte bir tablo var ise karşılaşıyoruz. Kaydırma çubuğu yok iken sorun yok, ancak içerik uzayınca normalde sadece dikeyde çıkması gereken kaydırma çubuğu yatayda da çıkıyor.

Çözüm;

Çözüm için kapsayıcı katman içine bir katman daha açıyoruz ve hem dışta overflow:auto verdiğimiz katmana, hemde yeni oluşturduğumuz katmana zoom:1 özelliği atıyoruz.

<div id="kapsul">
  <div id="kapsulIci">
    <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
    </tr>
    <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    </table>
  </div>
</div>

CSS kodu

#kapsul{
	width:40%;
	height:150px;
	zoom:1;
	overflow:auto;
}

#kapsulIci{
	zoom:1;
}

Örneği görmek için tıklayınız.

Ayrıca yukarıdaki çözüm ie6 bazen sorun çıkarıyor, bu gibi durumlarda

<!--[if lt IE 7]><style> #kapsulIci { overflow: auto; }</style><![endif]-->

Eklememiz gerekiyor.

Hayatımızda(gerek gerçek, gerek sanal) sorunlar olacaktır. Sorunlardan kaçmamalıyız, üzerine gidip çözüm aramalıyız. Bir arayüz geliştiricinin kemale ermesi(Senior Front-End Developer) için sorunları ile baş etmesi şart. Çok mu hayat dersi verdim. Başınızı ağrıttı isem af ola.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Firefox’un eklentisi FireBug’ı bilmeyeniniz yoktur. FireBug öyle büyük bir eklenti ki onun üzerine kurulan birçok eklentiler var. Bu eklentide FireBug yeteneklerini geliştirmek için kullanılan bir eklenti.

Bu eklenti jQuery ile kod yazarken çok işimize yarayacak. Bu eklenti sayesinde FireBug’ın CSS yeteneklerine yakın bir çözümü jQuery üzerinde sağlayacağız. FireBug bize CSS açısından belirlediğimiz nesneye uygulanan css özelliklerini yakalama ve hangi css dosyasının hangi satırında olduğu gösterir. Benzer bir özelliği FireQuery bize sağlar.

Bu eklentide jQuery ile etkilediğimiz elemanlar hakkında benzer bir bilgi veriyor bize. Jquery ile etkilenen elemana hangi işlev ile etki yaptığımızı ve hangi fonksiyon ve kod ile etki ettiğimiz gösteriyor.

jQuery bulunmayan sayfalarda da jquery kütüphanesini ekliyor. Böylelikle her sitede FireBug özelliklerini jQuery yardımı ile kullanma imkanı sunuyor bize.

jQuery Data verileri Gösterir

Eklentiyi kurduktan sonra Firebug’ı açarız ve HTML sekmesine geliriz. Aşağıdaki bir pencere ile karşılaşırız.

jQuery data kullanarak web sitesine gömdüğümüz verileri gösterir bize. Bu durum dinamik olarak eklediğimiz jQuery verilerini kontrol ederken çok işimize yarar.

Bir Elemana Atanmış Fonksiyonları Gösterir

Test sayfasında h1 elemanına tanımlana aşağıdaki fonksiyon kodunu görüyoruz.

$('h1').bind('click', function() {
	$(this).css('background-color', '#fee');
});

Bu tanımı FireBug HTML sekmesinde FireQuery yardımı ile aşağıdaki gibi görürüz.

Bir elemana tanımlanmış fonksiyonları bulmaya yarar. Süper bir özelliktir bu. Tanımlana fonksiyon konsolda yukarıdaki gibi görünür.

function() üzerine geldiğimizde bu elemena atama yapılan kodu ve satır numarasını gösterir. Bu bizi birçok yükten kurtaran süper bir özelliktir.

jQuery Olmayan Sitelere jQuery Ekleme Özelliği

Bir sitede jQuery kütüphanesi olmasa da bu eklenti etkin olduğu tarayıcılarda jQuery eklenmiş gibi olur. Bu sayede site üzerinde jQuery kolaylıklarını uygular ve sonuçlarını görebiliriz.

Bu sayede Konsolda jQuery kolaylıklarını kullanarak jquery eklenmemiş olsa da bu sitede jQuery varmış gibi rahat kod yazabiliriz.

Bu eklentiyi bana gösteren Orhan Ekici’ye ve ona gösteren Volkan Özçelik’e teşekkürler.

FireBug büyüksün.

Kaynaklar