Jump to content

Mixing Html and pixi


Recommended Posts


I am currently working on a complete hierarchical window system based on pixi client side (with all graphic primitives integrated inside the windows) populated thanks to a web socket node server.

Here how it looks:  Hierarchical window system

I need an extremely fast realtime graphic engine and pixi is really great for that! I want to reduce at minimum usage of any classic web technology. (dom creation, svg , framework...)

However, I need a multi-line edit text component inside pixi. I guess nothing exist in pixi to deal with that? .  I have seen the pixi demo about multi line but it's only about dealing with \n. What I want is to really be able to display text depending of the language ( word detect, line break, ...  depends of the language). 

Have you other solution in mind than inserting classic html text over pixi?

Br Bruno

Link to comment
Share on other sites

on my side i dont understand maybe preview can help, but if you mean multi styles inline ?
No pixijs dont allow multi styles you need your own engine.

You need made your own text engine with regexr to split texte with styles.
If you mean multi line only yes pixijs take multi line but with same styles.


i dont know if this can help you but here myself question am ask ..

and another here treade here who talk about multi line and animation.

hope this help you, if no?  am sorry to not fully understand your issue !:) please give more detail.

Link to comment
Share on other sites

  • 6 months later...

Hi jonforum , sorry for the late answer...

Finally I have not found something that really map my requirements; so I have decided to implement Html over pixi..

Here an example of what I am able to do currently

mixing Pixi & Html components

You can see few multiline text. text inside are in english and thanks to the classic <div> section, line and word break work fine.

Our graphic runtime must be multi lingual and deal correctly with exotic language ( chinese, japanese, arabic...) I have not found  an api that is able to take a text and a culture a pixel width as an input and tell me when I have to put line and word break.
Anyway what I have done is to put html in absolute location over pixi. The tricky thing I have added is to be able to have pixi window over an absolute html component, and automatically compute the area to mask...
It is done thanks to an html property that allow to define the area to display. (based on svg )
here an example how I configure my html.

<div style="position: absolute; overflow: auto; left: 391px; top: 357px; width: 289px; height: 81px; clip-path: url(&quot;#clip-734341352566191080&quot;);">Quantum computing....</div>

and the svg def

<clipPath id="clip-734341352566191080"><path d="M0 0L289 0L289 81L0 81Z"></path></clipPath>

On each resize/move of a pixi window I dynamically recompute svg clip-path...

Br Bruno

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...