Apakah ada kode spasi lain seperti & nbsp untuk setengah spasi, em-spasi, en-spasi dll berguna dalam HTML?


149

Ingin tahu apakah ada kode lain yang tersedia untuk digunakan dalam buletin HTML.

Saya akan menggunakan sel atau margin sel tapi saya baru untuk hal HTML / CSS ini dan saya tidak dapat menemukan perubahan yang mempengaruhi baris Judul Utama dan sub-kepala di bawahnya. Menjadi email saya ragu-ragu untuk pergi mondar-mandir dengan CSS untuk mendapatkannya - karena saya tidak tahu apa yang tidak disukai klien email dengan cara CSS sebagai lawan dari inline markup.

Untuk konteks templat yang saya gunakan adalah Bisukan tema dari Mailchimp snip:

    <!-- 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>

Seluruh email sebagai halaman web dapat dilihat di sini

Jawaban:


381

Ya banyak .

Termasuk, tetapi tidak terbatas pada:

  • ruang tanpa putus: &#160;atau&nbsp;
  • ruang tanpa istirahat sempit: &#8239;(tidak ada referensi karakter yang tersedia)
  • id ruang: &#8194;atau&ensp;
  • ruang em: &#8195;atau&emsp;
  • Ruang 3-per-em: &#8196;atau&emsp13;
  • Ruang 4-per-em: &#8197;atau&emsp14;
  • Ruang 6-per-em: &#8198;(tidak ada referensi karakter yang tersedia)
  • ruang gambar: &#8199;atau&numsp;
  • ruang tanda baca: &#8200; atau&puncsp;
  • ruang tipis: &#8201; atau&thinsp;
  • ruang rambut: &#8202; atau&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>


3
Firefox menjadikan semua ruang di atas sebagai lebar yang sama, lebih lebar dari satu ruang di font, kecuali untuk nbsp, di mana ia dirender sebagai satu ruang dan memaksakan karakter yang tidak melanggar. Sayang sekali. Ada kasus di mana hanya karakter yang akan melakukan, misalnya ketika padding sedang dikontrol atau diteruskan ke sesuatu yang lain dengan konstruksi sepertibefore:
fyngyrz

2
@fyngyrz Setidaknya di Firefox 54 di Linux, ini tidak benar (lagi). Mungkin juga tergantung pada font; Saya sudah menguji ini pada Stack Overflow, di mana keluarga font Arial digunakan.
Hanya seorang siswa

5
Bagi siapa saja yang hanya ingin melihat bagaimana jenis ruang putih ini terlihat seperti jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
ruang angka $numsp;sangat berguna untuk menyelaraskan angka, karena ruang didefinisikan persis selebar angka dalam font yang sama.
Rudey

2
Firefox pada Windows baik-baik saja sekarang (v.61) BTW.
MSC

13

Ada kode untuk karakter spasi lain, dan kode-kode itu berfungsi dengan baik, tetapi karakter itu sendiri adalah karakter lama. Mereka telah dimasukkan ke dalam rangkaian karakter hanya karena kehadiran mereka dalam data karakter yang ada, daripada untuk digunakan dalam dokumen baru. Untuk beberapa kombinasi font dan versi browser, mereka dapat menyebabkan mesin terbang generik dari karakter yang tidak dapat ditampilkan. Untuk detailnya, periksa halaman saya tentang ruang Unicode .

Jadi menggunakan CSS lebih aman dan memungkinkan Anda menentukan jumlah spasi yang diinginkan, tidak hanya lebar spesifik ruang lebar tetap. Jika Anda hanya ingin menambahkan spasi di sekitar elemen h2 Anda, menurut saya, maka pengaturan padding pada elemen-elemen tersebut (mengubah nilai padding: 0 pengaturan yang sudah Anda miliki) akan berfungsi dengan baik.


Terima kasih saya akhirnya menggunakan atribut inline <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; ukuran font: 15px; font-weight: normal; warna: # 192c45! Penting ; "> Saya kira itu yang paling aman meskipun keluarga font adalah Helvetica Neue dll
wide_eyed_pupil

Tetapi jika itu adalah warisan dan 'dimasukkan ke dalam rangkaian karakter hanya karena kehadiran mereka dalam data karakter yang ada' itu berarti mereka tidak akan pergi dalam waktu dekat. Saya benar-benar tidak melihat argumen Anda. Saya berasumsi siapa pun yang 'mahir' cukup untuk mencari 'ruang setengah' mungkin sudah memutuskan bahwa margin atau bantalan tidak sesuai. Saya menyetujui (&thinsp;4 PACK&thinsp;)persyaratan saya - menggunakan margin atau bantalan akan menjadi ide yang buruk untuk ini
Simon_Weaver

1
@Simon_Weaver, seperti yang saya jelaskan, karakter spasi tetap-lebar tidak berfungsi dengan baik. Mereka juga merupakan alat tumpul: seperangkat lebar tetap, meskipun lebar sebenarnya bergantung pada font, sebagai kebalikan dari pengaturan font-independen seperti <span style="padding: 0 0.1em">4 PACK</span>, dengan kebebasan dalam mengatur dan menyetel nilai.
Jukka K. Korpela

1
Meskipun sudah cukup tua, Peter K Sheerin "The Trouble With EM 'n EN (dan Other Shady Characters)" ( alistapart.com/article/emen ) masih berguna untuk membaca topik ini. Khususnya — walaupun ini mungkin telah meningkat selama 14 tahun terakhir — fakta bahwa tidak semua jenis huruf f̶o̶n̶t̶s̶ membuat berbagai ruang dengan benar.
Dave Land

1
Ada juga ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm dan ZERO WIDTH NON JOINERsaya cenderung lebih sering menggunakan daripada ruang dengan lebar nol.
Reb.Cabin

9

Tidak yakin apakah ini yang Anda maksudkan, tetapi ini adalah daftar entitas HTML yang dapat Anda gunakan:

Daftar referensi entitas karakter XML dan HTML

Dengan menggunakan konten dalam kolom 'Nama' Anda bisa membungkusnya dengan &dan;

Misalnya &nbsp;, &emsp;, dll


Jadi dalam konteks teks yang ditandai (katakanlah di dalam '<p>' dan '</p>' the '&' menunjukkan nama mesin terbang unicode, kan? Apakah ';' untuk itu char spasi tidak memberi sinyal ketika itu diuraikan oleh browser?
wide_eyed_pupil

Semi colon penutup adalah opsional dalam arti karena parser HTML masih akan melihat spasi putih sebagai akhir dari referensi. Namun spesifikasi menyatakan bahwa Anda "harus" diakhiri dengan tanda titik koma ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS - Saya masih akan menghargainya jika Anda menandai ini sebagai jawaban - jika Anda merasa ini telah menjawab pertanyaan Anda :)
isNaN1247

2

Saya menggunakan Unicode Decimal Code ini &#8204;dan berhasil. keterangan lebih lanjut


1
Non-joiner lebar nol (yang Anda tautkan) bukan karakter spasi. Tidak memakan ruang apa pun, dan tidak diperlakukan sebagai pemisah kata. Satu-satunya tujuan yang dimilikinya adalah mencegah karakter yang berdekatan dari bergabung ke dalam ligatur, yang kadang-kadang berguna dalam skrip non-Latin.
duskwuff -inactive-

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.