Search code examples
htmlcssemailhtml-email

Non-Breaking Hyphen Entity Being Replaced with Lowline Entity in Android Email Clients

Android email clients are replacing all ‑ non-breaking hyphen entities with lowline entity in Android email clients.

This is only happening on serif fonts and works fine when switch just the font to a sans-serif. Researching shows that Android does this with characters that fonts do not have but this is a standard email default font Georgia.

Example of HTML below:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width: 640px;">
  <tr>
      <td width="100%">
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width: 640px;">
              <tr>
                  <td width="25" style="font-size:1px; line-height:1px;"  class="mobile_width_spacer_single">
                      <img width="25" border="0" src="images/spacer50.gif" style="display:block; padding:0; margin:0; border:none;" class="mobile_width_spacer_single" />
                  </td>
                  <td style="font-family: Georgia, serif; font-size: 75px; line-height:80px; color: #000000 !important; color: #000000; text-align: center; letter-spacing: 0px;" class="oneline_a1">
                      <a href="${clickthrough('')}" target="_blank" width="100%" height="100%" style="color:#000000!important;text-decoration: none;">
                          <span style="color:#000000!important;font-size:75px;line-height:80px;text-decoration: none;" class="oneline_a1"><font color="000000">
                             New Straight&#8209;Fit Jeans
                          </font></span>
                      </a>
                  </td>
                  <td width="25" style="font-size:1px; line-height:1px;"  class="mobile_width_spacer_single">
                      <img width="25" border="0" src="images/spacer50.gif" style="display:block; padding:0; margin:0; border:none;" class="mobile_width_spacer_single" />
                  </td>
              </tr>
          </table>
      </td>
  </tr>
</table>

Any assistance/feedback into this would be greatly appreciated.

Solution

  • Further research into this shows this appears to be an Android Chrome issue with them missing this glyph on their fallback fonts.

    The only workaround I found with this is to use breaking dashes or nowraps.