3 ms·

PC Face Demo: Bitmap Arrays for Rendering CP437 Glyphs Using IBM PC OEM Fonts

35 points by susam 4y ago

susam 4y ago
This project was born out of another standalone, retro-style, HTML game project of mine. I wanted to write text on an HTML5 canvas and soon realized that the web browsers perform antialiasing due to which we lose the the jagged, crisp edges of the text that I wanted to retain in a cross-browser manner. The CSS declaration 'image-rendering: pixelated' does not fix that. Taking the matter of rendering text on canvas into my own hands and drawing the text myself by plotting squares led to this project. This project allowed me to embed the bitmap arrays of the glyphs directly into the source code of the HTML and draw text while avoiding antialiasing and external dependencies. There are various fonts used in the demo. Modern DOS font was developed by Jayvee Enaguas and released under the terms of CC0. The Oldschool fonts were developed by VileR of https://int10h.org/ https://int10h.org/ and released under the terms of CC BY-SA 4.0. Thanks to the wonderful and detail-oriented work by these font developers, I only had to translate the glyphs rendered by these fonts to bitmap arrays in order to plot them with pixel perfect precision on a canvas. See https://github.com/susam/pcface#font-details https://github.com/susam/pcface#font-details for more details about these fonts.
- flohofwoe 4y ago
  > The CSS declaration 'image-rendering: pixelated' does not fix that. IME crisp pixels in a WebGL canvas (I assume 2D canvas is the same) are possible on Chrome, Firefox (and it seems in Safari now too, at least as of 16.3) with the following scary looking CSS, and also when rendering at half resolution on HighDPI displays: image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; I don't know which of those have become redundant over time though. Examples: - https://floooh.github.io/sokol-html5/imgui-sapp.html https://floooh.github.io/sokol-html5/imgui-sapp.html - https://floooh.github.io/sokol-html5/debugtext-sapp.html https://floooh.github.io/sokol-html5/debugtext-sapp.html ...for WebGL rendering, of course you also need to use nearest filtering on anything that's rendered into the canvas before it's being upfiltered by the browser and/or window system.
  - susam 4y ago
    These CSS declarations do get the work done on Firefox 110 and Chrome 109 but Safari 15.2 still introduces antialiasing. I will try with Safari 16.3 sometime later. I have set up a test page here in case anyone wants to play with it: https://jsfiddle.net/uLob1yxr/ https://jsfiddle.net/uLob1yxr/ It does not seem to work for arbitrary monospace fonts though: https://jsfiddle.net/ku4jfeg2/ https://jsfiddle.net/ku4jfeg2/ Thanks for the nice comment!
- Retr0id 4y ago
  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 https://github.com/DavidBuchanan314/bitmap-font-css Notably, `filter: contrast(100.00001%);` works as a hack to disable subpixel antialiasing (although not antialiasing as a whole). I've only been able to test this on desktop Linux (in Firefox and Chrome), I'm hoping it works on other platforms too. 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/ https://www.da.vidbuchanan.co.uk/ [2] https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/ https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truet... Edit: Variant with true bitmap font: https://www.da.vidbuchanan.co.uk/index_bitmap.html https://www.da.vidbuchanan.co.uk/index_bitmap.html
ajross 4y ago
Hm... doesn't seem like these are corrected for pixel aspect ratio? Most of these ROM fonts were for display hardware without square pixels, e.g. the CGA font was for a 640x200 raster, etc...
- susam 4y ago
  Although not included in this demo, VileR does provide aspect-correct variants of the fonts at https://int10h.org/oldschool-pc-fonts/fontlist/ https://int10h.org/oldschool-pc-fonts/fontlist/. One can take the scripts at https://github.com/susam/pcface https://github.com/susam/pcface and generate the bitmap arrays for the aspect-correct variants too.
