bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.79k stars 544 forks source link

ruby tag with Google Fonts issue #191

Closed sa-morishita closed 2 years ago

sa-morishita commented 3 years ago

Hello. I'm Japanese. I use ruby tag (and rt tag and rp tag) to show the reading of Japanese kanji. It looks fine with normal fonts, but when I use Google Fonts, it looks messed up. I've tried changing canvas, png, etc., but there was no change. Is there a way to fix this?

  const printDocument = async () => {
    try {
      const input = document.getElementById('topdf');

      const pdf = new jsPDF('l', 'mm', 'a3', true);

      await htmlToImage.toCanvas(input).then(canvas => {
        const imgWidth = 420;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        const imgData = canvas.toDataURL('img/png');

        pdf.addImage(imgData, 'jpeg', 0, 0, imgWidth, imgHeight);
      });

      pdf.save('sheet.pdf');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={printDocument} type="button">
        download
      </button>

      <div id="topdf" style={{ fontFamily: 'Rampart One' }}>
        <ruby>
          使<rp>(</rp>
          <rt>つか</rt>
          <rp>)</rp>
        </ruby>
        い
        <ruby>
          方<rp>(</rp>
          <rt>かた</rt>
          <rp>)</rp>
        </ruby>
      </div>
    </div>
  );

image

biiibooo[bot] commented 3 years ago

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

biiibooo[bot] commented 2 years ago

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

biiibooo[bot] commented 1 year ago

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.