Custom font spacing issue

I'm trying to use a custom font in a watchface, it seems to load properly but then renders incorrectly:

As you can see, the "1" characters are pushed together which suggests that it is not using the xadvance in the fnt information. My fnt file looks like this:

info face="Segment" size=48 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0

common lineHeight=48 base=41 scaleW=256 scaleH=48 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0

page id=0 file="segment_0.png"

chars count=11

char id=48   x=0     y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=49   x=227   y=0     width=6     height=35    xoffset=20    yoffset=3     xadvance=27    page=0  chnl=15

char id=50   x=26    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=51   x=156   y=0     width=22    height=41    xoffset=4     yoffset=0     xadvance=27    page=0  chnl=15

char id=52   x=201   y=0     width=25    height=35    xoffset=1     yoffset=3     xadvance=27    page=0  chnl=15

char id=53   x=52    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=54   x=78    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=55   x=179   y=0     width=21    height=38    xoffset=5     yoffset=0     xadvance=27    page=0  chnl=15

char id=56   x=104   y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=57   x=130   y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=58   x=234   y=0     width=6     height=23    xoffset=2     yoffset=9     xadvance=10    page=0  chnl=15

Am I doing something wrong?

jim_m_58 over 9 years ago

It looks like you're trying to emulate a clock that uses the good old "7-segment" display for the digits, which to me says the width of each digit should be the same, be it a "1" or an "8". You're wanting a fixed space font, it seems, but the width of the "1" seems to be 6 vs ~25 for the others (they probably should all be 25 - except id=58 - the colon)

See http://www.1001fonts.com/digital-7-font.html#styles and enter 23:11 to see fixed vs proportional for a "digital" font.

teadriven over 9 years ago

I am indeed attempting to use a 7-segment display for the time and am in the process of generating one manually :)

As far as I can tell, the "width" in the fnt file is the width of the glyph stored in the png, whereas the "xoffset" represents the position to place the glyph relative to the current character position and "xadvance" is the number of pixels to move to the next character position.

For the character "1" (which is id=49) the xoffset is 20 placing it at the far right of the character fixed width and the xadvance is 27 for all numeric characters (the final character is the colon) which suggests that all numbers should be placed 27 pixels apart.

Is it possible that the SDK is ignoring the xoffset and xadvance values? If this is the case then I would need to create all of my glyphs at a fixed size (thereby making a slightly larger combined image).

sharkbait_au over 9 years ago

I have done a bit of work with custom fonts. If I remember rightly then the values CIQ is interested in are [file="*"] because that points to the image file, and [char id=* x=* y=* width=* height=*] because they map the image that will be used by CIQ.

Former Member over 9 years ago

I can confirm that "xadvance" isn't being used by the compiler. It looks like x, y, width, height, xoffset, yoffset and page are being pulled from the .fnt file (although xoffset doesn't look like it's being used). I know there is some work being done on updating custom fonts right now as we also had some users run into problems when trying to use some non-Latin fonts. I'll file this as something to look into.

For the time being you will want to create your glyphs at a fixed size.

teadriven over 9 years ago

Ok, good to know.

Thanks

jim_m_58 over 9 years ago

For a 7 segment type display, what if you don't use a font, but draw the number with rectangles? give it a corner position on the screen, and draw the needed segments based on a digit passed? Something like drawdigit(x,y,digit).

Brandon.ConnectIQ over 9 years ago

You could do this, but my only concern would be how it affects performance. I've seen a few watch faces that used a lot of drawable elements that were slow to animate and could make the device less responsive than normal. Not that it isn't worth trying--just something to keep in mind. :)

jim_m_58 over 9 years ago

I through together a simple version of "roll your own", and it draws between 2 and 7 segments per digit. Set up an array of the segments used per digit and then based on the digit, draws the proper thing. Not ideal, but easily sizable, is true momo space, and shows no delay in displaying.

var segs=[
		[1,0,1,1,1,1,1],		//0
		[0,0,0,0,0,1,1],		//1
		[1,1,1,0,1,1,0],		//2
		[1,1,1,0,0,1,1],		//3
		[0,1,0,1,0,1,1],		//4
		[1,1,1,1,0,0,1],		//5
		[1,1,1,1,1,0,1],		//6
		[1,0,0,0,0,1,1],		//7
		[1,1,1,1,1,1,1],		//8
		[1,1,0,1,0,1,1]];		//9

    function drawDigit(dc,x,y,dig)
    {
    	var width=22;
    	var height=50;
    	var thick=5;
    	dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
	if(segs[dig][0])
	{
		dc.fillRectangle(x, y, width, thick);
	}
	if(segs[dig][1])
	{
		dc.fillRectangle(x, y+(height/2)-(thick/2), width, thick);
	}
	if(segs[dig][2])
	{
		dc.fillRectangle(x, y+height-thick, width, thick);
	}
	if(segs[dig][3])
	{
		dc.fillRectangle(x, y, thick, height/2);
	}
	if(segs[dig][4])
	{
		dc.fillRectangle(x, y+(height/2), thick, height/2);
	}
	if(segs[dig][5])
	{
		dc.fillRectangle(x+width-thick, y, thick, height/2);
	}
	if(segs[dig][6])
	{
		dc.fillRectangle(x+width-thick, y+(height/2), thick, height/2);
	}
}

sharkbait_au over 9 years ago

Surely you should at least compare using a fillPolygon with 6 sides to come close to making a real comparison?

teadriven over 9 years ago

@jim_m_58

Yeah, I did consider drawing it but was unsure what the drawing performance would be like and SHARKBAIT is right in that the shape would have to be drawn with a 6-sided polygon to achieve a similar look. I might still give it a try though and can still fall back to using a fixed-width font if it proves too slow.