Why I am getting a "?" in a PDF letters beside images?

Question

I have a PDF letter (thankyou for donations) that I've created in a new implementation of civi for our organization. I've struggled with formatting it to look nice when converted to PDF, and everything is great, except that in the final PDF there is a question mark beside the image of our exec dir's signature. Like so...

If I save the HTML to a file and open in my browser (Chrome, on Mac), I get "​" in the place where the "?" shows up in a PDF, suggesting a character encoding issue. The browser shows "Western (Windows-1256)" encoding, and if I change it to UTF-8, the html renders correctly. However, that doesn't solve the problem in civi. Everywhere that I know to check in my system is using UTF-8.

I've tried different image formats (PNG, JPG), and I've even seen this happen in another of my civi message templates with different image.

Strangely, our logo image in the same letter/template does not have this problem, though in a couple of my rounds of editing, the mysterious ? showed up there as well.

EDITED: Here's the HTML. (And, yes, I know inline CSS is frowned upon, but I'm not sure how to change that in the context of a Message Template. Also the internal CSS block doesn't convert through dompdf, but that would be for another thread...)

<style type="text/css">div.name {
margin-bottom: 7px;
font-family: 'Trebuchet MS';
font-size: 11px; 
vertical-align: baseline;
</style>
<table>
    <tbody>
        <tr>
            <td style="padding: 0px; width=120px">
            <p><img src="/media/civicrm/persist/contribute/images/logo-707x1032.png" width="100px" /><br />
            <span style="font-size: 11px; line-height: 1; font-family: 'Times New Roman';"><i>Creating global partnerships that<br />
            combat extreme poverty and<br />
            nurture sustainable community</i></span></p>
            </td>
            <td rowspan="2" width="20px">&nbsp;</td>
            <td rowspan="2">
            <p>{contact.today_date}</p>

            <p>&nbsp;</p>

            <p>{contact.display_name}<br />
            {contact.street_address}<br />
            {contact.city}, {contact.state_province} {contact.postal_code}</p>

            <p><span style="line-height: 1.6em;">{contact.postal_greeting},</span></p>

            <p>Thank you for your gift of&nbsp;{contribution.total_amount} ({contribution.receive_date}) for ----. Your support is truly important in our work of bringing communities together.</p>

            <p>Sincerely,<br />
            ​<img src="/media/civicrm/persist/contribute/images/Leslie%20signature.png" width="250" />&nbsp;<br />
            <span style="line-height: 1.6em;">xxxxxxxx</span><br />
            <span style="line-height: 1.6em;">Executive Director</span></p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px;">
            <div class="name">xxxxxxxx<br />
            Executive Director</div>

            <div class="name">staff here</p>

            <p style="margin-bottom:1em;"><span style="font-size: 11px; font-family: 'Trebuchet MS'; font-weight: bold; vertical-align: baseline;">Board of Directors:</span></p>

            <p><span style="font-size: 11px; font-family: 'Trebuchet MS'; vertical-align: baseline;">board here</span></p>
            </td>
        </tr>
        <tr>
            <td align="center" colspan="3" style="padding: 0px;">
            <p style="margin-top:1em"><span style="font-size: 11px; font-family: 'Times New Roman'; text-align: center;"><b>xxxxxx is a 501c3 organization. No goods or services were exchanged for this donation. Please save this letter for your taxes.</b><br />
            <span>address</span></p>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

When I have encountered this previously, I have found that it (oddly) enough is caused by extra space in the template code itself - have you tried, for example, removing all the spaces at the beginning of the line where your reference is located? The spacing is wonderful for easily reading the code, of course, but it causes issues like this in my experience.

Lesley

Answer 2

CiviTeacher is right, there is extraneous character, totally unrelated to the image. I am able to consistently recreate the problem in this way:

1. In WYSIWYG mode (CKEditor)
2. Type "text 1", Enter
3. Type "text 2", shift-enter
4. Move insertion point to the beginning of "text 2", and backspace so that you have "text 1text 2" on one line.
5. Shift-enter to separate "text 1" and "text 2" onto two lines
6. Move insertion point to the end of "text 2" and shift-enter

This results in the following html code (source mode):

<p>text 1<br />
<span style="line-height: 1.6em;">text 2<br />
​</span></p>

<p>&nbsp;</p>

The hidden character is just to the left of the code. It doesn’t show up in either wysiwyg or source views. It remains hidden when copied to other text editors (like an email client, this message board - just copy the above code -, or TextWrangler).

Seems like a bug in... CKEditor? Where does this get reported?

Answer 3

Please try removing the space (coded %20) from the filename of the image, either by renaming it on the server or reuploading it.