[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)