Skip to content

HTMLText

Renders text with support for styling via HTML tags. The rendering can vary across browsers and platforms.

Usage

<script>
  import { HTMLText } from 'svelte-pixi'
</script>

<HTMLText
  text="<strong>Hello</strong> <em>World</em>"
  anchor={0.5}
  style={{
    fill: 'white',
  }}
/>

API

Props

NameDescription
anchor
PointLike

The anchor sets the origin point of the text.

blendMode

The blend mode to be applied to the sprite. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.

instance
PIXI.HTMLText

The PIXI.Text instance. Can be set or bound to.

pluginName
string

Plugin that is responsible for rendering this element.

roundPixels
boolean

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. Advantages can include sharper image quality (like text) and faster rendering on canvas. The main disadvantage is movement of objects may appear less smooth.

style
PIXI.HTMLTextStyle

Sets the style of the text

text
string

The text to display

Additional props are passed on to Container

Slots

NamePropsFallback
default{}

Events

NameTypeDetail
addedforwarded
clickforwarded
createforwarded
globalmousemoveforwarded
globalpointermoveforwarded
globaltouchmoveforwarded
mousedownforwarded
mousemoveforwarded
mouseoutforwarded
mouseoverforwarded
mouseupforwarded
mouseupoutsideforwarded
pointercancelforwarded
pointerdownforwarded
pointermoveforwarded
pointeroutforwarded
pointeroverforwarded
pointertapforwarded
pointerupforwarded
pointerupoutsideforwarded
removedforwarded
removedFromforwarded
rightclickforwarded
rightdownforwarded
rightupforwarded
rightupoutsideforwarded
tapforwarded
touchcancelforwarded
touchendforwarded
touchendoutsideforwarded
touchmoveforwarded
touchstartforwarded