CSS ve jQuery ile dikey ritmi koruyun

İçerik

• Yerleştirme tipi
• Dikey ritim
• Ritmi yürütmek
• Görüntülerle uğraşmak
• JQuery'yi iyileştirme
• Sonuç

• Bilgi gerekli: CSS, temel jQuery
• Gerektirir: jQuery, CSS, HTML
• Proje zamanı: 30 dakika
• Kaynak dosyaları indirin

İçeriğe göre tasarladığınızı varsayarsak, tasarımınızı etkilemek için ilk karar vardır tip ile ilgili olması. Yanında değil bir yazı tipi seçerek sitenizi etkileyen bir şey yaptınız. Tür, baskı ve web tasarımının özüdür ve karmaşıktır; iyi kullanımına giren birçok birikmiş terim, uygulama, kural ve teknik vardır. Bu makale, türünün bir yönünü yönetmeye yönelik bir teknikle ilgilidir; çevrimiçi yapılması zor olan ancak baskıda rutin olan bir tekniktir: tutarlı bir dikey ritmi sürdürmek, bu da profesyonel bir düzen elde etmemizi sağlar.

Yerleştirme tipi

Baskıda, büyük miktarda metne sahip herhangi bir öğe için, tasarımın temeli büyük olasılıkla bir temel ızgara olacaktır. Yapıyı sayfaya getirmek için kullanılır ve içeriğin dikey akışına rehberlik eder. Hemen hemen her şey bu temel ızgaraya göre yerleştirilir. Terimleri tanımıyorsanız endişelenmeyin, hiç kimse referanslara veya temel ızgaralara aşina değildir; onları zaten biliyorsun. Kuşkusuz çizgili kağıda yazdığınızda okulu düşünün - yazarken mektuplarınızın altını kağıttaki satırların her birine düzgün bir şekilde yerleştirdiniz. Temel ve temel kılavuz iş başında. Taban çizgisi, harflerin altının hizalandığı hayali bir çizgidir.Şimdi bu makaleye bakarsanız, gerçekten bir çizgi olmasa da bir temel "görürsünüz". Beyniniz oraya sizin için bir tane koyar, bu yüzden cümleleri okuyabilirsiniz. Çizgili kağıt üzerindeki çizgiler? Temel bir ızgaradırlar. Düzgün, böylece cümleleriniz düz olsun ve metninizin düzenli bir dikey ritmi olması için düzenli aralıklarla ayarlayın.

Dikey ritim

Dikey ritim, sayfa metninin nerede bulunduğunu belirler. Metin bloklarını tarama ve okuma becerimizi etkileyen bir bileşendir ve duygusal tepkilerimizi bilgilendirmeye yardımcı olur. Metin güçlü bir dikey ritme ve iyi bir boşluğa sahip olduğunda, profesyonel, düşünülmüş, yetkili ve okumanın rahat olduğunu hissederiz. Metnin ritmi ve aralığı zayıf olduğunda, onun daha az dikkate alındığını, daha az profesyonel olduğunu ve genellikle okumanın daha zor olduğunu hissederiz. Dikey ritim, tek parça kullanılabilirlik ve tek parça estetiktir.

Ritmi yürütmek

Ne yazık ki web, türle ilgili bazı temel uygulamaları hayata geçirme yeteneği açısından hala baskının zayıf kuzenidir. Web'de bir temel ızgarayı bir baskı tasarımcısının (veya okuldaki bir çocuğun) yaptığı gibi kullanamayız - metnin taban çizgisini bir belgenin temel ızgarasına hizalayamayız. CSS'nin temel ızgara kavramı yoktur. Dolayısıyla, metnimiz tam olarak bir taban çizgisi ızgarasının satırlarına oturmayacaktır. Bunun yerine, çizgiler arasındaki boşlukta dikey olarak ortalanacaktır. Web'in yapabileceği en iyi şey bu.

Örnek bir belgeyle pratik yapalım. İlk olarak, görünür bir taban çizgisi ızgarası oluşturarak ritmi ayarlayacağız. Bunu yapmak için, birbirlerinden 22 piksel aralıklarla düzenli yatay çizgiler çizmek üzere tekrar eden bir arka plan resmi kullanacağız:

