Existe-t-il d'autres codes d'espaces comme & nbsp pour les demi-espaces, les em-espaces, les en-espaces, etc. utiles en HTML?

149

Vous vous demandez s'il existe d'autres codes disponibles à utiliser dans une newsletter HTML.

J'utiliserais un remplissage de cellule ou des marges, mais je suis nouveau dans ce truc HTML / CSS et je ne trouve pas de changement qui affecte à la fois la ligne de titre principal et le sous-titre en dessous. Étant un e-mail, j'hésite à me débrouiller avec le CSS pour l'obtenir, car je ne sais pas ce que les clients de messagerie n'aiment pas en termes de CSS par opposition au balisage en ligne.

Pour le contexte, le modèle que j'utilise est le thème Mute de 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'email complet en tant que page Web peut être vu ici

wide_eyed_pupil
la source

Réponses:

381

Oui, beaucoup .

Y compris, mais sans s'y limiter:

  • espace insécable: &#160;ou&nbsp;
  • espace sans pause étroit: &#8239;(aucune référence de caractère disponible)
  • en espace: &#8194;ou&ensp;
  • espace em: &#8195;ou&emsp;
  • Espace 3 par em: &#8196;ou&emsp13;
  • Espace 4 par personne: &#8197;ou&emsp14;
  • Espace 6 par em: &#8198;(aucune référence de caractère disponible)
  • espace de la figure: &#8199;ou&numsp;
  • espace de ponctuation: &#8200; ou&puncsp;
  • espace mince: &#8201; ou&thinsp;
  • espace cheveux: &#8202; ou&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>

bookcasey
la source
3
Firefox rend tous les espaces ci-dessus avec la même largeur, plus large qu'un espace dans la police, à l'exception de nbsp, où il est rendu comme un espace et impose le caractère insécable. Une vraie honte. Il y a des cas où seul un caractère fera l'affaire, par exemple lorsque le remplissage est contrôlé ou passé à quelque chose d'autre avec des constructions commebefore:
fyngyrz
2
@fyngyrz Au moins dans Firefox 54 sous Linux, ce n'est (plus) vrai. Cela peut aussi dépendre de la police; J'ai testé cela sur Stack Overflow, où la famille de polices Arial est utilisée.
Juste un étudiant
5
Pour tous ceux qui veulent juste voir à quoi ces types d'espaces ressemblent à jsfiddle.net/LcLg5u25
Vadim Ovchinnikov
2
L'espace de figure $numsp;est très utile pour aligner les nombres, car l'espace est défini pour être exactement aussi large qu'un nombre dans la même police.
Rudey
2
Firefox sur Windows est bien maintenant (v.61) BTW.
MSC
13

Il existe des codes pour d'autres caractères d'espacement et les codes en tant que tels fonctionnent bien, mais les caractères eux-mêmes sont des caractères hérités. Ils ont été inclus dans des jeux de caractères uniquement en raison de leur présence dans les données de caractères existantes, plutôt que pour une utilisation dans de nouveaux documents. Pour certaines combinaisons de polices et de versions de navigateur, elles peuvent provoquer l'affichage d'un glyphe générique de caractère non représentable. Pour plus de détails, consultez ma page sur les espaces Unicode .

L'utilisation de CSS est donc plus sûre et vous permet de spécifier la quantité d'espacement souhaitée, pas seulement les largeurs spécifiques des espaces de largeur fixe. Si vous souhaitez simplement ajouter un espacement autour de vos éléments h2, comme il me semble, définir un rembourrage sur ces éléments (modifier la valeur du rembourrage: 0 paramètres que vous avez déjà) devrait fonctionner correctement.

Jukka K. Korpela
la source
Merci J'ai fini par utiliser l'attribut en ligne <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Important ; "> Je suppose que c'est plus sûr même si la famille de polices est Helvetica Neue etc
wide_eyed_pupil
Mais s'ils sont hérités et `` inclus dans les jeux de caractères uniquement en raison de leur présence dans les données de caractères existantes '', cela signifie qu'ils ne disparaîtront pas de sitôt. Je ne vous vois pas vraiment vous disputer. Je suppose que quiconque est suffisamment avancé pour rechercher des «demi-espaces» a probablement déjà décidé que la marge ou le remplissage ne sont pas appropriés. Je me suis (&thinsp;4 PACK&thinsp;)
contenté
1
@Simon_Weaver, comme je le décris, les caractères d'espace à largeur fixe ne fonctionnent pas de manière fiable. Ils sont également un outil émoussé: un ensemble fixe de largeurs, bien que les largeurs réelles dépendent de la police, contrairement aux paramètres indépendants de la police comme <span style="padding: 0 0.1em">4 PACK</span>, avec la liberté de définir et d'ajuster les valeurs.
Jukka K. Korpela
1
Bien qu'il soit assez ancien, "The Trouble With EM 'n EN (and Other Shady Characters)" de Peter K Sheerin ( alistapart.com/article/emen ) est toujours utile à ce sujet. En particulier - même si cela s'est peut-être amélioré au cours des 14 dernières années - le fait que toutes les polices de caractères f̶o̶n̶t̶s̶ ne rendent pas correctement les différents espaces.
Dave Land
1
Il y a aussi ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm et ZERO WIDTH NON JOINERque j'ai tendance à utiliser plus souvent que les espaces de largeur nulle.
Reb.Cabin
9

Je ne sais pas si c'est ce à quoi vous faites référence, mais voici la liste des entités HTML que vous pouvez utiliser:

Liste des références d'entités de caractères XML et HTML

En utilisant le contenu de la colonne 'Nom', vous pouvez simplement les envelopper dans un &et;

Par exemple &nbsp;, &emsp;, etc.

isNaN1247
la source
Donc, dans le contexte d'un texte balisé (dites à l'intérieur de '<p>' et '</p>', le '&' indique un nom de glyphe unicode, n'est-ce pas? Quel est le ';' pour qu'un caractère d'espace ne signale pas quand il est analysé par le navigateur?
wide_eyed_pupil
Le point-virgule fermant est facultatif dans un sens car l'analyseur HTML verra toujours les espaces comme la fin de la référence. Cependant, la spécification stipule que vous "devez" terminer par un point-virgule ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247
PS - J'apprécierais toujours que vous marquiez ceci comme réponse - si vous pensez que cela a répondu à votre question :)
isNaN1247
2

J'ai utilisé ce code décimal Unicode &#8204; et travaillé. plus de détails

Ali Nassajpour
la source
1
Le non-jointeur de largeur zéro (que vous avez lié) n'est pas un caractère d'espace. Il ne prend pas d'espace et n'est pas traité comme un séparateur de mots. Son seul but est d'empêcher les caractères adjacents d'être joints en une ligature, ce qui est parfois utile dans les scripts non latins.
duskwuff -inactif-
1

Qu'en est-il du caractère d'espacement codé normal?

&#32;
HelpNeeder
la source