Aframe: Ability to autosize text container

[eng1neer]

It would be great to have a way to render a text on a background with some padding around it.

I’ve tried an example from docs, however, it seems that auto width mode actually sets the maximum width of the container, leaving the gap on the right:

What I would like to achieve is an ability to render a label with some background around it (similar to Bootstrap labels for example)

Here is a hacky solution that I came up with:

import AFRAME from 'aframe';


const fontWidthFactor = 1000;

AFRAME.registerComponent('text-auto-width', {
    dependencies: ['text'],
    schema: {
        padding: {default: 0}
    },
    init() {
        // Hook into text component's updateLayout method
        const textComponent = this.el.components.text;

        const textMesh = this.el.object3D.children[1];

        if (textMesh.geometry.layout) {
            resize(textMesh.geometry.layout);
        } else {
            const origUpdate = textComponent.updateLayout;

            textComponent.updateLayout = (data) => {
                origUpdate.call(textComponent, data);

                resize(textMesh.geometry.layout);
            };
        }

        const resize = (layout) => {
            const {value, width} = this.el.getAttribute('text');

            const metrics = layout.computeMetrics(value, 0, value.length, Math.INT_MAX);

            const actualWidth = metrics.width * width / fontWidthFactor + this.data.padding * 2;

            const geometry = this.el.getAttribute('geometry');

            this.el.setAttribute('geometry', {...geometry, width: actualWidth});
        }
    }
});

[ngokevin]

text="align: center"

Also https://github.com/mayognaise/aframe-html-shader/pull/12 is an option for rendering HTML/CSS as a texture. Slightly expensive to compute, but perhaps cheaper than pulling in and rendering glyphs?

[eng1neer]

@ngokevin align: center has nothing to do with auto sizing, it will render container with the same width

[ngokevin]

I suppose text.padding wouldn't be too bad.

[machenmusik]

The text auto width was intended to size the text width to the geometry, not the geometry to the text width - you can't automatically size both height and width, you need to pick something as a FRAME of reference. Is it a more common case to want arbitrary width based upon fixed height, rather than arbitrary height (including line wrap) based upon fixed width? If so, perhaps we should add some switches for that (whether it's padding, or something else)

[weddingdj]

+1 for text padding

[stevehadley]

@eng1neer did you end up finding a solution to this? I tried using the code you posted but I get "TypeError: textMesh is undefined"