Web font rather than images

[nurikabe]

Maybe convert https://www.kreativekorp.com/software/fonts/apple2.shtml to a web font..

This is an amazing project BTW :-D

[Shdwdrgn]

In case anyone is still following this enhancement request, here is my attempt to implement fonts. I started with 40-col and 80-col ttf font files from https://www.kreativekorp.com/software/fonts/apple2/ which I renamed. The biggest changes are in display.css and tty.js to add the basic functionality.

I ran in to a problem with the pacman game, where the graphics are incorporated into the original font png files. I was not able to find any documentation that shows this was a valid technique on the original Apple computers so I didn't have any guidance on the "proper" way to implement this, however I wanted to keep the functionality in case it was required for additional software in the future. My solution was to crop the original 80-col png file and save it as res/sample.pacman.png, containing ONLY the new characters needed for this game. This required a minor change to index.js to change a CSS variable which points to a font file with the same name as the sample file loaded. The new png font is referenced at values 0x100-0x11F, which follows the original location used in jsbasic and is outside of the range of Apple's character set. If you need to create new font images for your own code, these should be png files that are 28x256 for 40-col mode or 14x256 for 80-col mode.

There are a few other changes which allow modifying the overall screen size (rather than using a fixed pixel size) and properly scaling both text and graphics pages. You can experiment with this by setting the font-size property for .jsb-frame -- a good example is font-size:1.5rem;. At some point I hope to use these changes to implement a fullscreen mode by hiding the other content on the page.

--- New files ---
res/apple40.ttf
res/apple80.ttf
res/sample.pacman.png

--- Modified files ---
display.css
index.js
tty.js
convert-to-font.zip

[Shdwdrgn]

A quick update... I see the fonts used in the pacman game do NOT enlarge when trying to magnify the screen size. Sorry I forgot to check that function before publishing the code changes here. The modifications work correctly for every other program I've tested so this is just a single failure that doesn't affect the functionality that was asked for under this ticket, however I will keep working on the problem to see if I can figure out a work-around.