This is a demo of the @techandsoftware/teletext package on npm, which renders a teletext display using SVG graphics in the browser. The package provides an API to draw on the screen. The demo source code is available from the git repo.
Tap or click the buttons below, or use your keyboard keys, to try out different API functions.
|Toggle reveal (no effect if the page doesn't contain concealed characters)
|Displays a test page out of the several built-in pages. Pages courtesy of Teletext Archaeologist
|Toggle mixed mode display
|Draws a page using the loadPageFromEncodedString() API. Page courtesy of Teletext Archaeologist
|Draw mosaic graphics using a pixel art scaling algorithm.
This uses @techandsoftware/teletext-plugin-smooth-mosaic
|Draws a page using the setPageRows() API and attribute generation
|Toggle boxed mode display (display is blank if the page doesn't contain boxed characters)
|Change the font (see the console logs for the font in use)
|Add enhancements. Requires level 1.5 or 2.5
|Generate a randomised page
|Change the aspect ratio
|Clears the screen
|Set the teletext screen height to 80% of the browser window height. (For this demo the screen width needs to be > 767 pixels for this to work due to the responsive sizing at smaller widths).
|Go to the next g0 character set
|Switch between using a font or graphics to render the teletext mosaics
|Show a test page with double width and double size characters. You'll also need to select level 2.5