1. html {arka plan: #fff url (baseline_22.png); }

Yaşasın, çizgili kağıdımız var!

Hiçbir şeyin sıralanmadığını fark edeceksiniz. Her şeyi aynı hizaya getirmek için, tüm öğelerin alt kenarının bu çizgilerden birine çarpmasını istiyoruz. Bunu yapmanın en kolay yolu, tüm öğelerin 22'nin katı olan dikey bir yükseklik (kenar boşlukları dahil) aldığından emin olmaktır. İşte tam da bunu yapan bazı CSS'ler. REM birimini kullanıyorum, ancak REM'i anlamayan tarayıcılar için bir EM yedeği veriyorum. Ayrıca yorumlara PX birim eşdeğerini de ekliyorum. Henüz REM / EM'yi anlamadıysanız, bunun yerine piksel değerlerini kullanabilirsiniz - hepsi eşdeğerdir:

1. html {/ * yazı tipi boyutu: 16 piksel, satır yüksekliği: 22 piksel * /
2. yazı tipi:% 100 / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. arkaplan: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top ve bottom 22px * /
6. / * em geri dönüş * / margin: 1.375em 0;
7. marj: 1.375rem 0; }
8. h1 {/ * yazı tipi boyutu 32 piksel, satır yüksekliği 44 piksel * /
9. / * em geri dönüş * / yazı tipi boyutu: 2em;
10. yazı tipi boyutu: 2rem; satır yüksekliği: 1.375; }
11. h2 {/ * yazı tipi boyutu 26 piksel, satır yüksekliği 44 piksel * /
12. / * em geri dönüş * / yazı tipi boyutu: 1.75em;
13. yazı tipi boyutu: 1.75rem; satır yüksekliği: 1.5714285714; }
14. h3, h4, h5, h6 {/ * yazı tipi boyutu 22 piksel, satır yüksekliği 22 piksel * /
15. / * em geri dönüş * / yazı tipi boyutu: 1.375em;
16. yazı tipi boyutu: 1.375rem; satır yüksekliği: 1; }
17. p, ul, blok alıntı {/ * alt kenar boşluğu 22px, satır yüksekliği html'den (22px) miras alınır * /
18. / * em fallback * / margin-top: 0; kenar boşluğu alt: 1.375em;
19. kenar boşluğu: 0; kenar-alt: 1.375rem; }

Bunun bize ne verdiğine bir bakalım. Tüm metnin nasıl güzelce hizalandığını fark ettiniz mi? Temelde oturmaz, ancak öngörülebilir bir dikey ritmi vardır. Güzel ve düzenli.

Görüntülerle uğraşmak

Görüntüler işleri daha karmaşık hale getirir. Bazılarını dahil ettiğimizde ritmimize ne olduğuna bir bakın. Bir rekorda atlama gibi bozarlar - tempo doğrudur ama zamanlama kapalıdır. Hizalama kaymış olur. Bunun nedeni, görüntülerin taban çizgisinin katı yüksekliğe sahip olma ihtimalinin düşük olması, dolayısıyla alt kenarın taban çizgisi ızgaramızla aynı hizada olmamasıdır.

Bunu düzeltmek için gerçekten yapmamız gereken tek şey, her görüntüye bir kenar boşluğu eklemek ve kenar boşluğunun altını ızgaramızla aynı hizaya getirmek. Bu, küçük bir JavaScript ile otomatikleştirmek için yeterince basittir. İşte temel planımız:

1. Her görüntünün yüksekliğini hesaplayın.
2. Temel değerin görüntünün o anda kapladığı dikey alana kaç kat bölündüğünü görün ve kalanını alın.
3. Görüntüye uygulamamız gereken ofseti vermek için kalanı taban çizgisinden çıkarın.
4. Görüntünün altına kenar boşluğu olarak ofseti uygulayın.

Görüntünün dikey alanının alt kısmı artık taban çizgisi ızgarasıyla doğru şekilde hizalanacaktır. İşte jQuery'de bunu yapan temel bir işlev:

1. $ (pencere) .bind ('load', function () {
2. $ ("img"). her biri (function () {
3. /* değişkenler */
4. var this_img = $ (this);
5. var taban çizgisi = 22;
6. var img_height = this_img.height ();
7. / * hesabı yap * /
8. var kalan = parseFloat (img_height% taban çizgisi);
9. / * ne kadar eklememiz gerekiyor? * /
10. var ofset = parseFloat (başlangıç-kalan);
11. / * kenar boşluğunu resme uygulayın * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Neden window.bind hat? Çünkü boyutlarını güvenilir bir şekilde alabilmemiz için resimlerin yüklenmesini beklememiz gerekiyor. İşte bu temel kodun çalıştığı bir örnek.

JQuery'yi iyileştirme

Dünya nadiren düzdür ve bu yüzden burada ortaya çıkıyor - epeyce uygulama detayı ile uğraşmak zorundayız. Sahip olduğumuz işlevde ne sorun var? Bol:

• Yüzdürme veya blok yerine satır içi görüntülerde kötü sonuçlar üretir.
• Bazı görüntülerde, özellikle de kaplarda olanlar hatalı görünüyor.
• Akışkan düzenlerle ilgilenmez.
• Yeniden kullanılamaz.

Bu davranışı, örnekteki gülen yüz gibi satır içi görüntülere uygulamak istemiyoruz. Satır içi resimler, alt kenar metinle aynı taban çizgisine oturacak şekilde hizalanır (değil taban çizgisi ızgarası). Bu, görüntünün dikey olarak kaydırıldığı anlamına gelir. Ne CSS ne de JS bize bir metin öğesinin taban çizgisinin nerede olduğunu bulmamız için bir yol sağlamaz, bu nedenle ofseti bilmiyoruz. Satır içi resimleri göz ardı etmeliyiz ve düzeltmemizi yalnızca şu şekilde ayarlanmış resimlere uygulamalıyız: Ekran bloğu (neyse ki, yüzen herhangi bir görüntü otomatik olarak görüntüleme bloğuna ayarlanır).

Bir görüntü bir kap içindeyse, görüntüye uygulanan kenar boşluğu kaptaki taşma ayarları nedeniyle gizlenebilir. Ayrıca, kenar boşluğunu görüntüde değil, bunun yerine kap öğesinde isteyebiliriz. Örnekte, kutunun içindeki resimden çok beyaz kutuda kenar boşlukları olmasını tercih ederiz, böylece kutuda görünen tuhaf boşlukları engelleyebiliriz.

İşlev yalnızca bir kez çalışır, ancak akışkan bir tasarımda, tarayıcı yeniden boyutlandırıldığında görüntülerin yüksekliği değişir (bunu görmek için örneği oldukça dar bir boyuta yeniden boyutlandırmayı deneyin). Yeniden boyutlandırma ritmi yeniden bozar. Tarayıcı yeniden boyutlandırıldıktan sonra ve sayfa yüklendikten sonra işlevin çalışmasına ihtiyacımız var. Akışkan düzenler başka sorunları da beraberinde getirir; görüntüler kesirli piksel yüksekliğinde olabilir, örneğin 132,34 piksel. Bu da, kesirli bir marj uygulasak bile beklenmedik sonuçlara neden olabilir (ilgileniyorsanız nedeni şudur: trac.webkit.org/wiki/LayoutUnit). Bu nedenle, kesirli piksellerin neden olduğu düzen hatalarını önlemek için görüntüyü tam bir piksel yüksekliğine masaj yapmamız gerekecek.

Son olarak, bunu daha yeniden kullanılabilir bir işlev haline getirmeliyiz. Aslında, teorik çözüme kıyasla pratik bir çözümün ihtiyaç duyduğu karmaşıklıkla, diğer projelerde tekrar kullanılabilecek bir eklenti yapmalıyız.

Son örnekte, tüm bunları başaran kodu bulacaksınız. Eklenti JavaScript, takip edebilmeniz için yoğun bir şekilde yorumlanmıştır. Eklentiyi aşağıdaki şekilde arayarak kullanabilirsiniz:

1. $ (pencere) .bind ('load', function () {
2. $ ("img"). baselineAlign ();
3. });

Ya da, görüntünün üst öğesi olarak varsa, eklentiye kenar boşluğunu adlandırılmış bir kapsayıcıya uygulamasını söyleyebilirsiniz:

1. $ (pencere) .bind ('load', function () {
2. $ ("img"). baselineAlign ({kapsayıcı: ’. popup’});
3. });

Sonuç

İyi bir dikey ritmi korumak, baskıda düzenli olarak kullanılan ince ama etkili bir tasarım uygulamasıdır. Artık temel ilkeleri biliyorsunuz, temeller ve temel kılavuz hakkında çalışma bilgisine sahipsiniz ve CSS metin düzeninin baskıya karşı bazı sınırlamalarını biliyorsunuz. Ayrıca bu sınırlamalara karşı nasıl çalışacağınızı, belgelerinizi istediğiniz herhangi bir dikey ritime göre nasıl oluşturacağınızı ve yıkıcı görüntü içeriğiyle başa çıkmanıza yardımcı olacak bir aracınız olduğunu da biliyorsunuz.

CSS olgunlaştıkça, basılı kuzenlerimizle uyumlu olarak daha fazla özellik almaya devam ediyoruz, bu nedenle, kaliteli web siteleri oluşturmak için yazıyı iyi anlamak daha önemli hale gelecektir. Genel olarak yazı hakkında daha fazla bilgi edinmek isterseniz, www.thinkingwithtype.com'u (ve buna uygun kitabı satın almayı) şiddetle tavsiye ederim. Yazı işlemeyle ilgili CSS makalelerinin peşindeyseniz, hem burada hem de web'de başka yerlerde çok sayıda makale vardır. Ayrıca, Mark Boulton ve Elliot Jay Stocks'tan en son haberleri takip etmenizi de tavsiye ederim. Her ikisi de özellikle web tasarımıyla ilgili olarak yazı hakkında sık sık söz ediyorlar.

İyi eğlenceler!