How would you make a strikethrough effect on text?

The idea is to position a frame relative to a certain part of a TextLabel’s text.

I’m having problems coming up with anything. This is what AI comes up with, but it only positions and sizes itself correctly if you have a specific resolution. Any other resolution messes up the calculations and positions the frame at a wrong place.

And concerning the rich text strikethrough effect; it’s really, really small.

	local strikethroughFrame = entryItemPrice:FindFirstChild("StrikethroughFrame")
	local formattedPrice = formatter.comma_value(originalPrice.Value).."g"
	local textInsideParentheses = "(" .. formattedPrice .. ")"

	local textSize = game:GetService("TextService"):GetTextSize(

		textInsideParentheses,
		entryItemPrice.TextSize,
		entryItemPrice.Font,
		Vector2.new(math.huge,math.huge)

	)

	local baseText = entryItemPrice.Text
	local baseTextWithoutParentheses = string.sub(baseText,1,#baseText - #textInsideParentheses)

	local baseTextSize = game:GetService("TextService"):GetTextSize(

		baseTextWithoutParentheses,
		entryItemPrice.TextSize,
		entryItemPrice.Font,
		Vector2.new(math.huge,math.huge)

	)

	strikethroughFrame.Size = UDim2.new(0,textSize.X,0,2)
	strikethroughFrame.Position = UDim2.new(0,baseTextSize.X,0.475,0)
	strikethroughFrame.AnchorPoint = Vector2.new(0,0)
1 Like

You can use strikethrough rich text. Be sure to have TextLabel.RichText enabled:

TextLabel.Text = "<s>Hello, world!</s>"

image

Edit: I just saw your issue with this solution

1 Like

It may be due to the font I’m using, though I’m not sure I would want to swtich fonts over something like this. Would rather find a solution that doesn’t sacrifice the rest of my game.

GetTextSize() returns the wrong values.
It does not get the textSize, but rather a non-scaled version of the textSize.

This means that any resolution that’s not Roblox’s “default”, will automatically not be able to get the correct valeus out of the built-in GetTextSize() function. Same thing for TextBounds.

Is there an explenation for this?
Below is a print and code. The print is done at 2 different resolutions. In theory the size result of Roblox’s built-in textSize function should change as the resolution changes, but it stays the same, causing the script to not work.

Print
image

Code

local strikethroughFrame = entryItemPrice:FindFirstChild("StrikethroughFrame")
	local formattedPrice = formatter.comma_value(originalPrice.Value).."g"
	local textInsideParentheses = "(" .. formattedPrice .. ")"

	local textSize = game:GetService("TextService"):GetTextSize(

		textInsideParentheses,
		entryItemPrice.TextSize,
		entryItemPrice.Font,
		entryItemPrice.AbsoluteSize

	)

	print(textSize)

	local baseText = entryItemPrice.Text
	local baseTextWithoutParentheses = string.sub(baseText,1,#baseText - #textInsideParentheses)

	local baseTextSize = game:GetService("TextService"):GetTextSize(

		baseTextWithoutParentheses,
		entryItemPrice.TextSize,
		entryItemPrice.Font,	
		entryItemPrice.AbsoluteSize

	)

	print(baseTextSize)

	strikethroughFrame.Size = UDim2.new(0,textSize.X,0,2)
	strikethroughFrame.Position = UDim2.new(0,baseTextSize.X,0.475,0)
	strikethroughFrame.AnchorPoint = Vector2.new(0,0)

Solution:

There are 2 reasons why the code didn’t work.

The first reason is that I was originally handling the strikethrough UI on the server. This is a major issue, because the server does not know the screenresolution of the client, and therefor it cannot scale the strikethrough correctly.

The second is that GetTextSize() does not work on scaled text. This means that I have to use TextBounds instead, and now that I’m on the client, the TextBounds returns the scaled value of the text, resulting in a succesful positioning and sizing of the strikethrough frame :sunglasses: .

Moral of the story: Don’t handle resolution-reliant UI logic on the server, and don’t use the GetTextSize() function on scaled text, but rather use TextBounds.

local strikethroughFrame = entryItemPrice:FindFirstChild("StrikethroughFrame")
local formattedPrice = formatter.comma_value(originalPrice.Value).."g"
local textInsideParentheses = "(" .. formattedPrice .. ")"

local baseText = entryItemPrice.Text
	
local baseTextWithoutParentheses = string.sub(baseText, 1, #baseText - #textInsideParentheses)
local textLabel = entryItemPrice

textLabel.Text = baseTextWithoutParentheses
local textBoundsBase = textLabel.TextBounds

textLabel.Text = textInsideParentheses
local textBoundsInsideParentheses = textLabel.TextBounds

strikethroughFrame.Size = UDim2.new(0, textBoundsInsideParentheses.X, 0.15,0)
strikethroughFrame.Position = UDim2.new(0, textBoundsBase.X, 0.5, 0)
strikethroughFrame.AnchorPoint = Vector2.new(0, 0)

textLabel.Text = baseText

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.