Is it possible to use a bitmap font in Hype

1

I’m trying to simulate a device UI on a small oled display with a resolution of only 256 x 64 pixels.

It critical for me to simulate the way the fonts with actually look on the display and therefore need to use bitmap fonts ( 12, 24, 36 and 60 px high) and can generate different font versions with specific size bitmaps in FontForge, but I’ve tried all the different permutations from otf and ttf to svg and importing them via ‘custom css’ without success.

Any suggestions?

thanks
anders

I

2

Is this on chrome only? Then you could use a svg Filter to pixelate everything. If it needs to be cross browser then this filter only works on specific elements in SVG but not on entire DIVs.

3

wow, didn’t know this was an option and will look into it…I can live with chrome only as it mainly a presentation sketch.

How would this work in a hype sketch… do I simply add the html, css and js to the header and then preview it in chrome?

thanks

4

I found a Russian software developer (Kgroup) who makes a small app called PixFont (29USD) that creates bitmap in ttf format (and allows manual editing of the results)…sadly it’s pc only, so I have to switch back and forth, but as long as I only preview in Safari it works just fine.

Is there a reason I can’t get the texts to display correctly in firefox or chrome? I see them in the html header…

5

Unclear; you’d need to attach a sample .hype document. The most common issue is that a font is installed on the system and using that version when displaying correctly while not using the web font version.

There’s a few CSS properties you might be able to make use of, specifically:

image-rendering: pixelated !important;
-webkit-font-smoothing: none !important;

The first sets images when being scaled by their width/height to be blocky. The second is for font rendering to use pixels instead of antialiasing. The missing property is one that would set CSS transform scaling to use linear (blocky/pixelated) interpolation… but you might be able to render text into an SVG and then perhaps the image-rendering would work on that. I haven’t tried :slight_smile:.

1 Like
6

Thanks,
I’ll give it a try, but I’m not sure how to render into SVG and I’ve tried translating the custom ttf into woff or woff2, but it won’t translate using the online converters… Is there a trick to this?

My issue is that in chrome and firefox on osx the web font get replaced with the default Serif font, but on Safari it uses the correct web font. Win10 edge and explorer browsers display the web font, but also here Firefox uses times instead.

Here is a sample .hype that works in Safari, but not in Chrome or FireFox:

pixelfont test.hype.zip (39.5 KB)

7

If you look at the CSS errors in Firefox’s console, you’ll see this output:

downloadable font: head: misaligned table (font-family: "Roboto48R" style:normal weight:400 stretch:100 src index:0) source: http://127.0.0.1:52276/preview/77EF52B7-B4AB-4D95-814D-7789A2B191B2-91820-0002E167735ED490/index.hyperesources/Roboto48R.ttf unknown:21:15
downloadable font: rejected by sanitizer (font-family: "Roboto48R" style:normal weight:400 stretch:100 src index:0) source: http://127.0.0.1:52276/preview/77EF52B7-B4AB-4D95-814D-7789A2B191B2-91820-0002E167735ED490/index.hyperesources/Roboto48R.ttf

Looks like it doesn’t like the TTF. I don’t know much about translating, but it might be this issue is also giving problems to translate the format.