title: Wkhtmltopdf rendering wrong due to javascript problem
body: <p>I am working in a card game and I decided to create a python script to speed up the prototyping. This is what the script does:</p>
  <ol>
  <li>It fills an HTML template using jinja.</li>
  <li>It renders the HTML page with wkhtmltopdf and crop the image with scikitimage.</li>
  <li>It creates a PDF with 9 cards per page with FPDF.</li>
  </ol>
  <p>All the code can be found here: <a href="https://github.com/edoelas/card-generator" rel="nofollow noreferrer">card-generator</a>.</p>
  <p>I also have added some javascript to decrease the font size when titles are too long. This javascript code can be found in <code>card-generator/assets/script.js</code>. What this code does is take the div with <code>id='name'</code> and decrease the font size until its size plus the margins are smaller than the father size.</p>
  <p>The problem is that although this javascript works perfectly when opened from the browser, it does not behave as expected when rendered with wkhtmltopdf. As far as I know wkhtmltopdf uses qute browser to render the images and when opened with qute browser the cards look fine. This is how the file <code>card-generator/html_out/Too looong title.html</code> looks when opened with qute browser:</p>
  <p><a href="https://i.stack.imgur.com/iKbz6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iKbz6.png" alt="qute browser render" /></a></p>
  <p>This is the same html opend with qute browser but with the while loop that takes care of the resizing commented in <code>card-generator/assets/script.js</code>:</p>
  <p><a href="https://i.stack.imgur.com/kUtul.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kUtul.png" alt="enter image description here" /></a></p>
  <p>This is how the file <code>card-generator/png_out/Too looong title_1.png</code> looks. This png is the resoult of rendering the previous html:</p>
  <p><a href="https://i.stack.imgur.com/TiUKy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TiUKy.png" alt="wkhtmltopdf render" /></a></p>
  <p>To replicate the problem just open the python notebook (.ipynb) and execute the cells.</p>
  <p>As you can see the title was not resized. I have discovered that the problem is that the title's div does not grow with the text, as seen in the last image. The text overflows, so when in the JS I get the dimension with <code>element.offsetWidth</code> it does not return the size of the text but the size of the div, that fits perfectly. This results in not resizing the font.</p>
  <p>I have seen other wkhtmltopdf users complaining about similar isues but I have tried everything and nothing seems to solve this isue. Other options to render the HTML to a PNG are welcome.</p>