The Chess Variant Pages Menu

ffen2diag: a tool to make chess and fairy chess diagrams

ffen2diag is a simple tool, that allows to include chess and chess variant diagrams in html pages. ffen2diag is based on Javascript.

How to call ffen2diag

1. Include the library

At any spot in the html-file, before really using the diagrams (e.g., in the head), you must include a command that calls the file at If you are in the top folder of, you would use:
<SCRIPT LANGUAGE="JavaScript" src="lib/javascript/ffen2diag.js"><!--
//--> </SCRIPT>
If you are in a file that is one level deep, i.e., in a folder that is in the main directory (e.g., a file with a name like
<SCRIPT LANGUAGE="JavaScript" src="../lib/javascript/ffen2diag.js"><!--
//--> </SCRIPT>
If you are in a file that is two levels deep, e.g., a file with a name like, then use:
<SCRIPT LANGUAGE="JavaScript" src="../../lib/javascript/ffen2diag.js"><!-- 
//--> </SCRIPT>
If you want to use the tool outside the domain, please email Hans Bodlaender. Non-commercial use of the tool is free.

2. Call a subroutine that makes the diagram

To make now a diagram, we can give a javascript that generates the diagram. Calling the script goes with either ffen2diag, ffen2diag1, or ffen2diag2. If one is `one level deep', use ffen2diag1, with between (" ") a string that describes the position. This string is in `Fairy Forsythe Edwards Notation (explained below.):
<SCRIPT LANGUAGE="JavaScript" ><!-- 

//--> </SCRIPT>
And this will be the effect:

At two levels deep, use ffen2diag2:

<SCRIPT LANGUAGE="JavaScript" ><!-- 
//--> </SCRIPT>

One can also explicitly give the path to the collection of pictures that one wants to use. This allows also to use the tool with different sets of pictures, (when such are made.) In this case, use ffen2diag, and give the path in the second argument: end with a /. As the pictures from are standard used, the following has the same effect as ffen2diag1:

<SCRIPT LANGUAGE="JavaScript" ><!-- 
//--> </SCRIPT>


In a FFEN-string, you describe the position rowwise, from top to bottom, from left to right. You can use:
  • Upper case characters for white pieces: K for white king, Q for white queen, B for white bishop, N for white kNight, R for white rook, P for white pawn.
  • Lower case characters for black pieces: k, q, b, n, r, p for black king, queen, bishop, knight, rook, and pawn.
  • A number for one or more empty squares: 1: one empty square; 8: eight empty squares, 12 for twelve empty squares in one row.
  • A slash / to mark the end of a row.
  • A dot . for one empty square.
  • A - for denoting a square that is not there. This is for chess variants with boards that are not a rectangle.
  • A name between ( ) to denote a piece with a longer name. See an overview of the type of pieces there are. A white piece starts with an upper case letter; a black piece with a smaller case letter. E.g.: (Airplane) or (airplane).
  • Some pieces have rotated forms; an r is added for each 90 degree rotation behind the name; use for example (kr), (krr), or (krr) for rotated black kings, (Pr), (Prr), (Prrr) for rotated white pawns.
For example,
<SCRIPT LANGUAGE="JavaScript" ><!--
//--> </SCRIPT>

Diagrams with marked columns and rows

It is also possible to mark the columns and rows with numbers and letters. For this one uses ffen2diag1b, ffen2diag2b, or ffen2diagb, i.e., the only change with respect to unlabeled rows and columns is a b at the end of the name of the method called. For example, one can use when `one level deep':
And this will be the effect:

The maximum numbers of rows and columns are around 30, but your diagrams won't look any good anyhow if they are so big.

Colored pieces

If you want to use colored pieces, then call instead of ffen2diag.js the file ffen2diagcol.js. Some of the pieces have colored variants; write the piece between brackets `(' and `)' and put the number at the end; e.g. (r2) for a yellow rook; (k3) for a green king, (general4) for a red general, and (ship5) for a blue ship.


In this way, it is relatively simple to include chess variant diagrams into your hmtl-pages without much effort. In case of questions, please contact us. If there is interest in this tool for other websites, please email us. Non-commercial use is free, but do not call the tools on the site from another site, but let us send you files you can put on your own site. The tool also works with a browser when you view the files at home, i.e., when not connected to the internet, when correctly used.

If one want to use different graphics for the pieces, one needs: for each piece two gif-files, one on a black square, and one on a white square, and gif-files for an empty black and an empty white square. All these gif files must have exactly the same number of pixels horizontally and vertically. Email if you want to make such a set of pictures.

See also

Written by Hans Bodlaender
WWW page created: September 18, 2001.