Content

FenTT reference

FenTT is a MediaWiki extension written in PHP 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. Chess game diagrams can be rendered in both color or B&W mode, and figurine movements or square of interests can be indicated as well. Diagrams rendered in B&W mode can also be copy-pasted into e.g. an office application.

FenTT is in fact a PHP implementation of HTMLTTChess, a javascript program that provides similar functionality. Besides being written in a different language, the major difference with HTMLTTChess is that the markup text that produces the chess diagrams is generated by the server, and hence the extension works even if the client has disabled javascript support.

Supported features

Here a summary of supported features:

Downloading the latest version of FenTT

The latest version of FenTT is available on GitHub or here.

Installing FenTT on Mediawiki

Usage — the <fentt> tag

Once the FenTT extension is installed, you can produce chess diagrams using the <fentt> tag. For instance, the wiki text

<fentt border="a1">rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR</fentt>
<fentt mode="bw" border="pad e5" style="font-size:3em">...K/.k../..../bb..</fentt>
<fentt border="ns">[xKx]./[xxx]n/.k../..../..../..../..../r.r.</fentt>
<table style="display:inline-block; vertical-align:middle">
  <tr><td><fentt border="e5">(+).../r(+++)/(+).../(+)...</fentt></td></tr>
  <tr><td><fentt border="e1">..../.nk./.n../...K</fentt></td></tr>
</table>

would produce the following output:

 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
 
   
 ♚ 
   
 ♝ 
      
  
  
  
  
  
  
  
  
   
   
   
    
    
    
    
  
✕♔✕ 
✕✕✕♞
 ♚  
    
    
    
    
♜ ♜ 
efgh 
  
  
  
  
    
   
    
    
•   
♜•••
•   
•   
8
7
6
5
  
  
  
  
    
  
   
   
    
 ♞♚ 
 ♞  
   ♔
4
3
2
1
efgh 

This chess diagram is rendered by a combination of HTML code and CSS styling, using the Chess Merida Unicode as web font.

The syntax of this tag is

<fentt [border="border-attr-list"] [mode="mode-attr"] [style="inline-style"] [class="class-attr"]>
  position-in-FEN
</fentt>

Output of the renderer can be customized by specifying attributes to the <fentt> tag. The possible values for each attribute and their effects are given further on this page.

position-in-FEN — the (modified) Forsyth-Edwards Notation

To render a specific chessboard position, you simply have to write it in Forsyth-Edwards Notation (FEN) notation, and enclose the result in a <fentt> tag. FEN is a simple and intuitive notation that is easy to read even prior rendering. Moreover it is supported by almost all mainstream chess game softwares, and hence game positions can be easily imported in FenTT.

In this case however, you must not specify the complete FEN, but only the first part corresponding to the position of pieces on the board. For instance, the FEN of the starting position is given by

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

To render such position, you must only enclose the first part of the notation in the <fentt> tag, and discard the parts corresponding to active color, castling, etc. This is illustrated below.

    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
<fentt>rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR</fentt>

Besides this change, the FEN parser is extended to support the following features:

  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
<fentt>3k/1N2/1NK1/4</fentt>

Variable board size — The size of the board is not limited to 8x8 but can be of any size, rectangle or square (with a maximum of 8 columns and 8 rows).

  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
<fentt>...k/.N../.NK./....</fentt>

Use . for empty squares — a dot (.) can be used to specify an unoccupied square. Using dots instead of figures increases the readability in wiki text.

  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
<fentt>
  . . . k/
  . N . ./
  . N K ./
  . . . .
</fentt>

White spaces — white spaces, tabs, newlines can be inserted within the notation to improve further the readability in wiki text.

  
  
  
  
    
   
   
    
  ••
  •♚
♖ ✕✕
    
<fentt>
  . . + +/
  . . + k/
  R . x x/
  . . . .
</fentt>

Extra symbols — a plus sign (+) or x character (x) can be used to indicate squares of interest on the chessboard.

  
  
  
  
    
   
   
    
    
   ♚
♖   
    
<fentt>
  [.].(. .)/
  [.].(.)k /
  R[.]{. .}/
  [.]. . .
</fentt>

Highlighting squares — one or several squares can be enclosed within brackets, parens or braces ((.) [.] {.}) to have them highlighted in a different color.

