Discuss Scratch

daybreakk
Scratcher
10 posts

Spacing for text engines

Is there any way that you can get even spacing for a text engine (through coding) without changing all the letters individually?

Thanks
RobotDJS
Scratcher
68 posts

Spacing for text engines

Please share the project and it might be easier to help you.
peppermintpatty5
Scratcher
1000+ posts

Spacing for text engines

It would be a lot easier if your font was monospaced. You'll have to make exceptions for thin letters like “i,l,j,f,t” etc.
daybreakk
Scratcher
10 posts

Spacing for text engines

peppermintpatty5 wrote:

It would be a lot easier if your font was monospaced. You'll have to make exceptions for thin letters like “i,l,j,f,t” etc.
yeah, that's what I was thinking…
daybreakk
Scratcher
10 posts

Spacing for text engines

RobotDJS wrote:

Please share the project and it might be easier to help you.

peppermintpatty5 wrote:

It would be a lot easier if your font was monospaced. You'll have to make exceptions for thin letters like “i,l,j,f,t” etc.
nvm, I got it thanks
gtoal
Scratcher
1000+ posts

Spacing for text engines

Great automatic kerning (the technical word for inserting the small spaces between letters) is well nigh impossible but you can do an approximation that is better than monospacing.

The naive way is just to trim the characters to the leftmost and rightmost pixels then put the same number of pixels between each trimmed character.

However this still looks bad for some combinations of letters.

A better approximation takes into account that the perceived spacing between letters is integrated visually from the total white space in the area between the letters rather than just how close the edges are. So what you do is first trim the letters, then count the white pixels between the side and the letter … on the right hand side for the first letter and the left hand side for the following letter. Then make the spacing between that pair of letters proportional to the sum of the white spaces on each pixel row for both the left and right letters added together.

Also note that it may be worth doing this to sub-pixel accuracy and then rendering the letters to the closest pixel rather than rounding on each character and losing the rounded off part on the next pair of letters.

For speed, you usually precompute this info for all pairs of letters and store them as a ‘kerning table’ rather than calculating them as you render each letter.

Graham
daybreakk
Scratcher
10 posts

Spacing for text engines

gtoal wrote:

Great automatic kerning (the technical word for inserting the small spaces between letters) is well nigh impossible but you can do an approximation that is better than monospacing.

The naive way is just to trim the characters to the leftmost and rightmost pixels then put the same number of pixels between each trimmed character.

However this still looks bad for some combinations of letters.

A better approximation takes into account that the perceived spacing between letters is integrated visually from the total white space in the area between the letters rather than just how close the edges are. So what you do is first trim the letters, then count the white pixels between the side and the letter … on the right hand side for the first letter and the left hand side for the following letter. Then make the spacing between that pair of letters proportional to the sum of the white spaces on each pixel row for both the left and right letters added together.

Also note that it may be worth doing this to sub-pixel accuracy and then rendering the letters to the closest pixel rather than rounding on each character and losing the rounded off part on the next pair of letters.

For speed, you usually precompute this info for all pairs of letters and store them as a ‘kerning table’ rather than calculating them as you render each letter.

Graham

Wow, thanks!
yeah, what I did was similar to the first way that you mentioned (I think?)… Basically, I chose a constant amount of spacing per pixel that I preferred, and then took into account the amount of pixels in width of each character… it looks better, but it's still a bit awkward at places.
Well, anyways, thank you for the advice! I'll try to see if I can follow through with that, though… It sounds a little complicated
gtoal
Scratcher
1000+ posts

Spacing for text engines

Did you see this project yet? https://scratch.mit.edu/projects/100122918/
daybreakk
Scratcher
10 posts

Spacing for text engines

gtoal wrote:

Did you see this project yet? https://scratch.mit.edu/projects/100122918/
Nope. Looking at it now

Powered by DjangoBB