[HN Gopher] PC Face Demo: Bitmap Arrays for Rendering CP437 Glyp... ___________________________________________________________________ PC Face Demo: Bitmap Arrays for Rendering CP437 Glyphs Using IBM PC OEM Fonts Author : susam Score : 16 points Date : 2023-02-20 08:42 UTC (14 hours ago) (HTM) web link (susam.github.io) (TXT) w3m dump (susam.github.io) | susam wrote: | This project was born out of another retro-style 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. | | 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/ 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 for more details about these fonts. | flohofwoe wrote: | > 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/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. | ajross wrote: | 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 wrote: | 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. ___________________________________________________________________ (page generated 2023-02-20 23:00 UTC)