Ci sono altri codici di spazi bianchi come & nbsp per semispazi, em-spazi, en-spazi ecc. Utili in HTML?


149

Mi chiedo se ci sono altri codici disponibili da utilizzare in una newsletter HTML.

Vorrei usare il riempimento o i margini delle celle, ma sono nuovo in questa cosa HTML / CSS e non riesco a trovare una modifica che influisca sia sulla riga del titolo principale che sul sottotitolo sotto di essa. Essendo una e-mail, sono riluttante a andare in giro con il CSS per ottenerlo, dato che non so cosa non piacciano ai client di posta elettronica in termini di CSS rispetto al markup in linea.

Per il contesto il modello che sto usando è il tema Mute da 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>

L'intera e-mail come pagina Web può essere visualizzata qui

Risposte:


381

Sì, molti .

Incluso ma non limitato a:

  • spazio libero: &#160;o&nbsp;
  • spazio stretto senza interruzioni: &#8239;(nessun riferimento di carattere disponibile)
  • nello spazio: &#8194;o&ensp;
  • nello spazio: &#8195;oppure&emsp;
  • Spazio 3 per em: &#8196;o&emsp13;
  • 4-per-em spazio: &#8197;o&emsp14;
  • Spazio 6 per em: &#8198;(nessun riferimento di carattere disponibile)
  • spazio di figura: &#8199;o&numsp;
  • spazio di punteggiatura: &#8200; o&puncsp;
  • spazio sottile: &#8201; o&thinsp;
  • spazio per i capelli: &#8202; o&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 rende tutti gli spazi sopra indicati della stessa larghezza, più larghi di uno spazio nel carattere, ad eccezione di nbsp, dove viene visualizzato come uno spazio e impone il carattere non-breaking. Un vero peccato. Ci sono casi in cui solo un personaggio farà, ad esempio quando il padding viene controllato o passato a qualcos'altro con costrutti comebefore:
fyngyrz,

2
@fyngyrz Almeno in Firefox 54 su Linux, questo non è più vero (più). Tuttavia, può anche dipendere dal tipo di carattere; Ho provato questo su Stack Overflow, dove viene utilizzata la famiglia di caratteri Arial.
Solo uno studente l'

5
Per chiunque voglia vedere come appaiono questi tipi di spazi bianchi jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
lo spazio delle figure $numsp;è molto utile per allineare i numeri, poiché lo spazio è definito esattamente come un numero nello stesso carattere.
Rudey,

2
Firefox su Windows ora va bene (v.61) BTW.
MSC,

13

Esistono codici per altri caratteri spaziali e i codici in quanto tali funzionano bene, ma i personaggi stessi sono caratteri legacy. Sono stati inclusi nei set di caratteri solo per la loro presenza nei dati dei personaggi esistenti, piuttosto che per l'uso in nuovi documenti. Per alcune combinazioni di font e versione del browser, possono essere visualizzati un glifo generico di carattere non rappresentabile. Per i dettagli, controlla la mia pagina sugli spazi Unicode .

Pertanto, l'utilizzo dei CSS è più sicuro e consente di specificare qualsiasi quantità desiderata di spaziatura, non solo le larghezze specifiche degli spazi a larghezza fissa. Se vuoi solo aver aggiunto una spaziatura attorno ai tuoi elementi h2, come mi sembra, allora impostare il padding su quegli elementi (cambiando il valore del padding: 0 impostazioni che hai già) dovrebbe funzionare bene.


Grazie ho finito per usare l'attributo inline <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Important! ; "> Suppongo sia più sicuro anche se la famiglia di caratteri è Helvetica Neue ecc.
wide_eyed_pupil

Ma se sono legacy e "inclusi nei set di caratteri solo a causa della loro presenza nei dati dei personaggi esistenti", ciò significa che non andranno via in qualunque momento presto. Non ti vedo davvero discutere. Presumo che chiunque sia abbastanza "avanzato" da cercare "spazi intermedi" probabilmente ha già deciso che il margine o il riempimento non sono appropriati. Ho optato (&thinsp;4 PACK&thinsp;)per le mie esigenze - usare il margine o il riempimento sarebbe una pessima idea per questo
Simon_Weaver

1
@Simon_Weaver, come descrivo, i caratteri di spazio a larghezza fissa non funzionano in modo affidabile. Sono anche uno strumento smussato: un insieme fisso di larghezze, sebbene le larghezze effettive dipendono dal carattere, al contrario di impostazioni indipendenti dal carattere come <span style="padding: 0 0.1em">4 PACK</span>, con libertà nell'impostazione e nell'ottimizzazione dei valori.
Jukka K. Korpela,

1
Sebbene sia piuttosto vecchio, "The Trouble With EM 'n EN (e altri personaggi loschi ) di Peter K Sheerin" ( alistapart.com/article/emen ) è ancora utile leggere su questo argomento. In particolare - sebbene ciò possa essere migliorato negli ultimi 14 anni - il fatto che non tutti i tipi di carattere f rendero̶n̶t̶s rendono correttamente i vari spazi.
Dave Land,

1
Esistono anche ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm e ZERO WIDTH NON JOINERche tendo a utilizzare più spesso degli spazi di larghezza zero.
Reb.Cabin,

9

Non sono sicuro se questo è ciò a cui ti riferisci, ma questo è l'elenco di entità HTML che puoi utilizzare:

Elenco di riferimenti di entità carattere XML e HTML

Utilizzando il contenuto nella colonna "Nome" puoi semplicemente racchiuderli in un &e;

Ad esempio &nbsp;, &emsp;, etc.


Quindi nel contesto del testo marcato (diciamo dentro '<p>' e '</p>' il '&' indica un nome glifo unicode, giusto? Qual è il ';' per questo un carattere spaziale non segnala quando è analizzato dal browser?
wide_eyed_pupil

Il punto e virgola di chiusura è facoltativo in un certo senso poiché il parser HTML vedrà ancora gli spazi bianchi come la fine del riferimento. Tuttavia, la specifica afferma che "devi" terminare con un punto e virgola ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS: lo apprezzerei ancora se lo contrassegni come risposta - se ritieni che questo abbia risposto alla tua domanda :)
isNaN1247

2

Ho usato questo codice decimale Unicode &#8204;e ho funzionato. più dettagli


1
Il non-joiner a larghezza zero (che è stato collegato) non è un carattere spazio. Non occupa spazio e non è trattato come un separatore di parole. L'unico scopo che ha è impedire ai personaggi adiacenti di essere uniti in una legatura, che a volte è utile negli script non latini.
duskwuff -inattivo-

1

Che dire del normale carattere di spazi bianchi codificato?

&#32;
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.