Duyarlı web tasarımında istenen satır sonlarıyla başa çıkmak için en iyi uygulamalar nelerdir?

Satış veya e-posta için çok sayıda basit tek sayfalık web öğesi tasarlıyorum. Sık sık başlıklarla ilgili sorunlar yaşadığımı ve farklı medya genişliklerinde istediğim satır sonlarını bulduğumu fark ettim.

Örneğin, şöyle bir başlığım olabilir:

Bizim Yeni thingamabob dilimlenmiş ekmek beri en iyi şey!

Satır kesmelerine kesinlikle dikkat edilmeden satır şu şekilde kesilir:

Bizim Yeni thingamabob
dilimlenmiş ekmek beri en iyi şey !

Tam web boyutunda, "the" den sonra çizgiyi kırmak istiyorum. İki çizgi oluşturma.

Bizim Yeni thingamabob
dilimlenmiş ekmek beri en iyi şey!

Orta genişlikte bir ekran için iki kez kırılırdım:

Bizim Yeni thingamabob dilimlenmiş ekmek beri
en iyi şey
!

Daha dar ekranlar için "new" den sonra, "thingamabob" den sonra ve "thing" den sonra kırılırdım. Dört çizgi oluşturma.

Bizim Yeni
thingamabob dilimlenmiş ekmek beri
en iyi şey
!

Ben gerçekten (mola etiketleri kullanmak istemiyorsanız <br>) o sert setleri çünkü tüm boyutlarda kırılır. Şimdiye kadar ben çeşitli medya sorguları ve genişlik yüzdeleri kullandım h1- h5böylece etiketler etiket güçlerinin bir ara genişliği. Ama bu benim için "hileli" gibi görünüyor ( gerçek metne dayanarak bazen çok mizaçlıdır).

Satır sonlarını html'ye zor kodlamadan kontrol etmenin en iyi yolu nedir?

Bunu sadece paragraflar için değil, kısa metin parçacıkları için kullanması temelinde tavsiye ediyorum.

Başlıkların biçimlendirilmesi makul sınırlar dahilinde mümkün olduğunca kontrol edilebilir ve kontrol edilmelidir . JavaScript veya fazladan gereksiz öğeler oldukça "makul sınırlar" değildir .

Diğer yandan Kırılmayan Alanlar ... ölçülü kullanımda faydalı olabilir.
Bunları bir arada tutmak istediğiniz çiftler ve üçüzler arasına yerleştirmek istediğiniz sonuçları üretebilir.

Bununla birlikte, kullandığınız kelimelerin uzunluğuna bağlı olarak arka arkaya çok fazla kullanamazsınız, çok fazla bağlantı oluşturmak metnin görünüm penceresinden veya kabından taşmasına neden olur.

Kendi sözcük grubunuzdaki bazı hızlı denemeler, bağlantı kurmak için en iyi kelimeleri ortaya çıkarmalıdır.

Bu sorudaki örnek için HTML şöyle görünebilir:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

Aslında burada CSS gerekmez. Ürettiğim bu örnekteki CSS sadece eğlence amaçlı.

Özetle, bu yöntemin anahtarı metnin kırılmasına izin verilen yer sayısını sınırlamaktır.

Soruyu yeniden okuduktan sonra gereksinimleri tam olarak karşılamadığımı fark ettim. Bu özel durum için ve aynı ilgiyi gerektiren başka sayfalar olduğu varsayımı üzerine, <br>tam genişlikte bir kesme noktası için bir tane tanımlayacağım . Daha sonra aynı sınıfı başlıktaki en ideal yerde her sayfada yeniden kullanırdım.

Bu <br>sınıf, medya sorgularının kullanımıyla, sanki orada değilmiş gibi davranan tam genişlikten daha küçük bir şeyde çökecekti. Tam genişlikten daha küçük olan görüntü alanı boyutlarında, sadece  's'e güveniyoruz .

İşarete<br> daha yakın tekli başka bir örnek .

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

En iyi uygulama, web'deki satır kesmeleri üzerinde gerçek bir kontrole sahip olmadığınızı kabul etmektir ve bunu akılda tutarak tasarım yapmak en iyisidir.

Aksine herhangi bir çözüm, her zaman hileli olmalıdır. O gibi olacak HTML dışında kodlama sert ve kullanıcı tanımlı satır sonları uymazsa gibi bir 'hack' olmalı. JS ile bunu oldukça kolay bir şekilde yapabilirsiniz. Kırılma noktalarınızı benzersiz sınıflara sahip boş açıklıklarla ayarlayın, ardından görünüm boyutuna göre BR etiketlerini istediğiniz her SPAN'a enjekte edebilirsiniz.

Tarayıcının satır kaydırmayı işleme biçimini kontrol etmek için yeni tarayıcılarda çalışacak bazı CSS stilleri vardır, ancak yine de bu durumda aradığınız tam kontrolü size vermez.

