218

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

5 Answers 5

553

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>

8
  • 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 9, 2016 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. Jul 11, 2017 at 12:17
  • 11
    For anybody who just wants to see how this whitespace types look like jsfiddle.net/LcLg5u25 Jul 29, 2017 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, 2017 at 19:04
  • 4
    Firefox on Windows is fine now (v.61) BTW.
    – MSC
    Sep 13, 2018 at 0:44
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.

5
  • 1
    Thanks I ended up using the inline attribute <h1 class="title" style="margin:0; margin-left: 2px; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;"> I guess that's safest even though the font family is Helvetica Neue etc Dec 15, 2011 at 7: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 (&thinsp;4 PACK&thinsp;) for my requirements - using margin or padding would be a terrible idea for this Dec 19, 2014 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 <span style="padding: 0 0.1em">4 PACK</span>, with freedom in setting and tuning the values. Dec 19, 2014 at 22:09
  • 2
    Although it's quite old, Peter K Sheerin's "The Trouble With EM ’n EN (and Other Shady Characters)" (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, 2015 at 18:12
  • 2
    There are also ZERO WIDTH JOINER 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, 2018 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.

3
  • 1
    So in context of marked up text (say inside '<p>' and '</p>' 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? Dec 15, 2011 at 7: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 (w3.org/TR/html5/syntax.html#character-references)
    – isNaN1247
    Dec 15, 2011 at 8: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, 2011 at 8:05
5

What about normal encoded white-space character?

&#32;
4

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

2
  • 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.
    – user149341
    Aug 11, 2018 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 1, 2022 at 14:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.