s1mon 4y ago
I once wrote a font editor on my IBM PCjr (one of the slowest PCs ever). The fun part was learning just enough machine language so the editor could load the font into a certain part of the RAM, protect the area and "terminate and stay resident". I also made a version of the font editor which would download fonts to my dot matrix printer. If I remember correctly, those had to be loaded each time the printer was rebooted. Fun times.

35 points by susam 4y ago

This project was born out of another standalone, retro-style, HTML game project of mine. I wanted to write text on an HTML5 canvas and soon realized that the web browsers perform antialiasing due to which we lose the the jagged, crisp edges of the text that I wanted to retain in a cross-browser manner. The CSS declaration 'image-rendering: pixelated' does not fix that. Taking the matter of rendering text on canvas into my own hands and drawing the text myself by plotting squares led to this project. This project allowed me to embed the bitmap arrays of the glyphs directly into the source code of the HTML and draw text while avoiding antialiasing and external dependencies. There are various fonts used in the demo. Modern DOS font was developed by Jayvee Enaguas and released under the terms of CC0. The Oldschool fonts were developed by VileR of https://int10h.org/ https://int10h.org/ and released under the terms of CC BY-SA 4.0. Thanks to the wonderful and detail-oriented work by these font developers, I only had to translate the glyphs rendered by these fonts to bitmap arrays in order to plot them with pixel perfect precision on a canvas. See https://github.com/susam/pcface#font-details https://github.com/susam/pcface#font-details for more details about these fonts.

flohofwoe 4y ago
> The CSS declaration 'image-rendering: pixelated' does not fix that. IME crisp pixels in a WebGL canvas (I assume 2D canvas is the same) are possible on Chrome, Firefox (and it seems in Safari now too, at least as of 16.3) with the following scary looking CSS, and also when rendering at half resolution on HighDPI displays: image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; I don't know which of those have become redundant over time though. Examples: - https://floooh.github.io/sokol-html5/imgui-sapp.html https://floooh.github.io/sokol-html5/imgui-sapp.html - https://floooh.github.io/sokol-html5/debugtext-sapp.html https://floooh.github.io/sokol-html5/debugtext-sapp.html ...for WebGL rendering, of course you also need to use nearest filtering on anything that's rendered into the canvas before it's being upfiltered by the browser and/or window system.
- susam 4y ago
  These CSS declarations do get the work done on Firefox 110 and Chrome 109 but Safari 15.2 still introduces antialiasing. I will try with Safari 16.3 sometime later. I have set up a test page here in case anyone wants to play with it: https://jsfiddle.net/uLob1yxr/ https://jsfiddle.net/uLob1yxr/ It does not seem to work for arbitrary monospace fonts though: https://jsfiddle.net/ku4jfeg2/ https://jsfiddle.net/ku4jfeg2/ Thanks for the nice comment!
Retr0id 4y ago
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 https://github.com/DavidBuchanan314/bitmap-font-css Notably, `filter: contrast(100.00001%);` works as a hack to disable subpixel antialiasing (although not antialiasing as a whole). I've only been able to test this on desktop Linux (in Firefox and Chrome), I'm hoping it works on other platforms too. 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/ https://www.da.vidbuchanan.co.uk/ [2] https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truetype-font/ https://int10h.org/blog/2018/05/flexi-ibm-vga-scalable-truet... Edit: Variant with true bitmap font: https://www.da.vidbuchanan.co.uk/index_bitmap.html https://www.da.vidbuchanan.co.uk/index_bitmap.html

ajross 4y ago

Hm... doesn't seem like these are corrected for pixel aspect ratio? Most of these ROM fonts were for display hardware without square pixels, e.g. the CGA font was for a 640x200 raster, etc...

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

s1mon 4y ago

I once wrote a font editor on my IBM PCjr (one of the slowest PCs ever). The fun part was learning just enough machine language so the editor could load the font into a certain part of the RAM, protect the area and "terminate and stay resident". I also made a version of the font editor which would download fonts to my dot matrix printer. If I remember correctly, those had to be loaded each time the printer was rebooted. Fun times.