Text breaks on the last word

Hello love this library and I’m trying to use it as a feature for our company, but I’m having some issues with the text, as sometimes it breaks on the last word.

Steps To Reproduce

Here’s a simplified React code I’ve put together that reproduces the issue.

import { useRef } from 'react';
import {toPng} from "html-to-image";

function App() {
  const print = useRef(null);

 function exportAsImage() {
    toPng(print.current).then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    }).catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

  return (
    <div style={{width: 400}}>
      <div ref={print} style={{ display: 'flex', justifyContent: "space-between", alignItems: "center"}}>
        <span style={{fontWeight: "bold", paddingBottom: 30}}>Some-Test not left</span>
        <span style={{fontWeight: "bold", paddingBottom: 30}}>Some-Test not right</span>
      </div>

      <br />
      <button onClick={exportAsImage}>click</button>
      <div style={{marginTop: 30}}>Result img: </div>
    </div>
  );
}

export default App;

Output image

Additional Context

Seems to happen only when I’m using flexbox, display: inline-block or when wrapping the text with a div or span tag. The line break goes away when I add a fixed width with some extra space to the span.

Environment

• html-to-image: ^1.6.2
• OS: macOS Big Sur v11.2
• Browser: Chrome 90.0.4430.212, but was able to reproduce it on other browsers like Safari and Firefox.

[dima-horror]

Hi. I think the problem mainly referenced to different font-sizes in browser / in rendered image.

On render all nodes are copying to SVG with their css computed styles. So, blocks has “fixed” width (by text content), that was calculated by browser.

Then, when block is copying to svg it also has the same fixed width.

But text node coping has some bug. Font-size are rendering differently in browser / in svg. The browser rounds the font size down to floor, and the SVG is drawn “as is”.

So in this cases text already will not fit in the “fixed” width of block.

With my team we figured out some solution for this. It’s a beat ugly, but working.

Before coping font-size property we reduce it by 0.1 pixel.

https://github.com/bubkoo/html-to-image/pull/270

[xdubx]

get the same problem as well. I solved it with a space replace to   display flex is the problem. And it applys to all html tags.

text.replace(/ /g, " ");