Help with a number display spacing

💡 Having trouble with Scratch block assembly? Don’t know how to implement code logic? 🚀 Get Help Now

Isopod7

Posted on August 5, 2025 • Intermediate

🔢 Help with a number display

I’ve been trying to create a number display that shrinks every time a digit is added so that it fits into a square. The display is also supposed to align to the middle of the square.

However, the spacing between each digit on the x-axis is not proportionate whenever the display shrinks and a digit is added, leading to the digits being either too far or close to each other on the display.

Could someone devise a solution to this? The number display is controlled by a variable with a slider, and I need help making it compatible with negative numbers too.

Issues I’m facing:

Inconsistent spacing between digits when display shrinks
Digits not properly centered in the square
Need support for negative numbers

👍 Like (8)💬 Reply 🔗 Share

DisplayPro_Expert

Replied 3 hours later • ⭐ Best Answer

Great question @Isopod7! Creating a dynamic number display with proper spacing is tricky but definitely achievable. Here’s a comprehensive solution:

🔧 Step 1: Set Up Variables

First, create these variables for your number display system:

    when flag clicked
set [display_number v] to [0]
set [digit_width v] to [30]
set [display_width v] to [480]
set [x_offset v] to [-10]

📏 Step 2: Calculate Dynamic Size and Spacing

For each digit clone, use this formula to ensure proper spacing:

    // Set the size based on number length
set size to ((display_width) / ((length of (display_number)) + (4))) %

// Calculate x position for proper spacing
set x to ((x_offset) + ((digit_width) * ((clone_id) / ((length of (display_number)) + (1)))))

🔢 Step 3: Handle Negative Numbers

To support negative numbers, check if the first character is a minus sign:

    when I start as a clone
if <(clone_id) = [1]> then
if <(letter (1) of (display_number)) = [-]> then
switch costume to [minus_symbol v]
else
switch costume to (letter (clone_id) of (display_number))
end
else
if <(letter (1) of (display_number)) = [-]> then
switch costume to (letter ((clone_id) + (1)) of (display_number))
else
switch costume to (letter (clone_id) of (display_number))
end
end

🎯 Step 4: Complete Display System

Here’s the full code for your number display sprite:

    when flag clicked
forever
delete all clones of [myself v]
set [total_digits v] to (length of (display_number))

// Handle negative numbers
if <(letter (1) of (display_number)) = [-]> then
set [actual_digits v] to ((total_digits) - (1))
else
set [actual_digits v] to (total_digits)
end

// Create clones for each digit
repeat (total_digits)
set [clone_id v] to (item # of [repeat v])
create clone of [myself v]
end

wait (0.1) seconds
end

when I start as a clone
// Calculate size and position
set size to ((display_width) / ((actual_digits) + (4))) %
set x to ((x_offset) + ((digit_width) * (((clone_id) - (0.5)) / (total_digits))))
set y to [0]

// Set costume based on digit or minus sign
if <(clone_id) = [1]> then
if <(letter (1) of (display_number)) = [-]> then
switch costume to [minus_symbol v]
else
switch costume to (letter (clone_id) of (display_number))
end
else
if <(letter (1) of (display_number)) = [-]> then
switch costume to (letter ((clone_id) + (1)) of (display_number))
else
switch costume to (letter (clone_id) of (display_number))
end
end

show

💡 Pro Tips:

Adjust the constants: The values 480, 4, 30, and -10 can be tweaked based on your specific display area
Costume setup: Make sure you have costumes for digits 0-9 and a minus symbol
Performance: Consider limiting the maximum number of digits to prevent lag
Centering: The formula automatically centers the display in your square

This solution should give you perfectly spaced digits that scale properly with the number length and support negative numbers! 🎉

👍 Like (15)💬 Reply 🔗 Share

Isopod7

Follow-up question • 1 day later

Thank you so much @DisplayPro_Expert! This solution works much better than what I had before. The spacing is now consistent and the negative number support is exactly what I needed.

I do notice there’s still a slightly large gap between digits in two-digit numbers, but it’s much more manageable now. Is this normal or could it be adjusted further?

👍 Like (3)💬 Reply

Need more help with Scratch programming? Join our community and get expert guidance for your projects! ✨🚀

Help with a number display spacing