Â in HTML email

Question

I have read posts about this and I know it has to do something with encoding but I can't get rid of this Â to save my life. I used to app that lets you upload an image and then edit it and then it spits out the html code. Worked well, except in the preview of the body of the email...There is the subject and then many emails clients show the first sentence or so of the email. There is a Â that shows up before the first word "Dear" in the body. There is a LOT of html for this email but this is the HTML surrounding the "Dear Sean Anderson". The Â shows up before that. I see nothing in that area that should cause that I don't think. I tried a few things, taking out a
tag, changing some span to p, etc. Nothing seems to get rid of it. Does anyone see anything or have any information of how I can get rid of this? Thank you. Using PHP to send the email.

<div style="min-height:218px;max-height:218px;max-width:769px;overflow:hidden;width:769px">
    <br>
    <p style="color:#000000!important;font-family:Arial;font-size:14px;font-style:normal;line-height:24px;margin-top:0;padding-top:0;margin-right:0;padding-right:0;margin-bottom:0;padding-bottom:0;margin-left:0;padding-left:0">            
       <span style="color:#000000">Dear Sean Anderson,</span>
    </p>
     <br>
     <p style="color:#000000!important;font-family:Arial;font-size:14px;font-style:normal;line-height:24px;margin-top:0;padding-top:0;margin-right:0;padding-right:0;margin-bottom:0;padding-bottom:0;margin-left:0;padding-left:0">
         <span style="color:#000000">Thank you for your recent order!</span>
     </p>
     <p style="color:#000000!important;font-family:Arial;font-size:14px;font-style:normal;line-height:24px;margin-top:0;padding-top:0;margin-right:0;padding-right:0;margin-bottom:0;padding-bottom:0;margin-left:0;padding-left:0">
        <span style="color:#000000">
            Your order ch_187BkBEp3pTkexOniBS11vAh has been shipped!The tracking details are as follows: 
            <a href="http://wwwapps.ups.com/WebTracking/track?track=yes&amp;trackNums=23423423" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://wwwapps.ups.com/WebTracking/track?track%3Dyes%26trackNums%3D23423423&amp;source=gmail&amp;ust=1463083517793000&amp;usg=AFQjCNG62tkEnLDAQf5WljR6bcN9BJfRsw">23423423</a>. You may track your order using the button below.
        </span>
     </p>
     <a style="margin-left:42%;margin-top:32px;width:142px;background:none;border:solid 2px #74b853;color:#74b853!important;display:inline-block;text-decoration:none;padding:6px 14px 6px 14px;text-align:center;font-size:17px" href="http://wwwapps.ups.com/WebTracking/track?track=yes&amp;trackNums=23423423" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://wwwapps.ups.com/WebTracking/track?track%3Dyes%26trackNums%3D23423423&amp;source=gmail&amp;ust=1463083517793000&amp;usg=AFQjCNG62tkEnLDAQf5WljR6bcN9BJfRsw">Track Order
     </a>
</div>

although email clients and web based email have come along way, inline styling is still the best option. In this the ENTIRE message or just part of it? Can you also post the PHP that you use? — imvain2, May 11 '16 at 20:26
This sounds like a byte order mark (https://en.wikipedia.org/wiki/Byte_order_mark), except that Â isn't recognised as a BOM as far as I know. Software will sometimes add a byte-order mark to the beginning of my file. When you view the file in certain applications, it parses the BOM and doesn't display it, but you see it when you open it in some other applications. The trick is to copy the code into a text-editer which doesn't support BOMs, so it will attempt to display it as a character, and then you can remove that character. — UberDoodles, May 11 '16 at 20:32
@imvain The code was generated by an app that turns image files into html emails. Once you have uploaded the image, you are able to select area and turn them into links, add text, ect (inkbrush.com). Worked really well, saved me a lot of time, only issue is that one freaking character. The whole code is long, and minimized, super tedious to find a space. I figured it must have been in the HTML by the "Dear" since visually it shows up right before it. ...There is a good amount of code before it. Is there some way I can search for this space in Sublime Text Editor. — Sean Anderson, May 11 '16 at 23:10

score 2 · Answer 1 · answered May 11 '16 at 23:56

2

This worked for me. Using Sublime Text Editor, I opened the file using Reopen With Encoding then selected Windows(1252). This then revealed the Â which I was able to search for using Find and then save the file encoded as UTF-8 again.

answered May 11 '16 at 23:56

Sean Anderson

241
3
17

While the solution of removing spaces can work, the issue is that Â appears as an empty space with utf8 encoding. Switching to 1252 is more precise at tracking down the encoded chars. This should be marked as the correct answer imo. – Ahmed Sagarwala Apr 09 '21 at 02:08

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

Sounds like an encoding issue that's impacting a non-breaking space character. You might check out HTML encoding issues - "Â" character showing up instead of " "

To borrow from the accepted answer:

The non-breaking space character is byte 0xA0 in ISO-8859-1; when encoded to UTF-8 it'd be 0xC2,0xA0, which, if you view it as ISO-8859-1 comes out as "Â ".

edited May 23 '17 at 12:16

Community

1
1

answered May 11 '16 at 20:58

SimianAngel

631
10
14

score 1 · Answer 3 · answered May 28 '20 at 07:22

Simple solution: This solution might not be applicable for all the scenarios, but it's working for me.

Check whether any empty space is using in your email html file such as

<td> </td>

and replace with

<td>&nbsp;</td>

Refer to this https://www.w3schools.com/html/html_entities.asp

Â in HTML email

3 Answers3