Content

• Reference
• Chess Merida Unicode

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:

• Notation:
  • Forsyth-Edwards compatible notation.
  • Extra symbols for eg. piece movement (. or x).
  • Highlighting of squares of interest.
• Rendering:
  • Truetype font based rendering, using either local or web font.
  • Color mode or printer-friendly black&white mode.
  • Default mode specification / inline mode specification.
• Size:
  • Fixed size.
  • Variable size (eg. multiple of browser default font size).
• Style:
  • Stylesheet-based.
  • Default style.
  • Inline style.
  • Class style.
• Export:
  • Black&white board can be copy-pasted in external applications.

Downloading the latest version of FenTT

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

Installing FenTT on Mediawiki

• Download and place the file(s) in a directory called FenTT/ in your wiki extensions/ folder. At least the following files must be copied:
  • chess_merida_unicode.ttf
  • FenTT.css
  • FenTT.php
• For MediaWiki 1.25+, add the following code at the bottom of your LocalSettings.php:

  wfLoadExtension( 'FenTT' );

• For MediaWiki 1.24 or earlier, add the following code instead:

  require_once "$IP/extensions/FenTT/FenTT.php";

• Done - Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

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>

<fentt>...k/.N../.NK./....</fentt>

<fentt>
  . . . k/
  . N . ./
  . N K ./
  . . . .
</fentt>

<fentt>
  . . + +/
  . . + k/
  R . x x/
  . . . .
</fentt>

<fentt>
  [.].(. .)/
  [.].(.)k /
  R[.]{. .}/
  [.]. . .
</fentt>

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>

<fentt border="e5" style="background-color: #CCC">...k/.N../.NK./....</fentt>
<fentt border="e5 pad" style="background-color: #CCC">...k/.N../.NK./....</fentt>

<fentt mode="bw" border="round">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad round">...k/.N../.NK./....</fentt>

<fentt mode="bw" border="simple">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad simple">...k/.N../.NK./....</fentt>

<fentt mode="bw" border="square">...k/.N../.NK./....</fentt>
<fentt mode="color" border="pad square">...k/.N../.NK./....</fentt>

<fentt border="pad ne">...k/.N../.NK./....</fentt>
<fentt border="pad e5 sw">...k/.N../.NK./....</fentt>

<fentt border="pad sw e5">...k/.N../.NK./....</fentt>

<fentt border="pad e5">...k/.N../.NK./....</fentt>

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>

<fentt border="double a5" mode="color">k3/2N1/1KN1/4</fentt>

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.

<fentt border="e5" style="font-size:32pt;">
  +.../
  R+++/
  +.../
  +...
</fentt>

<fentt border="e5" style="background-color: #CCC;">
  +.../
  R+++/
  +.../
  +...
</fentt>

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.

<fentt border="a1" class="fentt1">(+).../(R+++)/(+).../(+)...</fentt>

<fentt border="a1" class="fentt2">(+).../(R+++)/(+).../(+)...</fentt>

See below for further instructions.

Setting default values

<fentt mode="color" border="ne"></fentt>
<fentt>...k/.N../.NK./....</fentt>
<fentt mode="bw" border="">..../..../PPPP/RKBQ</fentt>
<fentt>...k/..../..R./...R</fentt>

<fentt mode="bw" style="font-size:2em"></fentt>
<fentt>k.../..N./.KN./....</fentt>
<fentt mode="color">rkbq/pppp/..../....</fentt>
<fentt>...k/.N../.NK./....</fentt>

Customizing the FenTT style

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

• Edit the main stylesheet.
• Pass inline style information using the style attribute.
• Pass class style information using the class attribute.
• Define new styles based on the class of the containing parent.

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):

• The size of the font.
• The background color of the board (b&w mode), or the background color of coordinates (color mode).
• The foreground color of the board (b&w mode), or the foreground color of coordinates (color mode).

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.

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:

• Since font glyphs are actually vector-based graphics, chessboards can be rendered at any size without loss of quality.
• A same web page can contain chessboards of different sizes, and so web masters can use this feature to improve the layout of their pages, adapting the size to each context (start position, intermediate moves...).
• Sizes of chessboards are specified by the attached stylesheet. By using the em CSS unit, chessboard size automatically adapts to the size of the surrounding text.
• Also, visitors may also change the size of chessboards by increasing the default font size in their browser, or by defining their own user stylesheet.
• It is easy to convert color chessboard in a given HTML page to their black&white equivalent to obtain a high-quality printer-friendly version of that page.
• Chessboard rendered in black&white can be easily exported to an office-like application through copy&paste.

There are some minor drawbacks though:

• The rendering requires a specific font on the client. If the client does not have that font installed locally, the font is downloaded from the server as a web font (via CSS3). This might slightly increase the page rendering time; also the rendering might vary from one browser to another.
• Color mode is a bit tricky, and uses CSS and tables to layout the chessboards correctly. So some uncompliant browsers may render the pages incorrectly. In these cases, black&white mode can be used instead since it is easier to render correctly. However large efforts have been done to make the script compatible with available OS/browsers.
• The quality of the rendering largely depends on the font rendering engine of your platform. But ClearType (WinXP/Vista) or font anti-aliasing (Linux) give excellent results, even at low pixel per em.

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.