The HTMLTTChess Package


The HTMLTTChess package is a combination of a javascript, a css and an html file that allows the rendering of nice chessboards in HTML at any size or color, by using TrueType fonts and without the need of extra images. Chessboards can be rendered in both color or B&W mode, and figurine movements or square of interests can be indicated as well. Chessboards rendered in B&W mode can also be copy-pasted into e.g. an office application.

Here is some screenshots of chessboard positions generated by this package:

Windows XP - screenshot 1 Windows XP - screenshot 5 Windows XP - screenshot 3

Want more? Just drop an eye here!

See also here for a summary of supported features.

Table of Content

In these pages, you'll find:

History and License Information

The HTMLTTChess package is freeware. It is released under the GNU General Public License. Please feel free to use it, distribute it or modify it. I hope that you'll find it useful, and that you'll be happy with the rendering. If you make any changes or improvements, I would be really happy to hear from . Any other comments or suggestions are of course very much welcome as well.

Check this page for updates.

v1.0 (August 13, 2007)


I'd like to thank designer Armando Hernandez Marroquin, for freely providing the very beautiful and complete font Chess Merida.

Also I'd like to thank Gilles Van Assche for his valuable guidances into the hellish paradise of Internet technologies.

Supported features

Here a summary of supported features:

Font-based Method vs. Image-based Method

The usual method to render chessboards in HTML is to combine several small images together to form the complete chessboard. The server stores several small images corresponding to each combination of Black & White figurines on light & dark squares, and the HTML page simply pick the right image for each square on the board to render a given chess position. See for instance the Wikipedia page on Chess for an example of this method.

The method followed here by HTMLTTChess is quite different. Instead of using fixed-size images, it uses characters (glyphs) stored in a chess truetype font to print a given chessboard. The font contains all necessary glyphs to render either black&white chessboards or colored chessboards. Black&White chessboards are very similar to those seen in chess books, and colored chessboards are very close to those rendered on eg. Wikipedia. This method brings several advantages:

There are some minor drawbacks though:

© Copyright 2007 (
© Copyright Lalit Patel for the CSS/Javascript font detector

Last modified on

Free PHP scripts for download Visit W3Schools Valid XHTML 1.0 Transitional Chess Validate Anti-Spam