Text with horizontal spaces are going out of cell boundry or text is hidden under the next column.

[urenpatelce]

Hi There,

I found one issue where we need text wrapping and formatting fully supported in output PDF. While verifying that, I found that when there are many spaces at the start of the string then text is overflowing the cell boundry instead of dropping to the next line.

https://codepen.io/mmghv/pen/YzzNMLO

Use below Javascript code in the console to replicate the issue.

---

const { jsPDF } = window.jspdf

const jsonBody = [
  ['1', 'Donna', 'dmoore0@furl.net', 'China'],
  ['2', 'Janice', 'jhenry1@theatlantic.com', `TEST`],
  ['3', 'Ruth', 'rwells2@constantcontact.com', `Trinidad and Tobago
  kasghdkjhashd ljjhaskdjllkadjs
                  ;asdkj;alkldksaf
                              ;ledk;lksdf;lkdf
                                              losdfljhsdlkfjlskdjf`],
  ['4', 'Jason', 'jray3@psu.edu', `<p>This line has a slight indent: &nbsp;&nbsp;This text starts a bit to the right</p>

<pre>
    Italicized text here. | ''Italicized text here.''
        Strong emphasized | '''Strong emphasized'''
    Strong italic text:-) | '''Strong ''italic text'':-) '''
                Bullet pointed. | * Bullet pointed.
    Numbered list.| 0 Numbered list.
                                            ISBN 020171499X | isbn 020171499X
                                            ISBN 020171499X | ISBN 020171499X
    leading space. |  leading space. 
(Where  denotes a tab character.)

</pre>

<ol>
  <li>Gather your ingredients.</li>
  <li>Preheat the oven.</li>
  <li>Mix the batter.</li>
</ol>

<ul>
  <li>Responsive design</li>
  <li>Intuitive interface</li>
  <li>SEO-friendly</li>
</ul>`],
];

function generate() {
  const doc = new jsPDF();

  doc.autoTable({
    // html: '#my-table',
    head: [['ID', 'Name', 'Email', 'Country']],
    body: jsonBody,
    theme: 'grid',
    styles: {},
    columnStyles: { 3: { halign: 'right' }},
  });

  doc.save('table');
}

---

Verify the final output.

If the text is right align then issue becomes worst. I mean for right align automatically the text should be dropped in the next line too.

Please let me know if you need more details.

Thanks for your time.

[simonbengtsson]

Interesting. Even a simple repro like this causes issues with line breaks. Must be something with the width calculation of spaces or similar.

const { jsPDF } = window.jspdf

function generate() {
  const doc = new jsPDF();

  doc.autoTable({
    body: [[`                                                                                                                                                                     text here`]],
  });

  doc.save('table');
}