A working teletext decoder: mosaic graphics, carousel pages and hidden answers.
Every page is 25 rows of 40 seven-bit bytes, rendered by the original Level 1 rules: control codes occupy a whole cell and show as spaces (or as the held mosaic under Hold Mosaics), colour and mode changes take effect after their cell while background, hold, conceal and size take effect at it, double height swallows the row below, and in graphics mode most codes are 2x3 sextant mosaics, contiguous or separated, while capitals blast through. Letters come from a 5x9 dot matrix in the English character set (0x23 is the pound sign), doubled and smoothed with the diagonal character rounding of the SAA5050 chip. Pages arrive in a carousel, so the header's page counter rolls until your page comes round. The weather map is a noise-generated island encoded into mosaics where every colour change costs a cell, and page 106 runs Conway's Life at sextant resolution.
Try it. Type a three digit page number (100 to 106, or 199 for the engineering test page) or press the remote's buttons. R, G, Y and C (or F1 to F4) are the fastext keys, ? or Space reveals concealed answers, H holds a carousel, M mixes the text over a picture, the arrow keys step through pages and subpages, and clicking a page number on screen jumps to it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a teletext page viewer with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Represent a page as 25 rows of 40 bytes, exactly like broadcast teletext. Render it into a small offscreen canvas (each cell 12 by 20 pixels) and draw that scaled up to fill the window with a 4:3 feel.
- Use the eight teletext colours (black, red, green, yellow, blue, magenta, cyan, white). Bytes below 0x20 are control codes: 0x01 to 0x07 switch to coloured text, 0x11 to 0x17 switch to coloured mosaic graphics, 0x1D sets the background to the current colour, 0x1C goes back to black, 0x0D starts double height. A control code takes up a whole cell and shows as a space, and colour changes take effect from the next cell.
- In graphics mode, draw a character as a 2 by 3 grid of blocks: bits 0, 1, 2, 3, 4 and 6 of the code switch on the six blocks.
- Draw the letters with the browser's monospace font for now, and make an index page with a coloured title bar, a few lines of text and a big mosaic picture made from a function you plot at 2 by 3 resolution.
Once that works, make it beautiful:
- Replace the font with your own small bitmap font, doubled in size, and smooth the diagonal steps (character rounding).
- Add a header row with a page number and a live clock, and several pages. Let me type three digits to request a page, and make the header's page counter roll through the numbers until the page "arrives".
- Add four coloured fastext links on the bottom row, concealed text revealed by a key, and scanlines plus a soft glow so it looks like a 1980s television.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as hold mosaics and separated graphics, a weather map drawn in mosaics, or a carousel of rotating subpages.
