Yarım boşluklar için & nbsp, em-boşluklar, en-boşluklar vb. Gibi HTML'de yararlı başka boşluk kodları var mı?

152

Bir HTML haber bülteninde kullanılabilecek başka kodlar olup olmadığını merak ediyorum.

Hücre dolgusu veya kenar boşlukları kullanırdım ancak bu HTML / CSS şeyinde yeniyim ve hem Ana Başlık satırını hem de altındaki alt başlığı etkileyen bir değişiklik bulamıyorum. Bir e-posta olarak, tam da bunu elde etmek için CSS ile uğraşmakta tereddüt ediyorum - çünkü e-posta istemcilerinin satır içi işaretlemenin aksine CSS biçiminde neyi sevmediğini bilmiyorum.

Bağlam için, kullandığım şablon Mailchimp ekranından gelen Sessiz teması:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

Bir web sayfası olarak e-postanın tamamı burada görülebilir

html 
— wide_eyed_pupil
kaynak

Yanıtlar:

393

Evet, birçok .

Dahil olmak üzere, ancak bunlarla sınırlı değildir:

  • bölünemez boşluk: &#160;veya&nbsp;
  • dar bölmesiz boşluk: &#8239;(karakter referansı yok)
  • en space: &#8194;veya&ensp;
  • em alanı: &#8195;veya&emsp;
  • Üçte üç boşluk: &#8196;veya&emsp13;
  • 4-em boşluk: &#8197;veya&emsp14;
  • 6-em boşluk: &#8198;(karakter referansı yoktur)
  • şekil alanı: &#8199;veya&numsp; 
  • noktalama alanı: &#8200; veya&puncsp; 
  • ince boşluk: &#8201; veya&thinsp;
  • saç alanı: &#8202; veya&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>
Snippet'i genişlet

— kitaplık
kaynak
3
Firefox, tek boşluk olarak işlediği ve bölünemez karakteri empoze ettiği nbsp haricinde, yukarıdaki tüm boşlukları yazı tipinde birden fazla boşluk olacak şekilde aynı genişlikte oluşturur. Gerçek bir utanç. Yalnızca bir karakterin işe yarayacağı durumlar vardır, örneğin doldurma kontrol edildiğinde veyabefore:
— fyngyrz
2
@fyngyrz En azından Linux'taki Firefox 54'te bu doğru değil (artık). Yazı tipine de bağlı olabilir; Bunu, Arial yazı tipi ailesinin kullanıldığı Stack Overflow'da test ettim.
— sadece bir öğrenci
5
Bu boşluk türlerinin nasıl göründüğünü görmek isteyenler için jsfiddle.net/LcLg5u25
— Vadim Ovchinnikov
2
şekil uzayı $numsp;sayıları hizalamak için çok kullanışlıdır, çünkü boşluk aynı yazı tipindeki bir sayı kadar geniş olarak tanımlanır.
— Rudey
2
Windows'ta Firefox artık iyi durumda (v.61) BTW.
— MSC
13

Diğer boşluk karakterleri için kodlar vardır ve bu tür kodlar iyi çalışır, ancak karakterlerin kendileri eski karakterlerdir. Yeni belgelerde kullanılmaktan ziyade, yalnızca mevcut karakter verilerinde bulunmaları nedeniyle karakter kümelerine dahil edilmişlerdir. Bazı yazı tipi ve tarayıcı sürümü kombinasyonları için, temsil edilemeyen genel bir karakter glifinin gösterilmesine neden olabilirler. Ayrıntılar için Unicode boşluklarıyla ilgili sayfamı kontrol edin .

Dolayısıyla, CSS kullanmak daha güvenlidir ve yalnızca sabit genişlikli alanların belirli genişliklerini değil, istediğiniz miktarda boşluk belirlemenizi sağlar. Bana öyle göründüğü gibi, sadece h2 öğelerinizin etrafına boşluk eklemek istiyorsanız, bu öğeler üzerinde dolgu ayarlamak (zaten sahip olduğunuz dolgu: 0 ayarını değiştirmek) iyi çalışmalıdır.

