- Konu sahibi
- #1
HTML
Normal paragrafta yan yana yazılan boşluklar ekranda genellikle tek boşluk gibi görünür.
Bir HTML örneğini sayfada çalıştırmadan metin olarak göstermek için özel karakterleri uygun biçimde yazın:
Bu örneğin beklenen görüntüsünde h1 ve p etiketleri yazı olarak görünür; başlık ve paragraf öğesine dönüşmez. İkinci satırın başındaki iki boşluk da korunur. Kaynağa doğrudan
Önce içeriğin anlamını, sonra görünümünü seçin. Her eş aralıklı yazı kod değildir; her kod parçası da ayrı bir blok gerektirmez.
Kodun özgün satırlarını koruyup gerektiğinde yatay kaydırma göstermek için örnek bir stil şöyledir:
Bu kural ilgili pre öğesine uygulanır. Yazının dar ekranı genişletmesi yerine kutu içinde kayması beklenir. Üst kapsayıcı bir flex veya grid öğesiyse onun asgari genişliği de taşmayı etkileyebilir; sonucu gerçek dar ekran boyutunda kontrol edin.
Yatay kaydırma yerine satırların kutuya göre bölünmesini istiyorsanız
Kullanıcı içeriğini başka bir yerde HTML içine birleştirmek bu örneğin güvenli metin yerleştirme koşulunu bozar. Ayrıca pre, sözdizimi renklendirmesi veya kopyalama düğmesini kendiliğinden sağlamaz; bunlar ayrı özelliklerdir.
HTML ayrıştırıcısı, açılış pre etiketini hemen izleyen ilk satır sonunu kaldırır. Tüm boş satırların silinmesi söz konusu değildir. İlk satırın konumunu ayarlarken bu davranışı ve CSS kurallarını birlikte inceleyin.
Sütunlu düz çıktı gösterebilir; ancak gerçek satır ve sütun ilişkileri olan verilerde HTML tablosunun anlamını sağlamaz. Özellikle ekran okuyucu kullanan ziyaretçiler için veri yapısına uygun öğeyi seçin.
<pre> etiketi, boşlukların ve satır sonlarının anlam taşıdığı önceden biçimlendirilmiş metni işaretler. Kod örnekleri, terminal çıktıları veya girintili düz metin göstermek için kullanılır. Tarayıcı çoğunlukla eş aralıklı yazı tipi uygular; ancak görünüm CSS ile değiştirilebilir.Normal paragrafta yan yana yazılan boşluklar ekranda genellikle tek boşluk gibi görünür.
pre ise varsayılan biçimiyle bu boşlukları ve kaynak metindeki satır sonlarını korur. Bu davranış, programlama kodundaki girintilerin okunmasını kolaylaştırır. Yine de pre içindeki içerik HTML olarak ayrıştırılır; etiketin bir güvenli metin kutusu gibi her şeyi kendiliğinden etkisizleştirdiği düşünülmemelidir.Temel kullanım ve kod gösterimi
Bir HTML örneğini sayfada çalıştırmadan metin olarak göstermek için özel karakterleri uygun biçimde yazın:
HTML:
<pre class="kod"><code><h1>Merhaba</h1>
<p>Girintili satır</p></code></pre>Bu örneğin beklenen görüntüsünde h1 ve p etiketleri yazı olarak görünür; başlık ve paragraf öğesine dönüşmez. İkinci satırın başındaki iki boşluk da korunur. Kaynağa doğrudan
<h1> yazarsanız tarayıcı bunu HTML işaretlemesi olarak yorumlayabilir. Metindeki < için <, & için & kullanımı bu ayrımın temelidir.pre, code ve CSS arasındaki fark
Önce içeriğin anlamını, sonra görünümünü seçin. Her eş aralıklı yazı kod değildir; her kod parçası da ayrı bir blok gerektirmez.
| Öğe veya özellik | Görevi | Uygun örnek |
|---|---|---|
| pre | Önceden biçimlendirilmiş metni işaretler | Satırları ve girintisi önemli terminal çıktısı |
| code | İçeriğin bilgisayar kodu olduğunu belirtir | Cümle içindeki kısa değişken adı |
| pre içinde code | Çok satırlı kodu anlamı ve düzeniyle sunar | Bir fonksiyon örneği |
| white-space | Boşlukların ve satır kaydırmanın görünümünü yönetir | Dar ekranda uzun satırı kaydırmak |
code tek başına satır sonlarını koruma garantisi vermez. Buna karşılık pre yalnızca yazı tipi seçmek için kullanılmamalıdır. Bir paragrafı eş aralıklı göstermek istiyorsanız uygun paragraf öğesine CSS uygulayabilirsiniz.Uzun satırları nasıl yönetirsiniz?
Kodun özgün satırlarını koruyup gerektiğinde yatay kaydırma göstermek için örnek bir stil şöyledir:
CSS:
.kod {
max-width: 100%;
overflow-x: auto;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}Bu kural ilgili pre öğesine uygulanır. Yazının dar ekranı genişletmesi yerine kutu içinde kayması beklenir. Üst kapsayıcı bir flex veya grid öğesiyse onun asgari genişliği de taşmayı etkileyebilir; sonucu gerçek dar ekran boyutunda kontrol edin.
Yatay kaydırma yerine satırların kutuya göre bölünmesini istiyorsanız
white-space: pre-wrap kullanabilirsiniz. Boşluklar korunur, fakat uzun satır görüntüde bölünebilir. Satır hizasının anlam taşıdığı çıktılarda hangi yaklaşımın okunabilir olduğunu değerlendirin.Uygulama ve kontrol adımları
- Metnin kod mu, terminal çıktısı mı yoksa sıradan paragraf mı olduğunu belirleyin.
- Çok satırlı kod için pre içine code yerleştirin; girintileri kaynakta bilinçli bırakın.
- HTML olarak ayrıştırılmasını istemediğiniz karakterleri kaçışlayın. Kullanıcıdan gelen düz metni JavaScript ile yerleştiriyorsanız HTML ayrıştıran innerHTML yerine uygun öğenin textContent özelliğini kullanın.
- Sayfada iki boşluk, boş satır ve uzun satır içeren bir örneği kontrol edin.
- Dar ekranda yatay kaydırmanın veya seçtiğiniz satır sarmanın çalıştığını doğrulayın.
Kullanıcı içeriğini başka bir yerde HTML içine birleştirmek bu örneğin güvenli metin yerleştirme koşulunu bozar. Ayrıca pre, sözdizimi renklendirmesi veya kopyalama düğmesini kendiliğinden sağlamaz; bunlar ayrı özelliklerdir.
Sık sorulan sorular
pre açılışından hemen sonraki boş satır neden kayboluyor?
HTML ayrıştırıcısı, açılış pre etiketini hemen izleyen ilk satır sonunu kaldırır. Tüm boş satırların silinmesi söz konusu değildir. İlk satırın konumunu ayarlarken bu davranışı ve CSS kurallarını birlikte inceleyin.
pre içindeki metin bir tablo yerine kullanılabilir mi?
Sütunlu düz çıktı gösterebilir; ancak gerçek satır ve sütun ilişkileri olan verilerde HTML tablosunun anlamını sağlamaz. Özellikle ekran okuyucu kullanan ziyaretçiler için veri yapısına uygun öğeyi seçin.
