Multi-Alignment text dialouge rendering problems

[half oyster]

I’m trying to render dialogue text in different alignments (TopLeft, MiddleCenter, etc.) instead of always anchoring to the top-left corner.

I had a system where you could set alignment in the data like:

alignment = "TopLeft"

or

alignment = "MiddleCenter"

It worked before, but now whenever I try to “center” the text (using AbsoluteSize.X - textLength / 2),the text keeps snapping to the top-left corner (out of frame) instead of centering.. The alignment seems correct logically, but the text appears tiny and misplaced.

I reverted back to the original version because of these problems 💔 .

I think to get the alignment it should be something like offsetting by half of the label’s size minus half of the text’s size, thanks to fudifin for telling me. But I’m confused on how to properly implement this.

How do I correctly handle multiple alignments (MiddleCenter, BottomRight, etc.) for this dialogue text without it breaking into the top-left corner or scaling incorrectly?

it was kindof like this when the problem occured:

when it shouldve been like this:

or this 💔

I'm guessing its the:
local sizediv = config.size or 3.5

and the TextService to be honest..

[dreamy thorn]

https://create.roblox.com/docs/reference/engine/classes/TextLabel#TextXAlignment + https://create.roblox.com/docs/reference/engine/classes/TextLabel#TextYAlignment

[half oyster]

Pretty sure this would work if it was a singular TextLabel..? considering this module does it Letter by Letter

it in these codeblock:

    while i <= #text do
        local char = text:sub(i, i)
        if char == "{" then
            local endPos = text:find("}", i)
            if endPos then
                local tag = text:sub(i + 1, endPos - 1)
                Tag(tag, effects)
                i = endPos + 1
            else
                i += 1
            end
        else
            local label: TextLabel = template:Clone()
            label.Name = template.Name .. "_Char"
            label.Text = char
            label.TextColor3 = effects.rainbow and Color3.new(1, 0, 0) or (effects.color or template.TextColor3)
            label.AnchorPoint = Vector2.zero
            label.Visible = true
            label.TextScaled = true
            label.Parent = parent :: Frame
            label.BackgroundColor3 = Color3.fromRGB(0, 255, 0)
            label.TextSize = label.AbsoluteSize.Y / sizediv
            local lockedtextsize = label.TextSize
            local lockedparentAS = parent.AbsoluteSize

            local size = getCharBounds(char, lockedtextsize, template.Font, lockedparentAS)
            local width = size.X
            local height = size.Y

            label.Size = UDim2.new(0, width, 0, height)
            label.Position = UDim2.new(0, baseX + x, 0, baseY + y)

                        -- the effects stuff blah blah blah


            task.wait(effects.delay)

            x += width
            if x + width > parent.AbsoluteSize.X then
                x = 0
                y += height
            end

            i += 1
        end
    end

so im guessing TextX or TextY Alignments won't work

[dreamy thorn]

            x += width
            if x + width > parent.AbsoluteSize.X then
                x = 0
                y += height
            end
``` you need to know this ahead of time

the fact that you dont means you did it rong

[half oyster]

damn.

[dreamy thorn]

you need to know length of entire line in order to center it. not possible with that arrangement

coz multi row text will have lines of different lengths, you just simply start at 0 every time.

you need to start at center minus half the row length

cant do that without knowing the length of the line before you get to that point

[half oyster]

Ohhh i see i see

so im guessing that has been my problem all along 💔

[dreamy thorn]

yea consider also the fact for each letter you are checking for newline. this is very lazy word wrap. you should know this ahead of time too

function wordwrapIntoArray(string,parent_width,font,fontsize,etc) -> return {"line1","line2"}

then it gets easy

wordwrap algo is not easy

have fun making that function 🙂

[half oyster]

https://tenor.com/view/monkey-thinking-monkey-thinking-think-money-gif-9734025314392564509

Ill see what i can do i guess

😭

[dreamy thorn]

bonus points if you can deal with lines that have variable font size

[dreamy thorn]

you could also be incredibly lazy and just use uilistlayout and group words into separate frames so the uilistlayout wordwraps automatically, and you can use the list layout alignment properties to get what you wanted