problem filling the entire pixel area with text

[Extinguish]

Hi everyone, I've been using Affinity Photo 2 with great pleasure and satisfaction for about 4 months, and apart from sporadic crashes where the program closes, I'm very satisfied.

I have a problem with filling a defined area with characters.

As a hobby I design and produce watchfaces, and I really need to create files with exact dimensions to fill the dial areas.

Most of my frustrations arise when I have to create numbers from 0 to 9.

Even though I set the text centering to center, each character does not correspond to the entire area of my file, and I have to spend a lot of time manually defining the exact font size.

Is there a faster way to avoid this?

 

in this example image the character 0 is perfectly centered.As you can see the guides correspond:

 

when i created anoter number, example number 4, this is the my problem:

I have to manually act on the guides every time.

This also happens with characters. For example, if I have to write the names of the months of the year, for each month I have to intervene to fill the box entirely

I attach a video to help you understand what I'm talking about

2024-10-27 14-02-56.mkv

[GarryP]

Welcome to the forums @Extinguish

Most font glyphs were not created with pixel grids in mind.

Because of that, most characters will not ‘fit’ within the same rectangle of pixels exactly. They are generally (hopefully) designed with aesthetics in mind rather than some kind of ‘size standardisation’.

Because of that, you will probably need to do what you want to do by hand/eye unless someone has a good ‘trick’ you can use.

I’m not entirely sure why you have to keep the text within a certain ‘bounding box’ so if you can explain that a bit more it might be useful.

[Extinguish]

17 minutes ago, GarryP said:

Welcome to the forums @Extinguish

Most font glyphs were not created with pixel grids in mind.

Because of that, most characters will not ‘fit’ within the same rectangle of pixels exactly. They are generally (hopefully) designed with aesthetics in mind rather than some kind of ‘size standardisation’.

Because of that, you will probably need to do what you want to do by hand/eye unless someone has a good ‘trick’ you can use.

I’m not entirely sure why you have to keep the text within a certain ‘bounding box’ so if you can explain that a bit more it might be useful.

Thanks GarryP for the reply.

The watchfaces area is 480x480

being able to fill a 480x480 pixel area with all the useful elements for a clock is really difficult, so I have to calculate every numerical character I create down to the millimetre.

For example, if I decide that the number 25 degrees celsius must be 53 pixels x 32 pixels large, it must be exactly that. 

a size deviation between the number 0 and the number 5, for example, will create a "crooked" and visibly bad value.

This is a example of area:

Edited October 27, 2024 by Extinguish

[GarryP]

Thanks for the extra information.

It sounds like you might need to do various manual modifications to the glyphs in some cases, which could be tricky.

Getting things to be ‘pixel perfect’, especially when using characters you haven’t created for yourself, is often an awkward process.

Hopefully the information you have given will help someone to give you further advice.

[Extinguish]

I'll be even more precise. To create a watchface I use a java tool. to display the time, for example, you need 9 png files corresponding to the numbers (0-9)

this is the structure the folder must have:

 

[thomaso]

2 hours ago, Extinguish said:

each character does not correspond to the entire area of my file, and I have to spend a lot of time manually defining the exact font size.

Is there a faster way to avoid this?

For example, if you are referring to the slightly different sizes and "overhangs" at the baseline of the character, this is desired by the font design to create a more visually consistent impression of black and white contrast for different characters within words. This is part of the "optical alignment" defined for each character in a font file.

You can also notice this with capital letters at the beginning of a line: some chars seem to be moved, compared to those with a straight left edge (like 'M').

It may even occur with monospace fonts (which are expected to have an identical width for each character). I assume it works better or without adjustment with your shown LCD-like font example, right? – I guess, apart from using a different font, the workflow shown in your video is the best way to compensate for these tiny discrepancies.

By the way, to me the '5' in your mentioned '25' looks slightly smaller which is also caused by the visual cropping caused by antialiasing, especially of round shapes. To avoid this you need to use fonts without round edges but rather rectangular, straight shapes only, like in your LCD example.

[Extinguish]

thanks Thomaso, yes work better with Monofont, but Monofont are very ugliest for me.

I have almost 200 fonts installed and very few monofont.

the only trick I've found is to leave a margin of empty pixels around the character.

 

This works for most numbers, but then there are numbers that go crazy like this:

 

[Extinguish]

another example:

this is perfect allign of font at guide pixel

24 of date:

 this is an exampe when how if I'm not careful to calculate the font size precisely

 

 

and the program that i use in java, take the 9 files png (0-9) to insert them into a .json file where you enter: the coordinates, the position, and the effects I want to give to those 9 files. But they must all be the same size and look the same

if they are numbers in small fonts you can also afford to make smudges, but the larger the numbers:

or when the numbers become too many to represent:

 

 

Edited October 27, 2024 by Extinguish