Font System

Font System

LGR-DOS renders all text using a custom bitmap font system. Each character on screen is an individual <div> element styled with CSS background-position to show the correct glyph from a sprite sheet.

Sprite Sheet

img/f12.7.png is a 192×192px image containing a 16×16 grid of 12×12px characters, covering the full 256-character ASCII/CP437 set.

Grid layout:
  16 columns × 16 rows = 256 characters
  Each cell:  12px wide × 12px tall
  Sheet size: 192px × 192px

The base sprite sheet uses white glyphs on a transparent background. Per-color variants (img/f12.0.png through img/f12.15.png) are pre-rendered PNGs for each of the 16 CGA palette colors.

CSS Generation

On init(), goFontGo() dynamically generates 256 CSS rules and injects them into the page:

.f-65 { background-position: -12px -48px; }  /* 'A' = index 65 */

Two special classes are also added:

• .f-n — newline marker (zero-width, float:none), used to track line count
• .f-cursor — slight negative margin to position the blinking cursor

Character Rendering

Every keystroke (and every character echoed by a command) creates a <div> like this:

<div class="font f-65"
     style="background-color:#000000; background-image:url(img/f12.7.png)"
     v="A">
</div>

• font — sets the 12×12px size and float
• f-65 — positions the background to show 'A'
• background-color — current background palette color
• background-image — per-color font PNG for the foreground color
• v attribute — stores the raw character value (used for command reading)

Colors

The 16-color CGA/EGA palette is stored in the pal array (indices 0–15):

Index	Color	Hex
0	Black	#000000
1	Dark Blue	#0000aa
2	Dark Green	#00aa00
3	Dark Cyan	#00aaaa
4	Dark Red	#aa0000
5	Dark Magenta	#aa00aa
6	Brown	#aa5500
7	Light Gray	#aaaaaa
8	Dark Gray	#555555
9	Blue	#5555ff
10	Green	#55ff55
11	Cyan	#55ffff
12	Red	#ff5555
13	Magenta	#ff55ff
14	Yellow	#ffff55
15	White	#ffffff

Active colors are tracked in txtPal = { bg: 0, fg: 7 } and can be changed with the setcol command.