For a while, I’ve been working on my CEEFAX simulator. It does many things that teletext did in the UK - and it uses web fonts to achieve the blocky teletext look.

However, creating graphics has been a chore. It has involved working stuff out on a grid, choosing the characters to display and setting colours. I kind of got fed up with that. While it reminded of my days mucking about with teletext graphics on a BBC Micro by typing the charcaters in, I think we can do better today.

So I made this. It’s a click to make kind of thing. Click the grid, and dots will appear. In the little preview to the right, you’ll see a small, live, preview of what you are making. That’s displayed using my web fonts. It's HTML being generated live based on what you do in the design area.

Below that, you’ll see HTML being created. More on that below, but it’s all the code you need to add the image (if you are using the fonts) to your site.


On the editor page, there is a link to download the files you need to make your design work outside of this site. The file contains an HTML file, and a CSS folder with the Teletext Graphics font inside. Open the HTML file in a text editor, copy the HTML from the HTML box on the design page, and paste it into the HTML after the <!-- Paste your HTML here --> comment. Save, and open in your browser. If all goes well, you’ll see your design in all it’s teletext lovliness. The HTML contains all the CSS necessary, so you should get an idea about how this all works and how it han be included in your own website.


Right-click on any of the blocks to change its function from a character (eg.creating images like z) to background or foreground control blocks. The preview will update, and so will the design area. Each block will change its appearance to reflect its function. Currently, these “control blocks” are showing stripes to indicate that they are doing something.I’ll be applying the grey matter to improving that feedback later on.


I have added the facility for you to change the graphics type, so you can have solid (z) or saparated (z) graphics. This is a bit experimental at the moment, but it seems OK for use. The HTML output needs a bit of work now, as there are three things that can change and three things that interact. Right now, it seems to work, but it’s probbaly not as effient as it could be. You’ll find this in the menu when you right click on the design area.


No. But’d like to include this in the future. Note that the Flood Fill tool may well over write anything you create if you leave a pixel gap.


Highly likely. This is an experiment, and certainly a work in progress. I’ll update/beautify as I go along. The code created may not be as nice as it could be either. I'll leave post editing to the user for the moment.


Nope. Not yet. Maybe I’ll let you dump the data array as a text file, and reimport it later. For now, you need to remember that leaving the page will cause your image to be lost forever.


Yup - I’ve added a Drawing and Erase tool. Use the Draw tool to turn pixels ON, use the Erase tool to turn them off. You can also click and drag for free hand drawing/erasing.


If you want just a portion of the image, select the CROP tool and position and resize the box. That will cause a fragment of the code needed to draw just the selected area. NOTE: currently experimental. Will only generate the code in the rectangle selection. Any contorl blocks outside of that will have no effect on the resulting code. You’ll need to edit as necessary.


You can load an image to trace. It will appear behind the painting area. Use the TRACE tools to adjust the width/height and size of the image to be traced. This will not be incuded in the final output.


You can fill a shape. Draw an enclosed shape using the Drawing Tool. Click on the Flood Fill tool and the click inside the shape you have drawn.

This tool work by turning ON (white) pixels if they are OFF (black by default). If they are ON then nothing will happen. Flood fill may take a while depending on the size of the area being filled, so be patient.

Important: if you leave a pixel gap, the flood fill will spill out and will probably cover all your work. Use this tool wisely.


Very tentative, this. There IS an undo for when you use the flood fill tool, but not anywhere else at the moment. The option will appear top left when it’s available. If you flood fill and then draw a pixel, the undo will be lost.


There are a lot of these in the output. For HTML, you need to create some kind of scaffolding to hold it all together. Some browsers regard a string of normal spaces as white space, and treat it as one. So, instead of using the usual space, I’m outputting the hard space entity instead. This will help hold your designs together.


Err, no. I’m not really wanting to write a text processor on top of this. The idea is that you draw your designs, and copy them to a web design applicaton or text editor and type your text in afterwards. (I am beginning to think that this may need to be thought about some more.)


Do you use Freeway from Softpress to create your website? So do I, and I’ve been scratching my head over this. I think I may have a solution, but it's not great. To get Freeway friendly output, click on the Freeway tool in the tool bar (coming soon). Then copy the HTML output to the clipboard, and head over to Freeway. Draw and HTML item on the page, click in it, and go to Edit>Paste Markup. You will need to tidy it up afterwards, as Freeway's HTML import is not great, and it seems to get a bit muddled in places.