-
Notifications
You must be signed in to change notification settings - Fork 0
Font System
We don't use a webfont. Every character on screen is its own <div>, and CSS picks a 12×12 region of a sprite sheet to show the right glyph. This is more work than a single <canvas> would be, but it means each character can carry its own attributes (palette index, original value for command-line scanning, classnames for blinking cursor offset), which makes the terminal logic far simpler.
prompt/img/f12.7.png master (light grey on transparent)
prompt/img/f12.<0..15>.png per-CGA-colour variants
Each sheet is 192×192 px — a 16×16 grid of 12×12 px CP437 glyphs, indexed by character code 0–255.
goFontGo() runs once on page load and builds one CSS rule per code:
.f-65 { background-position: -12px -48px; } /* 'A' (index 65) */plus two utility classes:
| Class | Purpose |
|---|---|
.f-n |
zero-width newline marker (used to count visible rows) |
.f-cursor |
slight negative margin so the blinking cursor sits flush |
<div class="font f-65"
style="background-color:#000000; background-image:url(img/f12.7.png)"
v="A"></div>| Attribute | Role |
|---|---|
class="font" |
size + float |
class="f-65" |
background-position (which glyph) |
style="background-color:..." |
active palette background |
style="background-image:..." |
which f12.<N>.png for the fg colour |
v="A" |
raw character value (read back when scanning the command line) |
The v= attribute is the cheat code: when the user types and the prompt needs to know "what's at the cursor's previous position", it reads v= directly off the div. No buffered string state to keep in sync with the visual.
Active colours live in txtPal = { bg, fg } (indices into the table below). Change them with setcol <bg><fg> — e.g. setcol 02 is black on green.
| Index | 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 Grey | #aaaaaa |
| 8 Dark Grey | #555555 |
| 9 Blue | #5555ff |
| 10 Green | #55ff55 |
| 11 Cyan | #55ffff |
| 12 Red | #ff5555 |
| 13 Magenta | #ff55ff |
| 14 Yellow | #ffff55 |
| 15 White | #ffffff |
make_fonts.py (in the repo root) takes f12.7.png and writes the other 15 variants by re-tinting the alpha channel. Run it after editing the master sheet.