How to get a bounding box for text overlays?

Hi there!

I am trying to figure out if there is a way to arrange a variable-input text field to be inside a bounding box? For example, I have this image that says “your message” and some lines under it. I would like to code this so that my text element (which will be different every time, entered by guests) will fit within the boundaries of an image background like this one, so that it looks like it was typed onto the lines. Is there a way to do this , and have it automatically shifting the text down whenever it reaches the boundary?

Any insight here would be amazing. Thank you!

Yes, this should be possible, although there are a few features missing from the dashboard editor to allow you to do this but you can do it in the JSON.

From what I understand you are trying to create something like this:

Here is the JSON I used to create this:

{
    "timeline": {
        "background": "#ffffff",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p data-html-type=\"text\">{{ CONTENT }}</p>",
                            "css": "p { color: #000000; font-size: 26px; font-family: Permanent Marker; text-align: left; line-height: 120 }",
                            "position": "top",
                            "width": 679,
                            "height": 267
                        },
                        "start": 0,
                        "length": 5,
                        "fit": "none",
                        "scale": 1,
                        "offset": {
                            "x": 0.133,
                            "y": -0.059
                        },
                        "position": "center"
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/msgtwx8iw6/zzyaqdmo-3r3f-gk4r-zdxu-3hzdvb1dpvzr/source.jpg"
                        },
                        "start": 0,
                        "length": 5,
                        "fit": "contain",
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "center"
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    },
    "merge": [
        {
            "find": "CONTENT",
            "replace": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        }
    ]
}

The key things I added here to the HTML/Text asset are position: top and in the CSS: line-height: 120. I also set this up using merge fields so the content can be easily replaced.

I think you would need to play about with the font style, font size and line height to get the text to align with the lines because those will all work differently. You would also need to restrict the amount of text the user can enter otherwise the alignment won’t work or you will overflow the bounding box.

Please leave this with us and we will see what we can do. Feel free to bump or +1 this thread if we don’t get back to you.