It doesn't recognize \n newline character

[unltdsoul]

(Nor the HTML
) I need to have centered text, with multiple lines and i need to set line-breaks

[bigtimebuddy]

Did you try <br>?

[unltdsoul]

Yes, didnt work, but i found Tagged-Text and that has many more features. So will be using that

On Wed, Sep 22, 2021, 6:39 AM Matt Karl @.***> wrote:

Did you try
?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pixijs/html-text/issues/10#issuecomment-924805916, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMXYZ3DUKMHC7KP2WIZCO3UDGW67ANCNFSM5EQUDKKA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[unltdsoul]

BTW - I am still in process of determining whether to use HTML-Text or not as I am running tests to see if it is any faster in rendering than Tagged-Text.
I was finally able to get newline breaks to work, by using '<br/>' just <br> not only doesn't give line break, but the plugin crashes and no text is displayed at all. So, i think that my be a bug.

[unltdsoul]

BigTimeBuddy, and others who may find this helpful It looks like I will be settling on using HTML-Text over Tagged-Text the reason is Rendering Time I am using this in a presentation, not a game, and i have a Lot of text (8600 characters) to display in a scrollable plane All of this is in a 3D environment using Babylon,js I use Bablyon.js for the 3D scene and rendering, and Greensock for the animations And I chose to go with Pixi for displaying Text on the screen in multiple 3D planes I have video, and the main text plane displays the text of the person in the video, in sync with the video, that's where Greensock comes in using the TimeLine .to and i sync the timeline to the video.currentTime that text is broken up in many separate text objects, some a word long some a paragraph, that way greensock can animate them piece by piece in sync with the video.

Using Pixi Text if i wanted to make a single word a different color, it HAD to be a separate tx object. Now, i am converting it all over to HTML-Text...
There is another plane with the long text, that is scrollable by the users, and that text is where i used TaggedText and it all worked, BUT, I noticed my FPS were taking a hit, So, I went back to see if i could get the line breaks working in HTML-Text and run a test to see if it rendered any faster . AND IT DID - Using all the same text and same styles although it has to be formatted different with HTML-Text,
(I also ran the text using built-in PIXI.Text for comparison, but, the long text is all 1 text object, so there using PIXI Text it all just 1 style, as it can't do markups, I included it just for comparison.

Here are the numbers (This is using a 17" Gigabyte Aero gaming laptop with the RTX-3060 GPU) the monitor is capable of 300 fps with the large text visible on the screen in it's own 3D text plane with video playing and the video text being animated in-sync

                                          built-in Intel GPU          RTX-3060GPU

Using built-in    Pixi-Text            130 fps                              160 fps     
                          Tagged-Text        90 fps                              120 fps
                          HTML-Text         130 fps                              170 fps

As you can see, the formatted HTML-Text ran the same as Pixi-Text without formatting - slightly faster with the Nvidia card turned on And, Tagged-Text was cosiderably slower
Even though this was running in 3D using Bablyon, this was my devel setup where i don't have all the 3D models loaded. When they are all loaded and running, it is hard for the Intel GPU to keep above 40 fps, and since the video is 30 fps, and that was without the long text... so, i with Tagged-Text it falls below 30 fps (with the intel GPU) that wasn't going to work, as it makes the video choppy.
So, in the end I am going with HTML-Text

But, formatting text was easier using Tagged-Text, and i had already got all the text Tagged for it, with Tagged Text if you want a word or phase to style differently, like i want a word to be red, i set up a style <rd>someword</rd>
but with HTML-TEXT i have to use <span style="color: red">someword</span> I had like 20 different styles set up with TAGGED Text, so what I did was, I wrote a parsing, replace so when the program loads, js does a replace on all the 20 or so tags for example:

tx.text = tx.text.replace(/<tHeading>/g,'<span style="font-size:42px; color: #69f; font-weight:700">')
tx.text = tx.text .replace(/<\/tHeading>/g,'</span>')
tx.text = tx.text .replace(/<sml>/g,'<span style="font-size:30px">')
tx.text = tx.text .replace(/<\/sml>/g,'</span>')
tx.text = tx.text .replace(/<smlr>/g,'<span style="font-size:18px">')
tx.text = tx.text .replace(/<\/smlr>/g,'</span>')
// etc..

so, i kept the TaggedText Tags, which makes it easier to format text and the program converts it to the HTML tags I will use that format for all future text formatting as well, to make some text blue, <bl>Blue Text</bl> and the replace routine converts it to <span style= ...

OH and one last thing, since this text is soo long, i set up a canvas of ~9000 pxl Height, PIXI-Text and TAGGED-Text had no problem, they both rendered the long text, i could scroll all the way to the bottom, no prob, But, HTML-Text was cutting off the text.... it looked like right at 2048 height,
so i looked in the html-text js file and found it is creating a SVG at 2048 W 2048 H
my plane is only 800 wide, so I changed the HTML-Text js file to create SVG at 1000x9600 and now the text scrolls all the way to the bottom.

Again i used Greensock ( GSAP ) to handle the scrolling. I set up a timeline with .to( tx.longText.position, 100, {y:-8600}) [ 100 is the Duration of the animation, it is somewhat arbitray] then i created a 3D scrollbar and knob, and use that to update (seek) the timeline, (0-100) where 100 is the duration of the animation, so when the scroll knob is at half way, it will seek the timeline to 50 and the text will be scrolled half way. so as the scroll knob moves, it scrolls the Y position, it scrolls the text up, so y -8600 will scroll the text -8600 pxls above the text plane when it is displaying the bottom on the text...

[bigtimebuddy]

Thank you for your thoughtful comments here. I'm going to close this issue since it seems like you found a solution. In general, I would not advise using this plugin for very long scrollable text. It's incredibly memory inefficient for long text. Either use native DOM text as an overlay or use PixiJS's BitmapText or the MSDF text plugin.