pixijs-userland/html-text

Non Breaking space seems to break the render

Closed this issue · 5 comments

donratta commented

Looks like when i have the presence of a non breaking space in the html string passed in to render it goes blank on me
An example of the string to reproduce this is <p class="orwell--align-left"><strong>eeee&nbsp;</strong></p><p class="orwell--align-left"><strong>hello abul atta</strong></p>

Many thanks as you look into it

bigtimebuddy commented

Created a reproduction here:
https://jsfiddle.net/bigtimebuddy/b904pszr/6/

Looks like a bug, thanks for reporting.

  • ❤️2
bcazur commented

In addition to the repro provided by @donratta - if the text contains<br>, the rendering also breaks.
Funnily enough, <br/> works fine.

bigtimebuddy commented

@bcazur that actually makes sense since this is rendered with SVG, so <br> would be invalid.

bcazur commented

@bcazur that actually makes sense since this is rendered with SVG, so <br> would be invalid.

Yeah, I get it. This is a pretty common scenario though because if you set a DIV with contenteditable=true, it will record double new-line (e.g., line 1, ENTER, ENTER, line 2) as DIV + BR + DIV.

bigtimebuddy commented

There are two issues here:

  1. &nbsp; breaking rendering
  2. <br>
    With the second issue, that can easily be handled by sanitizing the user input (e.g. text.replace(/<br>/gi, '<br />')). Still not sure how to handle 1 yet and haven't had time to look-in to it. @bcazur if you want to make a PR for the BR issue, that'd be great.
  • 👍1