Last week, It struck me that it should be possible to emulate a teletext display using HTML, CSS and JavaScript. As it is possible to use custom fonts - using the @font-face CSS rule - I knew that there was at least a cat in hell’s chance of pulling off something that was reasonably close.
So, behold, my graphics-free CEEFAX replacement:
http://www.worldofpaul.com/teletext/Some points to consider:
1 - This has not been tested in Windows. It should work, but as my Windows HD had a PSU failure the other week, it’ve not been able to test. I’ve tested it in Safari and Firefox on a Mac.
2 - It uses three specially created fonts that are copies of BBC Micro type faces - specifically the MODE 7 font and the blocky characters. I also create a half width version of the teletext font so I can do double height text.
3 - I have tried to follow the “rules” of teletext. That is a colour change, switch to graphics and text, etc. all require a control character in the flow of text, and that control character is displayed as a space. I break rule this in a couple of places, just to keep my sanity in tact.
4 - Data in the News and Weather maps pages come from various BBC RSS feeds. So it’s using live data.
5 - The weather map uses the correct Teletext dimensions for characters across and down the page. It seems a little “tall” to me. Other pages seem more comfortable height-wise, but are infact shorter vertically. It may be down to it being on an “alien” kind of display that makes it look wrong.
6 - iOS does not like it that much. I am not sure why - maybe Mobile Safari has an issue with the encoded web fonts. It’s either that or its display of the character is out of step with Safari on my Mac (I know that the handling of this character can be questionable - though in my fonts it’s the dame width as the regular space).
I have more ideas to expand this - but it requires some thought and pondering.
Anyway, enjoy!