border-attr-list — Specifying the border style

The border attribute specifies the style of the border surrounding the chessboard. The syntax is as follows.

  border-attr-list := border-attr [border-attr-list]
  border-attr := double | pad | round | simple | square | border-visibility | border-origin
  border-visibility := [n][e][s][w]
  border-origin := a1 | ... | h8

Borders are show when the border attribute is set. The style is controlled by the attribute values as detailed below.


  
♘ 
 ♔
  

      
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
      
<fentt mode="bw" border="double">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad double">...k/.N../.NK./....</fentt>

double — In black&white mode, show a double border around the chessboard, with a round corner unless otherwise specified. In color mode, show a border according to the stylesheet.

efgh 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
 efgh 
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
      
<fentt border="e5" style="background-color: #CCC">...k/.N../.NK./....</fentt>
<fentt border="e5 pad" style="background-color: #CCC">...k/.N../.NK./....</fentt>

pad — Show borders and force renderer to print blanks for sides where coordinates are not shown. This way the chessboard is always surrounded by either a blank or a coordinate character, and hence it is easier to control alignment of the chessboard.


  
♘ 
 ♔
  

      
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
      
<fentt mode="bw" border="round">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad round">...k/.N../.NK./....</fentt>

round — Show a border with round corners around the chessboard, with a double border unless otherwise specified. In color mode, show a border according to the stylesheet.


  
♘ 
 ♔
  

      
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
      
<fentt mode="bw" border="simple">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad simple">...k/.N../.NK./....</fentt>

simple — Show a simple border around the chessboard, with a round corner unless otherwise specified. In color mode, show a border according to the stylesheet.


  
♘ 
 ♔
  

      
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
      
<fentt mode="bw" border="square">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad square">...k/.N../.NK./....</fentt>

square — Show a border with square corners around the chessboard, with a double border unless otherwise specified. In color mode, show a border according to the stylesheet.

      
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
      
      
8
7
6
5
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 
 
 
 
 efgh 
<fentt border="pad ne">...k/.N../.NK./....</fentt>
<fentt border="pad e5 sw">...k/.N../.NK./....</fentt>

[n][e][s][w] — Without board origin, select which border must be shown. If board origin is specified, select only the visibility of board coordinates (visibility of borders depends on visibility of outer squares as inferred from board origin).

Note that specifying board origin after border visibility overrides border visibility settings, as in example below.

 efgh 
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
      
<fentt border="pad sw e5">...k/.N../.NK./....</fentt>

The value sw has no effect when given before board origin.

 efgh 
 
 
 
 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
      
<fentt border="pad e5">...k/.N../.NK./....</fentt>

a1, ..., h8 — Specify the board origin, i.e. coordinates of bottom left square (eg. a1, e5, ...), and also show coordinates around the chessboard. In case where the position only shows a section of the complete chessboard, borders and coordinates for a given board side are shown only if outer squares for that side are visible in the selected section.

mode-attr — Color / B&W mode

The mode attribute selects the rendering mode, color or black&white. The syntax is as follows.

  mode-attr := bw | color

By default color mode is used when the mode attribute is missing. See further below for how to change this default.


♚ 
  
 ♘
  
<fentt border="double a5" mode="bw">k3/2N1/1KN1/4</fentt>

bw — Show the board in black&white.

Besides your personal taste, there are 3 main reasons to use black & white rendering:

  • Use it when your browser has some difficulty to render the colored version correctly.
  • Use it if you want to easily copy & paste the rendered output to eg. an external office application (you might need to change the font of the pasted text in order for the board to appear correctly).
  • Use it to generate printer-friendly version of your page.
 abcd
8
7
6
5
  
  
  
  
   
   
  
    
♚   
  ♘ 
 ♔♘ 
    
<fentt border="double a5" mode="color">k3/2N1/1KN1/4</fentt>

color — Show the board in color.

Colored boards have a rendering that is very close to the one found on e.g. Wikipedia (with the difference that on Wikipedia the chessboards are made up of small images). The problem with colored boards however is that the rendering uses advanced CSS3 layout techniques, and hence some uncompliant browsers might display them incorrectly.

style-attr — Passing inline style information

Use the style attribute to pass inline style information to the board table element. The style-attr value must be CSS-compliant style, and will be applied to the chessboard table element. The amount of styling that can be applied this way is limited. Use class attribute for finer control on the style.

