Answers.Body: <p>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.</p>
  
  <p>Lesley</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-21T22:23:33.123Z
Answers.Text: Lesley, you may have answered just as I was writing my answer. Does my answer fit with your experience?
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-22T12:33:38.000Z
Answers.Text: Hi Phil - I haven't tested it in precisely this way but I think we're seeing the same thing, yes.
Answers.UserDisplayName: Lesley Carter - BackOffice
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-21T16:08:29.937Z
Answers.LastActivityDate: 2015-07-21T16:08:29.937Z
Answers.UserDisplayName: Lesley Carter - BackOffice
Answers.Body: <p>Please try removing the space (coded %20) from the filename of the image, either by renaming it on the server or reuploading it.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-17T16:11:46.337Z
Answers.Text: Great suggestion... but, alas, not the fix.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-17T17:23:08.740Z
Answers.Text: 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?
Answers.UserDisplayName: CiviTeacher
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-17T17:24:20.990Z
Answers.Text: 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.
Answers.UserDisplayName: CiviTeacher
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-20T16:28:18.313Z
Answers.Text: I've tried using <br> within <p> and within <div>: no help.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-20T16:40:08.947Z
Answers.Text: Also, having some text in place of the &nbsp; doesn't fix it. Using a new file of the signature as JPG: no change. In fact, I can repeat the exact same line of code ​<img src="http://justhope.org/media/civicrm/persist/contribute/images/Leslie-signature.jpg" style="width: 250px; height: 60px;" />sign<br /> and instead of just a "?" in front of each signature, I also get a "?" AFTER the 2nd signature for a total of three "?"s! Both lines of code are identical! Specifying widths as hmtl attribute or as style makes no difference.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-20T16:43:54.633Z
Answers.Text: Good idea to contact DomPDF people, though am I likely to get anywhere with that, since the problem shows up even when I take the code into a completely separate html file and open it in my browser, completely bypassing any DomPDF conversion. Also bypassing any civi programming also, I guess. I'm just at a loss.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-20T18:23:06.913Z
Answers.Text: There must be an extraneous character in the HTML itself.
Answers.UserDisplayName: CiviTeacher
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-16T22:29:17.843Z
Answers.LastActivityDate: 2015-07-16T22:29:17.843Z
Answers.UserDisplayName: CiviTeacher
Answers.Body: <p>CiviTeacher is right, there is extraneous character, totally unrelated to the image. I am able to consistently recreate the problem in this way:</p>
  
  <ol>
  <li>In WYSIWYG mode (CKEditor)</li>
  <li>Type "text 1", Enter</li>
  <li>Type "text 2", shift-enter</li>
  <li>Move insertion point to the beginning of "text 2", and backspace so that you have "text 1text 2" on one line.</li>
  <li>Shift-enter to separate "text 1" and "text 2" onto two lines</li>
  <li>Move insertion point to the end of "text 2" and shift-enter</li>
  </ol>
  
  <p>This results in the following html code (source mode):</p>
  
  <pre><code>&lt;p&gt;text 1&lt;br /&gt;
  &lt;span style="line-height: 1.6em;"&gt;text 2&lt;br /&gt;
  ​&lt;/span&gt;&lt;/p&gt;
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  </code></pre>
  
  <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).</p>
  
  <p>Seems like a bug in... CKEditor? Where does this get reported?</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-18T14:50:10.770Z
