3 ms·

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 we

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

by susam 4y ago

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