— Jukka K. Korpela
kaynak
Teşekkürler <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Önemli ; "> Yazı tipi ailesi Helvetica Neue vb. Olsa bile bu en
— güvenliydi
Ancak miras kalmışlarsa ve 'karakter kümelerine yalnızca mevcut karakter verilerindeki varlıkları nedeniyle dahil edilmişlerse' bu, yakında hiçbir zaman ortadan kalkmayacakları anlamına gelir. Tartıştığınızı gerçekten görmüyorum. 'Yarım boşlukları' arayacak kadar 'gelişmiş' olan herhangi birinin muhtemelen zaten kenar boşluğu veya dolgunun uygun olmadığına karar verdiğini varsayıyorum. (&thinsp;4 PACK&thinsp;)Gereksinimlerime karar verdim - kenar boşluğu veya dolgu kullanmak bunun için korkunç bir fikir olurdu
— Simon_Weaver
1
@Simon_Weaver, tarif ettiğim gibi, sabit genişlikli boşluk karakterleri güvenilir bir şekilde çalışmıyor. Bunlar aynı zamanda kör bir araçtır: sabit bir genişlik seti, ancak gerçek genişlikler <span style="padding: 0 0.1em">4 PACK</span>, değerleri ayarlama ve ayarlama özgürlüğü gibi yazı tipinden bağımsız ayarların tersine, yazı tipine bağlıdır .
— Jukka K. Korpela
1
Oldukça eski olmasına rağmen, Peter K Sheerin'in "The Trouble with EM 'n EN (and Other Shady Characters)" ( alistapart.com/article/emen ) bu konuyla ilgili okumak için hala yararlıdır. Özellikle - bu son 14 yılda iyileşmiş olsa da - tüm f̶o̶n̶t̶s̶ yazı tiplerinin çeşitli boşlukları doğru şekilde göstermediği gerçeği.
— Dave Kara
1
Ayrıca ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm var ve ZERO WIDTH NON JOINERben sıfır genişlikli boşluklardan daha sık kullanma eğilimindeyim.
— Reb.Cabin
9

Bahsettiğiniz şeyin bu olduğundan emin değilim, ancak kullanabileceğiniz HTML varlıklarının listesi şudur:

XML ve HTML karakter varlığı referanslarının listesi

'Ad' sütunundaki içeriği kullanarak bunları bir &ve;

Örneğin &nbsp;, &emsp;vb

— isNaN1247
kaynak
Öyleyse, işaretlenmiş metin bağlamında ('<p>' ve '</p>' içinde '&' bir unicode glif adını gösterir, değil mi? ';' Nedir, bunun için bir boşluk karakteri ne zaman sinyal vermez? tarayıcı tarafından ayrıştırılıyor mu?
— wide_eyed_pupil
Kapanış noktalı virgül, bir anlamda isteğe bağlıdır, çünkü HTML ayrıştırıcısı, beyaz boşluğu referansın sonu olarak görmeye devam edecektir. Bununla birlikte, belirtim, noktalı virgülle bitirmeniz "gerektiğini" belirtir ( w3.org/TR/html5/syntax.html#character-references )
— isNaN1247
Not - Bunu yanıt olarak işaretlerseniz yine de minnettar
— olurum
2

Bu Unicode Ondalık Kodunu kullandım &#8204;ve çalıştım. daha fazla detay

— Ali Nassajpour
kaynak
1
Sıfır genişlikli birleştirici (bağladığınız) bir boşluk karakteri değildir. Hiç yer kaplamaz ve kelime ayırıcı olarak değerlendirilmez. Sahip olduğu tek amaç, bitişik karakterlerin bir bağa birleştirilmesini önlemektir; bu bazen Latin olmayan alfabelerde yararlıdır.
— duskwuff -inaktif-
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.