bitmap font space width

[hhharkness]

me again with a bitmap font question - is there a way to alter the size of the space character for a non-fixed width font? the way it works currently is way too large for my needs - 16 pixels for a 25x15 font and 15 for 22x15 (both with 3 char spacing)

[gfwilliams]

You mean when you're making your own font with https://www.espruino.com/Bitmap+Font+Converter?

I just made a change which should work. You need to provide a font image with the first character which is a space character (or before). Now, if you fill the space in with 75% light grey (not 50% grey) as wide as you want it, it should take effect in the finished font.

[hhharkness]

doesn't seem to be working, unless i'm misunderstanding what you mean by 75% light grey - i assumed #bfbfbf

[gfwilliams]

Can you upload the image you used and what settings please?

[hhharkness]

[gfwilliams]

I've just checked and this definitely works. I believe it's adding '3' onto the width because of 'char spacing', but for example your image produces:

var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAAgAEAAgAH////4AAAAAAAcA/gPwD+A7wOeDjw4eODzge4D+AbgDAAAAAAADgO8B+ADwAeADwQeCDwQeCDwQf//fvwAAAAAAAAHAB4A7AOYHDBwY4DGAYA/4H/ADAAYAAAAAAAH+O/x+GDwweGDwweGDwweGDwweH/wfwAAAAAAAf/3//wweGDwweGDwweGDwweGD8/7j+AAAAAAAGAAwAGAAwAGADwB+A8weGPA3gHwA4AAAAAAAAAfv3//wQeCDwQeCDwQeCDwQeCD//79+AAAAAAAD+O/5+DDwYeDDwYeDDwYeDDwYf//f/wAAAAAAAHHA44HHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AfAfgPoPxHwI+BB+IB9AD8AD4AHAAAAAAAH////+CDwQeCDwQeCDwQeCDwQf//fvwAAAAAAAf/3//wAeADwAeADwAeADwAeAD8B7gOAAAAAAAH////+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wQeCDwQeCDwQeCDwQeCDwAeADAAAAAAAH////+CAwQGCAwQGCAwQGCAwQGAAwAAAAAAAAAf/3//wAeADwAeADwQeCDwQeCD8f7j+AAAAAAAH////4CAAQACAAQACAAQACAAQH////4AAAAAAA/////AAAAAAAAAOAB4ADAAYADAAYADAAYADAAf////wAAAAAAA/////AQAHAB8AdwHHBwccB3AHwAcABAAAAAAAH////4ADAAYADAAYADAAYADAAYADAAYAAAAAAA/////cAB4ADgAPAAcAB4ADgB4AcAPADgB4AcAH////4AAAAAAA/////cABwAHgAOAA8ABwAHgAO/////AAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wYGDAwYGDAwYGDAwYGDA/4D+AAAAAAAAD/+//+ADwAeADwAeALwB+AHwAf//f/wAAAAAAA/////wIGBAwIGBAwIGBwwPGBe/47+BAAAAAAAD8O/x+CDwQeCDwQeCDwQeCDwQfj/cPwAAAAAAAwAGAAwAGAAwAH////+AAwAGAAwAGAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf////wAAAAAAA4AHwAPwAPgAfgAfAD4D8B8B+A+AHAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf/+//wADAAYADAAYADAAYADAAf////2AD4A7gOHHAdwA4AdwHHDgO4A+ADAAAAAAAH+A/4ADAAYADAAf4D/AYADAAYH/A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AfAfgPoPxHwI+BB+IB9AD8AD4AHAAAAAAAH////+CDwQeCDwQeCDwQeCDwQf//fvwAAAAAAAf/3//wAeADwAeADwAeADwAeAD8B7gOAAAAAAAH////+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wQeCDwQeCDwQeCDwQeCDwAeADAAAAAAAH////+CAwQGCAwQGCAwQGCAwQGAAwAAAAAAAAAf/3//wAeADwAeADwQeCDwQeCD8f7j+AAAAAAAH////4CAAQACAAQACAAQACAAQH////4AAAAAAA/////AAAAAAAAAOAB4ADAAYADAAYADAAYADAAf////wAAAAAAA/////AQAHAB8AdwHHBwccB3AHwAcABAAAAAAAH////4ADAAYADAAYADAAYADAAYADAAYAAAAAAA/////cAB4ADgAPAAcAB4ADgB4AcAPADgB4AcAH////4AAAAAAA/////cABwAHgAOAA8ABwAHgAO/////AAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wYGDAwYGDAwYGDAwYGDA/4D+AAAAAAAAD/+//+ADwAeADwAeALwB+AHwAf//f/wAAAAAAA/////wIGBAwIGBAwIGBwwPGBe/47+BAAAAAAAD8O/x+CDwQeCDwQeCDwQeCDwQfj/cPwAAAAAAAwAGAAwAGAAwAH////+AAwAGAAwAGAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf////wAAAAAAA4AHwAPwAPgAfgAfAD4D8B8B+A+AHAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf/+//wADAAYADAAYADAAYADAAf////2AD4A7gOHHAdwA4AdwHHDgO4A+ADAAAAAAAH+A/4ADAAYADAAf4D/AYADAAYH/A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
var widths = atob("CQwMDAwMDAwMDAwMDAwMDA8IDw8PDw8PDw8GDAwMDAwMDw8PDw8PDw8FDw8PFA8PDw8PDw8PDxYODwwMDAwMDAwPDw8PDw8PDwUPDw8UDw8PDw8PDw8PFg4PDAwMDAwM");
g.setFontCustom(font, 32, widths, 15);

but if I make the shaded area smaller and re-run it widths is different:

