How to write multiple spaces in a text element?

Technical Support WebViewer
, ,
1

WebViewer Version: 11.5.0

Do you have an issue with a specific file(s)?
All Files

Can you reproduce using one of our samples or online demos?
No

Are you using the WebViewer server?
No

Does the issue only happen on certain browsers?
No

Is your issue related to a front-end framework?
No

Is your issue related to annotations?
No

Please give a brief summary of your issue:
(Think of this as an email subject)

I am trying to create a text element with a string containing a sequence of spaces. The text is written with only one space. For example when writing the text Hello World! it is written in the PDF page as Hello World!

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I am using the following code:

const newFont = await PDFNet.Font.createTrueTypeFontWithBuffer(
  pdfdoc,
  pdfFontsRef.current[fontName],
  true,
  false
);
const builder = await PDFNet.ElementBuilder.create();
const textContent = "Hello     World!";
const textElement = await builder.createTextRun(textContent, newFont, fontSize);
await writer.writeElement(textElement);

Please provide a link to a minimal sample where the issue is reproducible:
N/A

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It seems that when you’re trying to create a text element with multiple spaces, the spaces are being collapsed into a single space. This behavior is often due to how text rendering engines handle whitespace. However, you can work around this by using non-breaking spaces or specific character codes that represent spaces.

Some things you can try:

  • Use non-breaking spaces, such as \u00A0, in your text string to preserve the spaces. For example, replace spaces in “Hello World!” with “Hello\u00A0\u00A0World!”.

  • Consider using the PDF text rendering mode to manually adjust the position of each character if precise spacing is required.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hi Peter,

Thank you for reaching out.

I invite you to try the suggestion using non-breaking spaces and let us know if that helps.

const textContent = 'Hello\u00A0\u00A0\u00A0\u00A0World';

Best Regards,
Mickaël.

1 Like