pcface VS bitmap-font-css

I hold VileR's work on int10h.org in high esteem, given its exceptional quality. As someone whose initial exposure to computers was through IBM PCs, I find VileR's website to be a treasure trove of IBM PC fonts, BIOS fonts, and related resources.

Inspired by IBM PC games from the 1990s, I aspired to create my own invaders-like game. However hindered by limited access to computers and limited computer programming knowledge, the most I could manage to make were a few text-based adventure games. Although 25 years too late, during the COVID-19 pandemic, I revisited this dream and spent a weekend writing my own Invaders game[1] using HTML5 Canvas.

Initially, I used CanvasRenderingContext2D: fillText() to display text (current score, info screen, etc.). However, dissatisfied with the text rendering quality, I began looking for IBM PC OEM fonts online and came across the Oldschool PC Fonts[2] on int10h.org. I downloaded the font packs from the website, used a Python script to convert them to bitmaps[3] (arrays of integers), and then used the bitmaps to draw text on the canvas, one cell at a time, to get pixel-perfect results!

I eventually switched to a different font pack called Modern DOS[4] developed by Jayvee Enaguas. Nevertheless given how extensive VileR's website is and how convenient the font preview tools[5] on the website are, int10h.org remains as my go-to website whenever I am doing any type of retrocomputing work for fun.

[1] https://susam.net/invaders.html

[2] https://int10h.org/oldschool-pc-fonts/

[3] https://github.com/susam/pcface

[4] https://www.dafont.com/modern-dos.font

[5] https://int10h.org/oldschool-pc-fonts/fontlist/font?ibm_vga_...

Although not included in this demo, VileR does provide aspect-correct variants of the fonts at https://int10h.org/oldschool-pc-fonts/fontlist/. One can take the scripts at https://github.com/susam/pcface and generate the bitmap arrays for the aspect-correct variants too.

> It typically uses 256 characters exemplified by the font CP437

I have very fond memories of code page 437 (CP437). ASCII code 1 is a smiley face in CP437. How cool is that!

Shameless plug: I recently wrote a small toolkit to render CP437 characters on HTML5 canvas for a retro-style game project I was working on. Source: https://github.com/susam/pcface Demo: https://susam.github.io/pcface/src/demo.html

I've been able to get mostly-crisp bitmap fonts via some CSS hacks. It's still a work-in-progress but I've been documenting my findings here: https://github.com/DavidBuchanan314/bitmap-font-css

You can see a bit of a demo on my homepage[1], although note that I'm using the "Flexi IBM VGA"[2] font which is a hybrid bitmap/vector font (the block drawing characters, for example, are still pixel-perfect)

[1] https://www.da.vidbuchanan.co.uk/

[2] https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truet...