efgh 
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
8
7
6
5
<fentt border="e5" style="font-size:32pt;">
  +.../
  R+++/
  +.../
  +...
</fentt>

Change locally the font size.

efgh 
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
8
7
6
5
<fentt border="e5" style="background-color: #CCC;">
  +.../
  R+++/
  +.../
  +...
</fentt>

Change board background color.

See below for further instructions.

class-attr — Passing class style information

Use the class attribute to pass class style information to the board table element. Using this attribute allows for finer and deeper control of the board style by defining custom class in the stylesheet.

4
3
2
1
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
 abcd
<fentt border="a1" class="fentt1">(+).../(R+++)/(+).../(+)...</fentt>

A simple customization.

4
3
2
1
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
 abcd
<fentt border="a1" class="fentt2">(+).../(R+++)/(+).../(+)...</fentt>

A more complex customization.

See below for further instructions.

Setting default values

To set the default values for the <fentt> tag attributes, simply use an empty <fentt> tag, i.e. without any FEN position. In that case, the values of each attribute given for that tag become the new default values for all subsequent <fentt> tag. If an attribute is not specified, then the default value is cleared. We give here some examples.
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
  
  
♙♙
♔♕
  
  
  
  
   
    
   
   
   ♚
    
  ♖ 
   ♖
<fentt mode="color" border="ne"></fentt>
<fentt>...k/.N../.NK./....</fentt>
<fentt mode="bw" border="">..../..../PPPP/RKBQ</fentt>
<fentt>...k/..../..R./...R</fentt>

This sets color mode with a (double) border as the default style.

♚ 
  
 ♘
  
  
  
  
  


    
    
♜♚♝♛
♟♟♟♟
    
    
  
♘ 
 ♔
  
<fentt mode="bw" style="font-size:2em"></fentt>
<fentt>k.../..N./.KN./....</fentt>
<fentt mode="color">rkbq/pppp/..../....</fentt>
<fentt>...k/.N../.NK./....</fentt>

Here we select black&white mode with bigger fonts as the default style.

Customizing the FenTT style

There are basically four ways to customize the style of chessboards generated by FenTT:

Editing the main stylesheet

The default styles used for color-mode and B&W-mode output are defined in the CSS file FenTT.css. This file is split in two parts: a base stylesheet and a custom stylesheet. The base stylesheet contains definition that shouldn't be changed or overridden. Doing so may break the rendering of chessboards. The custom stylesheet however can be freely edited to for instance change the size of the font, the color of squares, etc.

You can adapt the definitions of the custom stylesheet either by editing this file directly, or by overriding the definitions with another external stylesheet or with an internal stylesheet. Each style element that can be changed is clearly commented in the file.

Specifying inline style

You can specify inline style to be applied to a single chessboard using the style attribute. Note however that this method is quite limited since it can only change the styles attached to the root <table> element of generated chessboards. Without going to far into gory technical details, this means that you can only change (cfr. CSS file FenTT.css):

If you need more flexibility, you must then use the class attribute instead.

Specifying class style

This method allows you to change all custom styles attached to a group of chessboards, ie. including color of squares and color of highlighted squares. This is a very convenient method to use different rendering styles in a same Wiki page. For instance, you can define a style for the starting position of a game you want to study, and define another style for showing intermediate positions.

To do so, you simply define a new class-attr name, and define the styles to apply to chessboards you have attached this class to through the class attribute. You can define these styles either in an external stylesheet or in an internal stylesheet. The syntax to follow is identical to the one of the custom stylesheet in the CSS file FenTT.css. See the source code of this page for an example.

Relying on the containing parent class style

This method simply relies on standard features of the cascading style sheet, namely that you can change the style of a child element based on the class of the containing parent.

 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
Here is the starting position in a Wikipedia-like style.
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
Another starting position

Font-based rendering vs. image-based rendering

The usual method to render chessboards in Wiki text / 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 the FenTT extension is quite different. Instead of using fixed-size images, it uses characters (glyphs) stored in a chess TrueType font. 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:

License

Copyright (C) 2007-2016 Michaël Peeters.

The FenTT MediaWiki extension comes with ABSOLUTELY NO WARRANTY. This is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

See file COPYING for more details.