Answers.Text: Update: Later versions of CKEditor (4.5.11 (Standard) (revision 3876e73) ) do not replicate this.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-21T15:58:02.193Z
Answers.LastActivityDate: 2015-07-21T16:03:54.027Z
Answers.LastEditDate: 2015-07-21T16:03:54.027Z
Answers.UserDisplayName: Phil Morice Brubaker
Body: <p>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...</p>
  
  <p><img src="https://i.sstatic.net/3h993.jpg" alt="Here&#39;s a screen shot of the problem"></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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...)</p>
  
  <pre><code>&lt;style type="text/css"&gt;div.name {
  margin-bottom: 7px;
  font-family: 'Trebuchet MS';
  font-size: 11px; 
  vertical-align: baseline;
  &lt;/style&gt;
  &lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="padding: 0px; width=120px"&gt;
              &lt;p&gt;&lt;img src="/media/civicrm/persist/contribute/images/logo-707x1032.png" width="100px" /&gt;&lt;br /&gt;
              &lt;span style="font-size: 11px; line-height: 1; font-family: 'Times New Roman';"&gt;&lt;i&gt;Creating global partnerships that&lt;br /&gt;
              combat extreme poverty and&lt;br /&gt;
              nurture sustainable community&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;/td&gt;
              &lt;td rowspan="2" width="20px"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td rowspan="2"&gt;
              &lt;p&gt;{contact.today_date}&lt;/p&gt;
  
              &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
              &lt;p&gt;{contact.display_name}&lt;br /&gt;
              {contact.street_address}&lt;br /&gt;
              {contact.city}, {contact.state_province} {contact.postal_code}&lt;/p&gt;
  
              &lt;p&gt;&lt;span style="line-height: 1.6em;"&gt;{contact.postal_greeting},&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;Thank you for your gift of&amp;nbsp;{contribution.total_amount} ({contribution.receive_date}) for ----. Your support is truly important in our work of bringing communities together.&lt;/p&gt;
  
              &lt;p&gt;Sincerely,&lt;br /&gt;
              ​&lt;img src="/media/civicrm/persist/contribute/images/Leslie%20signature.png" width="250" /&gt;&amp;nbsp;&lt;br /&gt;
              &lt;span style="line-height: 1.6em;"&gt;xxxxxxxx&lt;/span&gt;&lt;br /&gt;
              &lt;span style="line-height: 1.6em;"&gt;Executive Director&lt;/span&gt;&lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="padding: 0px;"&gt;
              &lt;div class="name"&gt;xxxxxxxx&lt;br /&gt;
              Executive Director&lt;/div&gt;
  
              &lt;div class="name"&gt;staff here&lt;/p&gt;
  
              &lt;p style="margin-bottom:1em;"&gt;&lt;span style="font-size: 11px; font-family: 'Trebuchet MS'; font-weight: bold; vertical-align: baseline;"&gt;Board of Directors:&lt;/span&gt;&lt;/p&gt;
  
              &lt;p&gt;&lt;span style="font-size: 11px; font-family: 'Trebuchet MS'; vertical-align: baseline;"&gt;board here&lt;/span&gt;&lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="center" colspan="3" style="padding: 0px;"&gt;
              &lt;p style="margin-top:1em"&gt;&lt;span style="font-size: 11px; font-family: 'Times New Roman'; text-align: center;"&gt;&lt;b&gt;xxxxxx is a 501c3 organization. No goods or services were exchanged for this donation. Please save this letter for your taxes.&lt;/b&gt;&lt;br /&gt;
              &lt;span&gt;address&lt;/span&gt;&lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-07-15T20:39:36.727Z
Comments.Text: Could you please post your HTML here as an attachment so we can analyze it?
Comments.UserDisplayName: CiviTeacher
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-07-16T15:50:35.150Z
Comments.Text: 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?
Comments.UserDisplayName: Phil Morice Brubaker
Tags: <civimail><pdf>
Title: Why I am getting a "?" in a PDF letters beside images?
ThreadText: # Why I am getting a "?" in a PDF letters beside images?
  
  (Asked by: username_0 on 2015-07-15)
  
  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](https://i.sstatic.net/3h993.jpg)
  
  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>
  
  ```
  
  **Tags:** civimail, pdf
  
  > **Comments:**
  > **username_1**: Could you please post your HTML here as an attachment so we can analyze it?  
  > **username_0**: 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?  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_0 on 2015-07-21. Score: 5 | Accepted answer
  
  username_1 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?
  
  > **Comments:**
  > **username_0**: Update: Later versions of CKEditor (4.5.11 (Standard) (revision 3876e73) ) do not replicate this.  
  
  ---
  
  ### Answer by username_2 on 2015-07-21. Score: 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.
  
  username_2
  
  > **Comments:**
  > **username_0**: username_2, you may have answered just as I was writing my answer. Does my answer fit with your experience?  
  > **username_2**: Hi username_0 - I haven't tested it in precisely this way but I think we're seeing the same thing, yes.  
  
  ---
  
  ### Answer by username_1 on 2015-07-16. Score: 3
  
  Please try removing the space (coded %20) from the filename of the image, either by renaming it on the server or reuploading it.
  
  > **Comments:**
  > **username_0**: Great suggestion... but, alas, not the fix.  
  > **username_1**: 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?  
  > **username_1**: 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.  
  > **username_0**: I've tried using <br> within <p> and within <div>: no help.  
  > **username_0**: Also, having some text in place of the &nbsp; doesn't fix it. Using a new file of the signature as JPG: no change. In fact, I can repeat the exact same line of code ​<img src="http://justhope.org/media/civicrm/persist/contribute/images/Leslie-signature.jpg" style="width: 250px; height: 60px;" />sign<br /> and instead of just a "?" in front of each signature, I also get a "?" AFTER the 2nd signature for a total of three "?"s! Both lines of code are identical! Specifying widths as hmtl attribute or as style makes no difference.  
  > **username_0**: Good idea to contact DomPDF people, though am I likely to get anywhere with that, since the problem shows up even when I take the code into a completely separate html file and open it in my browser, completely bypassing any DomPDF conversion. Also bypassing any civi programming also, I guess. I'm just at a loss.  
  > **username_1**: There must be an extraneous character in the HTML itself.  
  
  ---
  
  