Öte yandan, hedefiniz belirli satır sonlarını kontrol etmek için çok fazla değilse, ancak metin bloğunuzun nispeten eşit satırlarda 'yığınlandığından' emin olmak için, DIV'nin genişliğini her görünüm penceresi için farklı şekilde ayarlardım. Mükemmel olmayacak, ama muhtemelen oldukça yakın ve en iyi uzlaşma olabilir.

Bunun için bir jquery eklentisi var, Denge Metni .

Adobe'nin, Adobetext-wrap: balance; InDesign'ın Denge Düzensiz Çizgileri Dengesi özelliği gibi yapacak bir CSS seçeneği alma teklifinin yanı sıra oluşturulan Adobe yapımı bir eklentidir (kulağa hoş geliyor, ancak kabul edilse bile, tarayıcıların desteklemesi yıllar alacaktır).

Ancak eklenti şu anda çalışıyor. Sınıfı balance-textolan veya jQuery kullanarak$('.some-elements').balanceText();

• İşte , yaslanmış metni kullanan resmi bir Adobe demosu .

• İşte kodu görmek için sola hizalanmış s - hit edit'i kullanarak yaptığım bir demo<h1> . Bu, yazma sırasındaki bazı sınırlamaları gösterir:

Sınırlamalar

Bu kod şu anda yalnızca satır içi öğeleri olmayan blok düzeyinde etiketlerdeki metin üzerinde çalışmaktadır.

Demo 4'te nasıl bir gibi dengeli bir metnin sizin bloğu içinde bir şey göreceksiniz <a>bağlantısını <span>gibi birşey ya vurgu <em>, <strong>, <b>, <i>vb kaldırılır.

Ayrıca, demo 1, 2 ve 5'i karşılaştırdığınızda, hem CSS sınıfını hem de jQuery çağrısını kullanmanız gerektiğini göreceksiniz .

Orta derecede güvenilir görünüyor, ancak bazen glitchy - yazma sırasında, yan sütuntayken bazen yalnız yetimler bırakarak kayıyor (ancak zamanın% 95'inden fazla çalışıyor gibi görünüyor ve henüz kaymadığını görmedim yan sütundayken) ve açıklanamayan nedenlerle, demolarım Firefox'ta çalışmıyor, ancak Adobe'nin demoları çalışıyor (IE9 + 'da para cezası, şu anda IE8'de test edilemiyor). Kullanırsanız, bazı test sürelerini dikkate alın.

Bununla düzenli olarak uğraşmak zorundayım, tasarımcıların girdilerinin belirli bir şekilde kırılmasını isteyen girdilerle. Bunu yapmanın en basit yolunu metnin içine bir sınıf ile bir açıklık koymak ve sonra bu açıklık display: block;medya sorguları için var buldum .

Yani şöyle bir şey olurdu:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Sonra böyle bir şey ile CSS olurdu:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Her şeyin tüm genişlikler için istediğiniz şekilde kırıldığından emin olmak için hala devam etmeli ve incelik vermelisiniz.

Sık sık karşılaşılan bir sorun varsa, Twitter Bootstrap veya kullandığınız ızgara sistemi gibi kendi satır sonu sınıflarınızı oluşturabilir, kullandığınız adlandırma kuralından sonra sınıf adlarını modelleyebilirsiniz.

Ekran genişliğini algılamak için JavaScript'i kullanabilir ve doğru sürümü (<br> 's gönderinizde olduğu gibi) innerHTML aracılığıyla boş bir div'e yazabilirsiniz.

Maalesef, "istenen web sonları" ve "en iyi web uygulamaları" bir arada değildir. Her kelimeyi doğru yerde bulmak için mükemmeliyetçi arzunuzu serbest bırakın - sadece çok fazla ekran olasılığı ve tasarımcı zihniyetine sahip olmayan çok fazla okuyucu var, başlıklarında satır kesmeleri bile önemsemelisiniz. Bu sorunları daha iyi anlamak için Duyarlı Web Tasarımı konusuna bakın.

Mevcut yöntemim ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

Ve CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Genişliklerin bazen kullanılan gerçek metne göre bazı ayarlamalar yapması gerekir , ancak bu kullandığım genel şemadır. Temelde h1etiketin genişliğini azaltmak, böylece çizgi kırılmasını istediğim yerde kırılır.

Bu işe yarıyor, sadece istendiği yerde kırılma olmasını sağlamak için iyice test edilmesi gerekiyor. Ancak, her durumda kapsamlı testlere ihtiyaç vardır. Dolayısıyla, bu açıdan daha fazla çalışma olması gerekmez .

Satır kesmelerine izin vermek istediğiniz yerleri ekleyebilir white-space: nowrapve yerleştirebilirsiniz <wbr>. Bu yeterli değilse ve medya sorgularıyla hassas kontrol istiyorsanız, yine de aşağıdaki gibi sınıflar ekleyebilirsiniz.<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr