5

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...

Here's a screen shot of the problem

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>
  • Could you please post your HTML here as an attachment so we can analyze it? – CiviTeacher Jul 15 '15 at 20:39
  • Created an html file of the code reminded me how I had previously discovered that the ? renders as ​ - I had earlier saved as an html file and opened in my browser and in place of the "?" was "​". Just now when I open the html in my browser, I get the same "​" and then when I look at the encoding, it is set to "Western (Windows 1252)" - I use Chrome for Mac. Setting the encoding to "UTF-8" solves the problem.. in my browser. But the problem is still with the civi Mail Template conversion to PDF. Where is there an encoding setting that I can change? – Phil Morice Brubaker Jul 16 '15 at 15:50
6

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

  • Lesley, you may have answered just as I was writing my answer. Does my answer fit with your experience? – Phil Morice Brubaker Jul 21 '15 at 22:23
  • Hi Phil - I haven't tested it in precisely this way but I think we're seeing the same thing, yes. – Lesley Carter - BackOffice Jul 22 '15 at 12:33
5

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?

  • Update: Later versions of CKEditor (4.5.11 (Standard) (revision 3876e73) ) do not replicate this. – Phil Morice Brubaker Jul 18 '17 at 14:50
3

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

  • Great suggestion... but, alas, not the fix. – Phil Morice Brubaker Jul 17 '15 at 16:11
  • If as you say the logo is not a problem (usually) and the signature is...this is one of those "which one of these is not like the other" games. What's the difference? Then experiment. I see, for instance: 1) the &nbsp; appears after the signature 2) the logo file has a different kind (and incorrect) of width specification 3) signature follows a <br> tag whereas the logo is in a <p> 4) were the png files generated differently, for instance is one an png-8 and the other a png-24? – CiviTeacher Jul 17 '15 at 17:23
  • Also, the PDF generator mechanism is called "DomPDF", another open source project. You may try searching their documentation or forums for why this may happen. – CiviTeacher Jul 17 '15 at 17:24
  • I've tried using <br> within <p> and within <div>: no help. – Phil Morice Brubaker Jul 20 '15 at 16:28
  • 1
    There must be an extraneous character in the HTML itself. – CiviTeacher Jul 20 '15 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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