@lightningjs/renderer
    Preparing search index...

    Interface CoreTextNodeProps

    Writable properties of a Node.

    interface CoreTextNodeProps {
        alpha: number;
        autosize: boolean;
        boundsMargin: null | number | [number, number, number, number];
        clipping: boolean;
        color: number;
        colorBl: number;
        colorBottom: number;
        colorBr: number;
        colorLeft: number;
        colorRight: number;
        colorTl: number;
        colorTop: number;
        colorTr: number;
        contain: "none" | "both" | "height" | "width";
        data?: CustomDataMap;
        fontFamily: string;
        fontSize: number;
        fontStyle: "normal" | "italic" | "oblique";
        forceLoad: boolean;
        h: number;
        imageType?: null | "svg" | "regular" | "compressed";
        interactive?: boolean;
        letterSpacing: number;
        lineHeight: number;
        maxHeight: number;
        maxLines: number;
        maxWidth: number;
        mount: number;
        mountX: number;
        mountY: number;
        offsetY: number;
        overflowSuffix: string;
        parent: null | CoreNode;
        pivot: number;
        pivotX: number;
        pivotY: number;
        rotation: number;
        rtt: boolean;
        scale: null | number;
        scaleX: number;
        scaleY: number;
        shader: null | CoreShaderNode<any>;
        src: null | string;
        srcHeight?: number;
        srcWidth?: number;
        srcX?: number;
        srcY?: number;
        text: string;
        textAlign: "center" | "left" | "right";
        textRendererOverride?: null | string;
        texture: null | Texture;
        textureOptions: TextureOptions;
        verticalAlign: TextVerticalAlign;
        w: number;
        wordBreak: "overflow" | "break-all" | "break-word";
        x: number;
        y: number;
        zIndex: number;
    }

    Hierarchy (View Summary)

    Implemented by

    Index

    Properties

    alpha autosize boundsMargin clipping color colorBl colorBottom colorBr colorLeft colorRight colorTl colorTop colorTr contain data? fontFamily fontSize fontStyle forceLoad h imageType? interactive? letterSpacing lineHeight maxHeight maxLines maxWidth mount mountX mountY offsetY overflowSuffix parent pivot pivotX pivotY rotation rtt scale scaleX scaleY shader src srcHeight? srcWidth? srcX? srcY? text textAlign textRendererOverride? texture textureOptions verticalAlign w wordBreak x y zIndex

    Properties

    alpha: number

    The alpha opacity of the Node.

    The alpha value is a number between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

    1

    autosize: boolean

    Autosize

    When enabled, the Node automatically resizes based on its content

    Texture Autosize Mode:

    • When the Node has a texture, it automatically resizes to match the texture's dimensions when the texture loads
    • This ensures images display at their natural size without manual sizing
    • Text Nodes always use this mode regardless of this setting

    Children Autosize Mode:

    • When the Node has no texture but contains children, it automatically resizes to encompass all children's bounds
    • Calculates the bounding box that contains all child positions, dimensions, and transforms (scale, rotation, mount/pivot points)
    • Creates container behavior where the parent grows to fit its content
    • Updates dynamically as children are added, removed, or transformed

    Mode Selection Logic:

    • Texture mode takes precedence over children mode
    • Mode switches automatically when texture is added/removed
    • If no texture and no children, autosize has no effect

    Performance:

    • Children mode uses efficient transform caching and differential updates
    • Only recalculates when child transforms actually change
    • Minimal memory allocation with factory function patterns

    false

    boundsMargin: null | number | [number, number, number, number]

    Margin around the Node's bounds for preloading

    null

    clipping: boolean

    Clipping Mode

    Enable Clipping Mode when you want to prevent the drawing of a Node and its descendants from overflowing outside of the Node's x/y/width/height bounds.

    For WebGL, clipping is implemented using the high-performance WebGL operation scissor. As a consequence, clipping does not work for non-rectangular areas. So, if the element is rotated (by itself or by any of its ancestors), clipping will not work as intended.

    TODO: Add support for non-rectangular clipping either automatically or via Render-To-Texture.

    false

    color: number

    The color of the Node.

    The color value is a number in the format 0xRRGGBBAA, where RR is the red component, GG is the green component, BB is the blue component, and AA is the alpha component.

    Gradient colors may be set by setting the different color sub-properties: colorTop, colorBottom, colorLeft, colorRight, colorTl, colorTr, colorBr, colorBl accordingly.

    0xffffffff (opaque white)

    colorBl: number

    The color of the bottom-left corner of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorBottom: number

    The color of the bottom edge of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorBr: number

    The color of the bottom-right corner of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorLeft: number

    The color of the left edge of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorRight: number

    The color of the right edge of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorTl: number

    The color of the top-left corner of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorTop: number

    The color of the top edge of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    colorTr: number

    The color of the top-right corner of the Node for gradient rendering.

    See color for more information about color values and gradient rendering.

    contain: "none" | "both" | "height" | "width"

    contain mode for text

    This property sets how the text should be contained within its bounding box.

    • 'width': The text is contained within the specified maxWidth, horizontal position of text will adjust according to textAlign.
    • 'height': The text is contained within the specified maxHeight, vertical position of text will adjust according to verticalAlign.
    • 'both': The text is contained within both the specified maxWidth and maxHeight.
    • 'none': The text is not contained within any bounding box.
    'none'
    data?: CustomDataMap

    Node data element for custom data storage (optional)

    This property is used to store custom data on the Node as a key/value data store. Data values are limited to string, numbers, booleans. Strings will be truncated to a 2048 character limit for performance reasons.

    This is not a data storage mechanism for large amounts of data please use a dedicated data storage mechanism for that.

    The custom data will be reflected in the inspector as part of data-* attributes

    undefined

    fontFamily: string

    Font Family

    fontFamily is defined currently as single string, but in the future we may want to support multiple font family fallbacks, as this is supported by CSS / Canvas2d. We can do this in a backwards compatible way by unioning an array of strings to the fontFamily property.

    fontSize: number

    Font Size

    The font size to use when looking up the font face.

    The font size is specified in pixels and is the height of the font's em-square. The em-square is essentially the height of the capital letters for the font. The actual height of the text can be larger than the specified font size, as the font may have ascenders and descenders that extend beyond the em-square.

    16
    fontStyle: "normal" | "italic" | "oblique"

    Font Style

    The font style to use when looking up the font face. This can be one of the following strings:

    • 'normal'
    • 'italic'
    • 'oblique'
    forceLoad: boolean
    h: number

    The height of the Node.

    This will be deprecated in favor of w and h properties in the future.

    0

    imageType?: null | "svg" | "regular" | "compressed"

    Image Type to explicitly set the image type that is being loaded

    This property must be used with a src that points at an image. In some cases the extension doesn't provide a reliable representation of the image type. In such cases set the ImageType explicitly.

    regular is used for normal images such as png, jpg, etc compressed is used for ETC1/ETC2 compressed images with a PVR or KTX container svg is used for scalable vector graphics

    undefined

    interactive?: boolean

    Mark the node as interactive so we can perform hit tests on it when pointer events are registered.

    false
    letterSpacing: number

    Letter spacing for text (in pixels)

    This property sets additional (or reduced, if value is negative) spacing between characters in the text.

    0
    lineHeight: number

    Line height for text (in pixels)

    This property sets the height of each line. If set to undefined, the line height will be calculated based on the font and font size to be the minimal height required to completely contain a line of text.

    See: https://github.com/lightning-js/renderer/issues/170

    undefined

    maxHeight: number
    maxLines: number

    Max lines for text

    This property sets max number of lines of a text paragraph. Not yet implemented in the SDF renderer.

    0
    maxWidth: number
    mount: number

    Combined position of the Node's Mount Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Mount Point at the top-left corner of the Node.
    • 0.5 defines it at the center of the Node.
    • 1.0 defines it at the bottom-right corner of the node.

    Use the mountX and mountY props seperately for more control of the Mount Point.

    When assigned, the same value is also passed to both the mountX and mountY props.

    0 (top-left)
    mountX: number

    X position of the Node's Mount Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Mount Point's X position as the left-most edge of the Node
    • 0.5 defines it as the horizontal center of the Node
    • 1.0 defines it as the right-most edge of the Node.

    The combination of mountX and mountY define the Mount Point

    0 (left-most edge)
    mountY: number

    Y position of the Node's Mount Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Mount Point's Y position as the top-most edge of the Node
    • 0.5 defines it as the vertical center of the Node
    • 1.0 defines it as the bottom-most edge of the Node.

    The combination of mountX and mountY define the Mount Point

    0 (top-most edge)
    offsetY: number

    Vertical offset for text

    The vertical offset of the text.

    0
    overflowSuffix: string

    Overflow Suffix for text

    The suffix to be added when text is cropped due to overflow. Not yet implemented in the SDF renderer.

    "..."
    parent: null | CoreNode

    The Node's parent Node.

    The value null indicates that the Node has no parent. This may either be because the Node is the root Node of the scene graph, or because the Node has been removed from the scene graph.

    In order to make sure that a Node can be rendered on the screen, it must be added to the scene graph by setting it's parent property to a Node that is already in the scene graph such as the root Node.

    null

    pivot: number

    Combined position of the Node's Pivot Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Pivot Point at the top-left corner of the Node.
    • 0.5 defines it at the center of the Node.
    • 1.0 defines it at the bottom-right corner of the node.

    Use the pivotX and pivotY props seperately for more control of the Pivot Point.

    When assigned, the same value is also passed to both the pivotX and pivotY props.

    0.5 (center)
    pivotX: number

    X position of the Node's Pivot Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Pivot Point's X position as the left-most edge of the Node
    • 0.5 defines it as the horizontal center of the Node
    • 1.0 defines it as the right-most edge of the Node.

    The combination of pivotX and pivotY define the Pivot Point

    0.5 (centered on x-axis)
    pivotY: number

    Y position of the Node's Pivot Point

    The value can be any number between 0.0 and 1.0:

    • 0.0 defines the Pivot Point's Y position as the top-most edge of the Node
    • 0.5 defines it as the vertical center of the Node
    • 1.0 defines it as the bottom-most edge of the Node.

    The combination of pivotX and pivotY define the Pivot Point

    0.5 (centered on y-axis)
    rotation: number

    Rotation of the Node (in Radians)

    Sets the amount to rotate the Node by around it's Pivot Point (defined by the pivot props). Positive values rotate the Node clockwise, while negative values rotate it counter-clockwise.

    Example values:

    • -Math.PI / 2: 90 degree rotation counter-clockwise
    • 0: No rotation
    • Math.PI / 2: 90 degree rotation clockwise
    • Math.PI: 180 degree rotation clockwise
    • 3 * Math.PI / 2: 270 degree rotation clockwise
    • 2 * Math.PI: 360 rotation clockwise
    rtt: boolean

    Whether the Node is rendered to a texture

    TBD

    false
    scale: null | number

    Scale to render the Node at

    The scale value multiplies the provided width and height of the Node around the Node's Pivot Point (defined by the pivot props).

    Behind the scenes, setting this property sets both the scaleX and scaleY props to the same value.

    NOTE: When the scaleX and scaleY props are explicitly set to different values, this property returns null. Setting null on this property will have no effect.

    1.0
    scaleX: number

    Scale to render the Node at (X-Axis)

    The scaleX value multiplies the provided width of the Node around the Node's Pivot Point (defined by the pivot props).

    1.0
    scaleY: number

    Scale to render the Node at (Y-Axis)

    The scaleY value multiplies the provided height of the Node around the Node's Pivot Point (defined by the pivot props).

    1.0
    shader: null | CoreShaderNode<any>

    The Node's shader

    The shader defines a Shader used to draw the Node. By default, the Default Shader is used which simply draws the defined texture or color(s) within the Node without any special effects.

    To create a Shader in order to set it on this property, call RendererMain.createShader.

    Note: If this is a Text Node, the Shader will be managed by the Node's TextRenderer and should not be set explicitly.

    src: null | string

    Image URL

    When set, the Node's texture is automatically set to an ImageTexture using the source image URL provided (with all other settings being defaults)

    srcHeight?: number

    The height of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural height will be used.

    srcWidth?: number

    She width of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural width will be used.

    srcX?: number

    The x coordinate of the reference point of the rectangle from which the Texture will be extracted. width and height are provided. And only works when createImageBitmap is available. Only works when createImageBitmap is supported on the browser.

    srcY?: number

    The y coordinate of the reference point of the rectangle from which the Texture will be extracted. Only used when source srcWidth width and srcHeight height are provided. Only works when createImageBitmap is supported on the browser.

    text

    text: string

    Text to display

    ''
    textAlign: "center" | "left" | "right"

    Text alignment

    Alignment of the text relative to it's contained bounds. For best results, use contain mode 'width' or 'both' and a set an explicit width for the text to be aligned within.

    'left'
    textRendererOverride?: null | string

    Force Text Node to use a specific Text Renderer

    texture: null | Texture

    The Node's Texture.

    The texture defines a rasterized image that is contained within the width and height dimensions of the Node. If null, the Node will use an opaque white ColorTexture when being drawn, which essentially enables colors (including gradients) to be drawn.

    If set, by default, the texture will be drawn, as is, stretched to the dimensions of the Node. This behavior can be modified by setting the TBD and TBD properties.

    To create a Texture in order to set it on this property, call RendererMain.createTexture.

    If the src is set on a Node, the Node will use the ImageTexture by default and the Node will simply load the image at the specified URL.

    Note: If this is a Text Node, the Texture will be managed by the Node's TextRenderer and should not be set explicitly.

    textureOptions: TextureOptions

    Options to associate with the Node's Texture

    verticalAlign: TextVerticalAlign

    Vertical Align for text when lineHeight > fontSize

    This property sets the vertical align of the text. Not yet implemented in the SDF renderer.

    middle
    w: number

    The width of the Node.

    This will be deprecated in favor of w and h properties in the future.

    0

    wordBreak: "overflow" | "break-all" | "break-word"

    Word Break for text

    This property sets how words should break when reaching the end of a line.

    • 'overflow': Uses the Css/HTML normal word-break behavior, generally not used in app development.
    • 'break-all': To prevent overflow, word breaks should happen between any two characters.
    • 'break-word': To prevent overflow, word breaks should happen between words. If words are too long word breaks happen between any two characters.
    "break-word"
    x: number

    The x coordinate of the Node's Mount Point.

    See mountX and mountY for more information about setting the Mount Point.

    0

    y: number

    The y coordinate of the Node's Mount Point.

    See mountX and mountY for more information about setting the Mount Point.

    0

    zIndex: number

    The Node's z-index.

    Max z-index of children under the same parent determines which child is rendered on top. Higher z-index means the Node is rendered on top of children with lower z-index.

    Max value is 1000 and min value is -1000. Values outside of this range will be clamped.

    Settings

    Member Visibility

    On This Page

    Properties