How do I calculate the width for spaces between texts according to container width, total text width and amount of texts in array?

[strangereu]

Hello, it's been a long time since I attempted to script something.
Now I am at it once again... And I have a question that is hard for me to answer, but might be easy for you to solve.

I'm working on a scoreboard and I failed at priting data from an array.
The array contains the following texts "Name", "Points", "Cash", "Country", "FPS", "Ping" and I'm using a for loop to print them next to each other, so I'm only working with the x axis.

You might be asking... What do you want to do?
Well, I would like to align them in one line (next to each other), but I would like them to be aligned according to total container width. So the first text would start 10pixels from the beginning of the container and the last text would end 10px before the end of the container...

The container width is calculated as a half of player's screen.

	dxDrawRectangle(0, headerHeight, rWidth, titleRowHeight, tocolor(0, 0, 0, 200))	
	for i, v in ipairs(columns) do
		dxDrawText(v, x, math.floor(headerHeight+titleRowHeight/2-dxGetFontHeight((rWidth/titleRowHeight)*0.035/2)), 0, 0, tocolor(255, 255, 255, 255), (rWidth/titleRowHeight)*0.035, openSans)
		x = rWidth - dxGetTextWidth(v) / table.getn(columns) - 1
	end

I actually thought of calculating it this way:
x = width of the container (rWidth) - total length of texts (dxGetTextWidth(v)) / amount of texts in the array - 1 as there's no need for a space after the last text.

I guess I'm doing something wrong as it's not aligning the way I want it to align.
It's supposed to work the same as aligning to block in Microsoft Word... Spaces between texts are calculated by the total container width and by the total length of words... So no matter how many words you have in the array, it's always looking the same, the only difference is at the sizes of spaces between texts.

Could you please help me to figure this issue out?

[strangereu]

I edited it a little...
 

x = x + dxGetTextWidth(v)/2 + ((rWidth-10) / table.getn(columns) - 1)

It is now looking like this

Still not the way I want it... It should be aligned from the end exactly the same distance as ID from the beginning... Anyway, it :Os up when I add more words...

Edited December 19, 2018 by strangereu

[IIYAMA]

Your calculations are a bit strange

 

For example this line:

x = rWidth - dxGetTextWidth(v) / table.getn(columns) - 1

 

--1
dxGetTextWidth(v) / table.getn(columns)

--2
rWidth - --[[result of 1]]

--3
--[[result of 2]] - 1

--4
x = --[[ result of 3]]

 

Is this really the math order you intended?

 

----------

 

For example you have a max with of 500 pixels.

containerWidth = 500

And you have 8 column (names).

columns = {{},{},{},{},{},{},{},{}}

 

First step. Calculate the width of the text per column!

 

Second step. Calculate the total width of all text items together. (So that you can scale down [and up] the columns)

Which is for example 450px.

containerWidth / 450 = 1.111111... (scale factor!)

 

Or higher, 600px

containerWidth / 600 = 0.833333.... (scale factor!)

 

If you multiply these values with your columns then shouldn’t they fit perfectly?

 

Margins around?

containerWidth_ = containerWidth - margin * 2

 

Margins in between?

containerWidth_ = containerWidth - margin * (#columns - 1)

 

Fixed column size?

containerWidth / #columns

 

It isn't that hard, just do it step by step by step by step.