Bold not working

[casperkwok]

I noticed that the version of @react-pdf/renderer installed is 3.3.0 in react-pdf-html, but I have additionally installed @react-pdf/[email protected] locally. I'm not sure if this will have any impact?

[cakj]

Same issue here, we were on an older version eact-pdf-html and updated to latest and saw these issues as well. Reverting until this is solved or we need to find another package to solve the html part

[PaperMold]

I also have issues with Bold but they are slightly different from yours.

Given the following HTML:

<div>
  <span>
    <strong>ThisTextShouldBeBold: </strong> <!-- shows correctly as bold -->
  </span>
  <span>
    And this text shouldn't be bold <!-- also shows as bold, when it shouldn't -->
  </span>
</div>

What happens is that the text between the <strong> tags is indeed bold, but the rest of the text, which is not wrapped in <strong> tags, also appears in bold.

A second informative example: if I create a class with both color: red and font-weight: bold, the bold attribute still propagates to other text, while the color displays correctly.

<style>
  .boldClass {
    font-weight: bold;
    color: red;
  }
</style>
<div>
  <span class="boldClass">
    ThisTextShouldBeBold: <!-- Shows as BOLD and RED -->
  </span>
  <span>
    And this text shouldn't be bold <!-- Only shows as BOLD -->
  </span>
</div>

I'm using latest versions of both react-pdf-html (v2.0.4) and react-pdf (v3.4.4)

[PaperMold]

I investigated further and found out that this bug has nothing to do with react-pdf-html. The rendered html for my both examples generated correctly. This bug is present in react-pdf and this is easily observed by trying to render one of my examples:

<View>
  <Text style={{ fontWeight: 'bold' }}>
    ThisTextShouldBeBold:
  </Text>
  <Text>
    And this text shouldn't be bold
  </Text>
</View>

The code above generated the pdf with no text in bold at all (even though my previous problem was all text was bold).

With that said, I solved it by adding a override for @react-pdf/layout to version 3.11.5 in my package.json:

"overrides": {
    "@react-pdf/layout": "3.11.5"
},

@danomatic I invite you to close this issue if nothing else comes up!

[kvtemadden]

It'd be good to get a more solid solution to the bold issue you're having @pwnedev, we're having the exact same problem and it's particularly annoying.

The override fix you mentioned doesn't seem to be working our side unfortunately. Will keep digging for a solution.

EDIT:

Just realised it was my mistake, needed to use resolutions rather than overrides as we're using yarn.

Cheers for your solution.

[danomatic]

@pwnedev thanks for hunting this down! I started running into this with my own projects. The @react-pdf library has had some big regressions over the last few months, including breaking bookmarks. Hopefully they will all get cleared up soon!

[danomatic]

I'm currently using both of these to fix various issues with @react-pdf

  "resolutions": {
    "@react-pdf/pdfkit": "3.1.0",
    "@react-pdf/layout": "3.11.5"
  }

[kvtemadden]

@danomatic thought these examples might be relevant:

Snippet of code used:

<p><strong>Format:</strong> PowerPoint Presentation</p>

Expected output:

Format: Powerpoint Presentation

Actual output:

Format: Powerpoint Presentation.

There seems to be a disregard for the formatting where bold shouldn't be being applied.

It happens on siblings.

We're currently using the same solution as suggested by others, but would prefer if we could just use the updated package.

"resolutions": {
    "@react-pdf/layout": "3.11.5"
  },

[danomatic]

@kvtemadden the root cause of the problem is a regression in the react-pdf library. Do you have a specific request for something to be done in this library?