Calculating the width of text for printf()

[Bannana97]

I am working on a chat box, and would like the usernames of people to be colored, and the text to be white.
However, I want the chat text to be positioned a few pixels after the username, so it shows like below:

Bannana97: Hello everyone!
Albert: Hey!

Notice how the text isn't aligned. Is there any way to calculate the length in pixels of the username to allow this? I am using Verdana Bold size 13 for the usernames. If I can't find a solution, I am afraid I will have to align the usernames [and] text inputs horizontally, making the chat ugly.

[ivan]

https://love2d.org/wiki/Font:getWidth

[Bannana97]

Thanks! I found this right before you posted.

[Bannana97]

I am running into an issue. It seems :getWidth() isn't returning proper values. I attached a picture of what is happening.

As my string gets shorter/longer, the getWidth method returns different values that aren't proper. Any ideas?

This is the code to init the objects, using my GUI system for display. Look below it for the code that sets text/name and changes widths.

Code: Select all

local chatContainer = MasterGui.new("Frame")
chatContainer.Size = Vector2.new(370, 150)
chatContainer.Position = Vector2.new(10, Window.Size.y - (chatContainer.Size.y + inventoryContainer.Size.y + 15 + 30))
chatContainer.BackgroundColor = Color3.Transparent()
chatContainer.BorderSize = 0

chatRow.Background = MasterGui.new("Frame")
chatRow.Background.BackgroundColor = Color3.new(0, 0, 0)
chatRow.Background.BorderSize = 0
chatRow.Background.Transparency = 0.7
chatRow.Background.ZIndex = 1
chatRow.Background.Size = Vector2.new(chatContainer.Size.x, 20)
chatRow.Background.Position = Vector2.new(chatContainer.Position.x, chatContainer.Position.y + (chatContainer.Size.y - OffsetY))
chatRow.Background.Visible = chatRow.Visible
		
chatRow.Username = MasterGui.new("TextLabel")
chatRow.Username.Width = 200
chatRow.Username.Position = Vector2.new(3, 1)
chatRow.Username.TextAlignX = "left"
chatRow.Username.FontSize = 13
chatRow.Username.FontFamily = "Verdana Bold"
chatRow.Username.Text = "<Row "..tostring(i)..">:"
chatRow.Username.ForeColor = Color3.new(102, 49, 49)
chatRow.Username.ZIndex = 2
chatRow.Username[".Font"] = love.graphics.newFont("cache/fonts/Verdana Bold.ttf", 13)
chatRow.Username.Visible = chatRow.Visible
chatRow.Username:setInside(chatRow.Background)
		
chatRow.Text = MasterGui.new("TextLabel")
chatRow.Text.Width = (chatRow.Username[".Font"]:getWidth("Loaded"))
chatRow.Text.Position = Vector2.new(chatRow.Username[".Font"]:getWidth(chatRow.Username.Text) + 8, 1)
chatRow.Text.TextAlignX = "left"
chatRow.Text.FontSize = 13
chatRow.Text.FontFamily = "Verdana"
chatRow.Text.Text = "Loaded"
chatRow.Text.ForeColor = Color3.new(255, 255, 255)
chatRow.Text.ZIndex = 2
chatRow.Text.Visible = chatRow.Visible
chatRow.Text:setInside(chatRow.Background)

Below is what sets the text/username as shown:

Code: Select all

-- maingui.elements.chatrow[i] is one of the objects shown above!

local chatRow = {love.timer.getTime(), "Test Username", "Text Here"}

maingui.elements.chatrow[i].Time = 0
maingui.elements.chatrow[i].Visible = true
maingui.elements.chatrow[i].Background.Visible = true
maingui.elements.chatrow[i].Text.Visible = true
maingui.elements.chatrow[i].Username.Visible = true
				
maingui.elements.chatrow[i].Text.Text = chatRow[3]
maingui.elements.chatrow[i].Username.Text = chatRow[2]..":"
maingui.elements.chatrow[i].Text.Width = (maingui.elements.chatrow[i].Username[".Font"]:getWidth(maingui.elements.chatrow[i].Text.Text))
				
daFont = maingui.elements.chatrow[i].Username[".Font"]
				
maingui.elements.chatrow[i].Background.Size = Vector2.new((3 + 8 + 3 + daFont:getWidth(chatRow[2]..":") + daFont:getWidth(chatRow[3])), 20)
				
maingui.elements.chatrow[i][".CurrentChatRow"] = (#chats - (i-1))

[Bannana97]

Resolved.
My problem was that I was calculating the width of the text using the font from the username, where one is bold and the other is not.