215

Wondering if there are other codes available to use in an HTML newsletter.

I would use cell padding or margins but I'm new to this HTML/CSS thing and I can't find a change that does effect both the Main Title line and the sub-head under it. Being an email I'm hesitant to go mucking around with the CSS to get it just so — since I don't know what email clients don't like in the way of CSS as opposed to inline markup.

For context the template I'm using is Mute theme from 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>

The whole email as a web page can be seen here

user456584
  • 86,427
  • 15
  • 75
  • 107
wide_eyed_pupil
  • 3,153
  • 7
  • 24
  • 35

5 Answers5

544

Yes, many.

Including, but not limited to:

  • [ ] hair space : &#8202; or &hairsp;
  • [ ] 6-per-em space : &#8198; (no character reference available)
  • [ ] narrow no-break space : &#8239; (no character reference available)
  • [ ] thin space : &#8201; or &thinsp;
  • [ ] 4-per-em space : &#8197; or &emsp14;
  • [ ] non breaking space : &#160; or &nbsp;
  • [ ] punctuation space : &#8200; or &puncsp; 
  • [ ] 3-per-em space : &#8196; or &emsp13;
  • [ ] en space : &#8194; or &ensp;
  • [ ] figure space : &#8199; or &numsp; 
  • [ ] em space : &#8195; or &emsp;

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;</span></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>
sunsetsurf
  • 582
  • 4
  • 8
bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • 4
    Firefox renders all of the above spaces as the same width, wider than one space in the font, except for nbsp, where it renders as one space and imposes the non-breaking character. A real shame. There are cases where only a character will do, for instance when padding is being controled or passed to something else with constructs like `before:` – fyngyrz Nov 09 '16 at 22:50
  • 3
    @fyngyrz At least in Firefox 54 on Linux, this is not true (anymore). It may also depend on the font though; I've tested this on Stack Overflow, where the Arial font family is used. – Just a student Jul 11 '17 at 12:17
  • 11
    For anybody who just wants to see how this whitespace types look like https://jsfiddle.net/LcLg5u25/ – Vadim Ovchinnikov Jul 29 '17 at 10:37
  • 6
    figure space `$numsp;` is very useful for aligning numbers, because the space is defined to be exactly as wide as a number in the same font. – Rudey Oct 16 '17 at 19:04
  • 1
    ^ assuming mono-spaced numbers presumably. sometimes monospaced numeral glyphs are not the default number glyphs in a font face, but provided as additional glyphs. – wide_eyed_pupil Jun 21 '18 at 02:57
  • 1
    Cool code snippet BTW, that's new since I posed this question a long time ago. Thx @Christoph !! – wide_eyed_pupil Jun 21 '18 at 02:58
  • 4
    Firefox on Windows is fine now (v.61) BTW. – MSC Sep 13 '18 at 00:44
  • @bookcasey This is an incredible answer and I will be using it for years and years. – mig81 Mar 16 '23 at 10:01
14

There are codes for other space characters, and the codes as such work well, but the characters themselves are legacy character. They have been included into character sets only due to their presence in existing character data, rather than for use in new documents. For some combinations of font and browser version, they may cause a generic glyph of unrepresentable character to be shown. For details, check my page about Unicode spaces.

So using CSS is safer and lets you specify any desired amount of spacing, not just the specific widths of fixed-width spaces. If you just want to have added spacing around your h2 elements, as it seems to me, then setting padding on those elements (changing the value of the padding: 0 settings that you already have) should work fine.

ak2
  • 6,629
  • 31
  • 27
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Thanks I ended up using the inline attribute

    I guess that's safest even though the font family is Helvetica Neue etc

     – wide_eyed_pupil Dec 15 '11 at 07:28
  • 1
    But if they're legacy and 'included into character sets only due to their presence in existing character data' that means they're not going away anytime soon. I don't really see you argument. I assume anyone 'advanced' enough to be looking for 'half spaces' has probably already decided that margin or padding aren't appropriate. I settled on `( 4 PACK )` for my requirements - using margin or padding would be a terrible idea for this – Simon_Weaver Dec 19 '14 at 21:19
  • 2
    @Simon_Weaver, as I describe, fixed-width space characters do not work reliably. They are also a blunt tool: a fixed set of widths, though the actual widths are font-dependent, as opposite to font-independent settings like `4 PACK`, with freedom in setting and tuning the values. – Jukka K. Korpela Dec 19 '14 at 22:09
  • 2
    Although it's quite old, Peter K Sheerin's "The Trouble With EM ’n EN (and Other Shady Characters)" (http://alistapart.com/article/emen) is still useful reading on this topic. In particular—although this may have improved over the last 14 years—the fact that not all f̶o̶n̶t̶s̶ typefaces render the various spaces correctly. – Dave Land Aug 14 '15 at 18:12
  • 2
    There are also `ZERO WIDTH JOINER` https://www.fileformat.info/info/unicode/char/200d/index.htm and `ZERO WIDTH NON JOINER` that I tend to use more often than the zero-width spaces. – Reb.Cabin May 15 '18 at 22:11
10

Not sure if this is what you're referring to, but this is the list of HTML entities you can use:

List of XML and HTML character entity references

Using the content within the 'Name' column you can just wrap these in an & and ;

E.g. &nbsp;, &emsp;, etc.

isNaN1247
  • 17,793
  • 12
  • 71
  • 118
  • 1
    So in context of marked up text (say inside '

    ' and '

    ' the '&' denotes a unicode glyph name, right? What is the ';' for that a space char doesn't signal when it's parsed by the browser?     – wide_eyed_pupil Dec 15 '11 at 07:40
  • 1
    The closing semi colon is optional in a sense as the HTML parser will still see whitespace as the end of the reference. However the specification states that you "must" end with a semicolon (http://www.w3.org/TR/html5/syntax.html#character-references) – isNaN1247 Dec 15 '11 at 08:05
  • 1
    PS - I would still appreciate it if you mark this as the answer - if you do feel this has answered your question :) – isNaN1247 Dec 15 '11 at 08:05
5

What about normal encoded white-space character?

&#32;
HelpNeeder
  • 6,383
  • 24
  • 91
  • 155
4

I used this Unicode Decimal Code &#8204; and worked. more details

Ali Nassajpour
  • 51
  • 5
  • 3
    The zero width non-joiner (which you linked) isn't a space character. It doesn't take up any space, and isn't treated as a word separator. The only purpose it has is preventing adjacent characters from being joined into a ligature, which is sometimes useful in non-Latin scripts. –  Aug 11 '18 at 21:24
  • This character is great. That's just what I needed for forcing the browser not to ignore newlines at the end of a paragraph. – B. Martin Nov 01 '22 at 14:02