Cannot show copyright symbol in PDF files

[fdbatista]

Describe the bug
The library appears to be unable to render copyright symbols into the generated PDF file.

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

1. Try to output a copyright symbol inside of a Text component.
2. Generate a PDF file.
3. Nothing will be shown.

I've tried different ways without luck:

• Copying/pasting the symbol itself.
• Using the HTML entities ©, ©, © .
• Using the content CSS property content: "\00A9"

I am using Poppins font family, but tried also with Times New Roman and got the same output.

Expected behavior
The copyright symbol should be displayed in the PDF.

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser: Chrome 112.0.5615.121 (Official Build) (64-bit)
• React-pdf version: 3.1.9

[nicopollon]

I know it's not a solution but when i insert the ohm resistance symbol Ω , the rendered pdf shows a copyright symbol instead maybe this could be a momentary solution to your problem

[fdbatista]

@nicopollon Will give it a try. Thanks!

[jnovak-SM2Dev]

Any update on symbols working properly? The Ω symbol for me does not work. It actually outputs the Ω symbol itself. I'm using the "montserrat" font family.

[nicopollon]

Any update on symbols working properly? The Ω symbol for me does not work. It actually outputs the Ω symbol itself. I'm using the "montserrat" font family.

So i'm actually using the Inter Font

I've attacched some pics as proof of how the copyright symbol is rendered instead of the omega

[jnovak-SM2Dev]

Yeah it seems to depend on the font family. I'm doing the same thing and I actually get the omega symbol. It's also weird that this is an issue, when those symbols worked in previous versions of this package.

[nikels]

I'm having the same issue but with the trademark symbol, ™. I've tried html entities, unicode and using the symbol directly. I'm using a google font, Plus Jakarta San, which does render the symbol.

[jnovak-SM2Dev]

I ended up exporting the symbol manually, making it an SVG, and using it that way. Hopefully this will get fixed at some point.

[hcharley]

@SM2DevLLC I've had to do the same. Hopefully this does get fixed, as my project has many many pages of content and it is nerve-racking to think of some symbols not rendering.

[szabinah90]

@nikels I may be a bit late for the party, but I'm struggling with the same. Inspired by the omega - copyright symbol connection, I tried the greek alphabet and the "iota" (Ι) greek character is rendered as the TM symbol, at least in the default font set. My problem was not solved, as I'm using Manrope, but may help you and others.

[marco-hd]

@react-pdf/renderer: "^3.1.13"

I'm using the Klavika font family, and it displays a crossed square. When I switch to the default font, it appears as empty.

Klavika

Helvetica

P.S. Omega is working with the default fonts

[masonbrothers]

I am not 100% sure, but could this line be causing this issue?

https://github.com/diegomura/react-pdf/blob/master/packages/pdfkit/src/font/afm.js#L239

[masonbrothers]

To get the copyright symbol to show, I had to use registerEmojiSource:

https://github.com/diegomura/react-pdf/blob/c8fe2c8/packages/examples/src/emoji/index.jsx#L16-L21

Font.registerEmojiSource({
  format: 'png',
  url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
  // url: 'https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/',
  // withVariationSelectors: true,
});

It looks like the copyright symbol ©️ is actually an emoji when it is displayed

[EvHaus]

Note to others: I was having trouble with this, even after the fix in #2496. I had to switch from using © (\xC2\xA9) to using ©️ (\xC2\xA9\xEF\xB8\x8F).

TIL there are two different copyright symbols in UTF-8... 🤦

[AdemYuksel]

To get the copyright symbol to show, I had to use registerEmojiSource:

https://github.com/diegomura/react-pdf/blob/c8fe2c8/packages/examples/src/emoji/index.jsx#L16-L21

Font.registerEmojiSource({
  format: 'png',
  url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
  // url: 'https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/',
  // withVariationSelectors: true,
});

It looks like the copyright symbol ©️ is actually an emoji when it is displayed

No matter how many fonts I used.
I used all HTML entities ©, ©, ©, © and that solved my problem. Thank you. 🌟