var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAAgAEAAgAH////4AAAAAAAcA/gPwD+A7wOeDjw4eODzge4D+AbgDAAAAAAADgO8B+ADwAeADwQeCDwQeCDwQf//fvwAAAAAAAAHAB4A7AOYHDBwY4DGAYA/4H/ADAAYAAAAAAAH+O/x+GDwweGDwweGDwweGDwweH/wfwAAAAAAAf/3//wweGDwweGDwweGDwweGD8/7j+AAAAAAAGAAwAGAAwAGADwB+A8weGPA3gHwA4AAAAAAAAAfv3//wQeCDwQeCDwQeCDwQeCD//79+AAAAAAAD+O/5+DDwYeDDwYeDDwYeDDwYf//f/wAAAAAAAHHA44HHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AfAfgPoPxHwI+BB+IB9AD8AD4AHAAAAAAAH////+CDwQeCDwQeCDwQeCDwQf//fvwAAAAAAAf/3//wAeADwAeADwAeADwAeAD8B7gOAAAAAAAH////+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wQeCDwQeCDwQeCDwQeCDwAeADAAAAAAAH////+CAwQGCAwQGCAwQGCAwQGAAwAAAAAAAAAf/3//wAeADwAeADwQeCDwQeCD8f7j+AAAAAAAH////4CAAQACAAQACAAQACAAQH////4AAAAAAA/////AAAAAAAAAOAB4ADAAYADAAYADAAYADAAf////wAAAAAAA/////AQAHAB8AdwHHBwccB3AHwAcABAAAAAAAH////4ADAAYADAAYADAAYADAAYADAAYAAAAAAA/////cAB4ADgAPAAcAB4ADgB4AcAPADgB4AcAH////4AAAAAAA/////cABwAHgAOAA8ABwAHgAO/////AAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wYGDAwYGDAwYGDAwYGDA/4D+AAAAAAAAD/+//+ADwAeADwAeALwB+AHwAf//f/wAAAAAAA/////wIGBAwIGBAwIGBwwPGBe/47+BAAAAAAAD8O/x+CDwQeCDwQeCDwQeCDwQfj/cPwAAAAAAAwAGAAwAGAAwAH////+AAwAGAAwAGAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf////wAAAAAAA4AHwAPwAPgAfgAfAD4D8B8B+A+AHAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf/+//wADAAYADAAYADAAYADAAf////2AD4A7gOHHAdwA4AdwHHDgO4A+ADAAAAAAAH+A/4ADAAYADAAf4D/AYADAAYH/A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AfAfgPoPxHwI+BB+IB9AD8AD4AHAAAAAAAH////+CDwQeCDwQeCDwQeCDwQf//fvwAAAAAAAf/3//wAeADwAeADwAeADwAeAD8B7gOAAAAAAAH////+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wQeCDwQeCDwQeCDwQeCDwAeADAAAAAAAH////+CAwQGCAwQGCAwQGCAwQGAAwAAAAAAAAAf/3//wAeADwAeADwQeCDwQeCD8f7j+AAAAAAAH////4CAAQACAAQACAAQACAAQH////4AAAAAAA/////AAAAAAAAAOAB4ADAAYADAAYADAAYADAAf////wAAAAAAA/////AQAHAB8AdwHHBwccB3AHwAcABAAAAAAAH////4ADAAYADAAYADAAYADAAYADAAYAAAAAAA/////cAB4ADgAPAAcAB4ADgB4AcAPADgB4AcAH////4AAAAAAA/////cABwAHgAOAA8ABwAHgAO/////AAAAAAAD/+//+ADwAeADwAeADwAeADwAf//f/wAAAAAAA/////wYGDAwYGDAwYGDAwYGDA/4D+AAAAAAAAD/+//+ADwAeADwAeALwB+AHwAf//f/wAAAAAAA/////wIGBAwIGBAwIGBwwPGBe/47+BAAAAAAAD8O/x+CDwQeCDwQeCDwQeCDwQfj/cPwAAAAAAAwAGAAwAGAAwAH////+AAwAGAAwAGAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf////wAAAAAAA4AHwAPwAPgAfgAfAD4D8B8B+A+AHAAAAAAAAAH/+//4ADAAYADAAYADAAYADAAf/+//wADAAYADAAYADAAYADAAf////2AD4A7gOHHAdwA4AdwHHDgO4A+ADAAAAAAAH+A/4ADAAYADAAf4D/AYADAAYH/A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
var widths = atob("BwwMDAwMDAwMDAwMDAwMDA8IDw8PDw8PDw8GDAwMDAwMDw8PDw8PDw8FDw8PFA8PDw8PDw8PDxYODwwMDAwMDAwPDw8PDw8PDwUPDw8UDw8PDw8PDw8PFg4PDAwMDAwM");
g.setFontCustom(font, 32, widths, 15);

and they render differently:

It's worth adding that you've chosen 3px pixel spacing, but because the W goes right to the edge of the grid, the 3pc spacing isn't being added to it. To make it look right you'll have to space your grid out by another 3 pixels, so make it 25x15

[gfwilliams]

One perhaps tidier solution now would be to set Char Spacing to 0, and to then fill the background of every character, plus the amount of space you want, with that light grey

[hhharkness]

doing this somehow still made it add 3px to the space width, easy to get around by just making the shaded area 3px less than intended but i do wonder why that happens with 0 spacing 🤔
either way i got it working finally, thank you!

[gfwilliams]

Might it have been that you were seeing the 3px from the end of the character before the space as well?

[hhharkness]

of course... don't try to code while sleep deprived is the lesson here