Font outline?

Hi,
i want to render some text over an image and since in my experience white text with a black outline tends to be the most readable i was wondering if there is already a built in function for adding text outlines or if i will have to get creative.

You mean something like what's talked about here ?

I did exactly that for my clock. You could use two fonts with different weights and print them on top of each other. I followed Gordon's suggestion and used images for individual digits. I wrote a very primitive python script to modify fonts, you can have it if you like.

Gonna give it a try. Thanks a lot!

Here you are. This is far from a finished program, just a quick hack to generate some images from font data. Use it like this:

1. Use the Espruino font converter to convert your font. You will need three pieces of data from the output window.
   
2. Copy the encoded string after g.setFontCustom(atob(" into the script after "fontEncoded". This is where the actual characters are encoded.
   
3. Change the value of fontsize in the script to the size of your converted font.
   
4. Copy the second (shorter) encoded string into the script after "width". The width of each character is encoded here.
   
5. Run the script. It should output a list of image definitions that the Graphics library can use
   
   

Edit: The forum code viewer does not seem to like python code. I uploaded the script instead...

1 Attachment

• FontConverter2.py

Just a note that if you don't need it to be fast, you can use a s normal font and then render it 'jittered' either side of where you want:

var txt = "Hello";
var x=10, y=10;
g.setFontVector(60).setColor("#fff");
g.drawString(txt,x-4,y).drawString(txt,x+4,y);
g.drawString(txt,x,y-4).drawString(txt,x,y+4);
g.drawString(txt,x-3,y-3).drawString(txt,x-3,y+3);
g.drawString(txt,x+3,y-3).drawString(txt,x+3,y+3);
g.setColor("#000");
g.drawString(txt,x,y);

I seem to remember we do this for one or two clock faces. If it's once a minute it's no big deal but you wouldn't want to be drawing like that every second.

Thats what I did at first, it has the advantage that you can easily adjust the line width by changing the offset

Thats what I did at first, it has the advantage that you can easily adjust the line width by changing the offset.