Gibt es andere Whitespace-Codes wie & nbsp für Halbräume, Leerzeichen, Leerzeichen usw., die in HTML nützlich sind?


149

Ich frage mich, ob andere Codes für einen HTML-Newsletter verfügbar sind.

Ich würde das Auffüllen von Zellen oder Ränder verwenden, aber ich bin neu in dieser HTML / CSS-Sache und kann keine Änderung finden, die sich sowohl auf die Haupttitelzeile als auch auf den Unterkopf darunter auswirkt. Als E-Mail zögere ich, mich mit dem CSS zu beschäftigen, um es zu erhalten - da ich nicht weiß, was E-Mail-Clients im Gegensatz zu Inline-Markups nicht an CSS mögen.

Für den Kontext ist die Vorlage, die ich verwende, das Mute-Thema von 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>

Die gesamte E-Mail als Webseite ist hier zu sehen

Antworten:


381

Ja, viele .

Einschließlich, aber nicht beschränkt auf:

  • nicht brechender Raum: &#160;oder&nbsp;
  • enger No-Break-Raum: &#8239;(keine Zeichenreferenz verfügbar)
  • en space: &#8194;oder&ensp;
  • em space: &#8195;oder&emsp;
  • 3-pro-em-Raum: &#8196;oder&emsp13;
  • 4-pro-em-Raum: &#8197;oder&emsp14;
  • 6-pro-em-Leerzeichen: &#8198;(keine Zeichenreferenz verfügbar)
  • Figurenraum: &#8199;oder&numsp;
  • Interpunktionsraum: &#8200; oder&puncsp;
  • dünner Raum: &#8201; oder&thinsp;
  • Haarraum: &#8202; oder&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 rendert alle oben genannten Leerzeichen mit der gleichen Breite, die breiter als ein Leerzeichen in der Schriftart ist, mit Ausnahme von nbsp, wo es als ein Leerzeichen gerendert wird und das nicht unterbrechende Zeichen auferlegt. Eine echte Schande. Es gibt Fälle, in denen nur ein Charakter before:
ausreicht

2
@fyngyrz Zumindest in Firefox 54 unter Linux ist dies (nicht mehr) der Fall. Dies kann jedoch auch von der Schriftart abhängen. Ich habe dies auf Stack Overflow getestet, wo die Arial-Schriftfamilie verwendet wird.
Nur ein Student

5
Für alle, die nur sehen wollen, wie diese Leerzeichen aussehen jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
Der Zahlenraum $numsp;ist sehr nützlich zum Ausrichten von Zahlen, da der Raum genau so breit ist wie eine Zahl in derselben Schriftart.
Rudey

2
Firefox unter Windows ist jetzt in Ordnung (v.61) Übrigens.
MSC

13

Es gibt Codes für andere Leerzeichen, und die Codes als solche funktionieren gut, aber die Zeichen selbst sind Legacy-Zeichen. Sie wurden nur aufgrund ihres Vorhandenseins in vorhandenen Zeichendaten in Zeichensätze aufgenommen und nicht zur Verwendung in neuen Dokumenten. Bei einigen Kombinationen aus Schriftart und Browserversion wird möglicherweise eine generische Glyphe mit nicht darstellbarem Charakter angezeigt. Weitere Informationen finden Sie auf meiner Seite zu Unicode-Leerzeichen .

Die Verwendung von CSS ist also sicherer und ermöglicht es Ihnen, einen beliebigen Abstand anzugeben, nicht nur die spezifischen Breiten von Räumen mit fester Breite. Wenn Sie nur einen Abstand um Ihre h2-Elemente hinzufügen möchten, wie es mir scheint, sollte das Einstellen der Auffüllung für diese Elemente (Ändern des Werts der Auffüllung: 0-Einstellungen, die Sie bereits haben) einwandfrei funktionieren.


Vielen Dank, dass ich das Inline-Attribut <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Important verwendet habe ; "> Ich denke, das ist am sichersten, obwohl die Schriftfamilie Helvetica Neue usw. ist
wide_eyed_pupil

Wenn sie jedoch älter sind und "nur aufgrund ihrer Anwesenheit in vorhandenen Zeichendaten in Zeichensätze aufgenommen werden", bedeutet dies, dass sie nicht so schnell verschwinden. Ich sehe dich nicht wirklich argumentieren. Ich gehe davon aus, dass jemand, der "fortgeschritten" genug ist, um nach "halben Leerzeichen" zu suchen, wahrscheinlich bereits entschieden hat, dass Rand oder Polsterung nicht angemessen sind. Ich entschied mich (&thinsp;4 PACK&thinsp;)für meine Anforderungen - die Verwendung von Rand oder Polsterung wäre eine schreckliche Idee
Simon_Weaver

1
@Simon_Weaver, wie ich beschreibe, funktionieren Leerzeichen mit fester Breite nicht zuverlässig. Sie sind auch ein stumpfes Werkzeug: ein fester Satz von Breiten, obwohl die tatsächlichen Breiten im Gegensatz zu schriftunabhängigen Einstellungen wie <span style="padding: 0 0.1em">4 PACK</span>bei der Einstellung und Einstellung der Werte frei von Schriftarten sind.
Jukka K. Korpela

1
Obwohl es ziemlich alt ist, ist Peter K Sheerins "Das Problem mit EM 'n EN (und anderen zwielichtigen Charakteren)" ( alistapart.com/article/emen ) immer noch eine nützliche Lektüre zu diesem Thema. Insbesondere - obwohl sich dies in den letzten 14 Jahren möglicherweise verbessert hat - die Tatsache, dass nicht alle f̶o̶n̶t̶s̶-Schriften die verschiedenen Räume korrekt wiedergeben.
Dave Land

1
Darüber hinaus gibt es ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm und ZERO WIDTH NON JOINERdass ich neige dazu , öfter zu benutzen als die Null-Breite Räume.
Reb.Cabin

9

Sie sind sich nicht sicher, ob Sie sich darauf beziehen, aber dies ist die Liste der HTML-Entitäten, die Sie verwenden können:

Liste der Verweise auf XML- und HTML-Zeichenentitäten

Mit dem Inhalt in der Spalte 'Name' können Sie diese einfach in ein &und einschließen;

ZB &nbsp;, &emsp;usw.


Im Zusammenhang mit markiertem Text (z. B. in '<p>' und '</ p>' bezeichnet das '&' einen Unicode-Glyphennamen, richtig? Was ist das ';' dafür, dass ein Leerzeichen nicht signalisiert, wann es wird vom Browser analysiert?
wide_eyed_pupil

Das schließende Semikolon ist in gewissem Sinne optional, da der HTML-Parser weiterhin Leerzeichen als Ende der Referenz sieht. Die Spezifikation besagt jedoch, dass Sie mit einem Semikolon ( w3.org/TR/html5/syntax.html#character-references )
enden

PS - Ich würde es immer noch begrüßen, wenn Sie dies als Antwort markieren - wenn Sie das Gefühl haben, dass dies Ihre Frage beantwortet hat :)
isNaN1247

2

Ich habe diesen Unicode-Dezimalcode verwendet &#8204;und gearbeitet. mehr Details


1
Der Nicht-Joiner mit der Breite Null (den Sie verknüpft haben) ist kein Leerzeichen. Es nimmt keinen Platz ein und wird nicht als Worttrennzeichen behandelt. Der einzige Zweck besteht darin, zu verhindern, dass benachbarte Zeichen zu einer Ligatur zusammengefügt werden, was in nicht-lateinischen Skripten manchmal nützlich ist.
Abenddämmerung -inaktiv-

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.