Content

Download

HTMLTTChess sample page

Change default mode for this page

Click this button to change the default mode (color / B&W) for this page.

Basics

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR Default border style - Default border style is solid with round corner (BW only).
B.../R.xx/..xk/..+x Extra symbols - Use '+' and 'x' in the FEN notation to indicate some squares of interests on the board.
(B).../(R.xx)/..(x)k/..+(x) Highlighting - Surround squares with brackets ( ... ) to have them highlighted in a different color.
+.../ R+++/ +.../ +... Blanks - HTML may also includes blanks (space/tabs/newlines) for better clarity.

border attribute

No attributes

This is the default rendering if no attribute is specified in the c:chess tag

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR

border = solid

(B&W mode) Show a solid border around the chessboard. If not specified, default corner style is round.

(Color mode) Show a border according to the stylesheet.

RNBQKBNR/PPPPPPPP/8/8/8/8/pppppppp/rnbqkbnr

border = double

(B&W mode) Show a double border around the chessboard. If not specified, default corner style is round.

(Color mode) Show a border according to the stylesheet.

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR

border = round

(B&W mode) Show a border with round corners around the chessboard. If not specified, default border style is solid.

(Color mode) Show a border according to the stylesheet.

.+.+./+...+/..n../+...+/.+.+. .+.+./+...+/..n../+...+/.+.+. .+.+./+...+/..n../+...+/.+.+.

border = square

(B&W mode) Show a border with square corners around the chessboard. If not specified, default border style is solid.

(Color mode) Show a border according to the stylesheet.

.+.+./+...+/..n../+...+/.+.+. .+.+./+...+/..n../+...+/.+.+. .+.+./+...+/..n../+...+/.+.+.

border = origin

Specify the origin of the leftmost bottom 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 as well.

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR k.../..N./.KN./.... ...k/.N../.NK./....
..../.KN./..N./k... ..../.NK./.N../...k

border = [n][s][e][o]

Select which border must be shown. If board origin is specified, it controls visibility of board coordinates, but visibility of borders still depends on the visibility of outer squares.

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR ..k./..Q./..K./.... ..../..K./..Q./..k. ..../kQK./..../.... ..../..../.KQk/....
..k./..Q./..K./.... ..../..K./..Q./..k. ..../kQK./..../.... ..../..../.KQk/....

[n][s][e][o] can override visibility of coordinates but cannot override visibility of borders as defined by the board origin.

Without specification of board origin:

++++/..../..../.... ..../..../..../++++ +.../+.../+.../+... ...+/...+/...+/...+ ..k./..Q./..K./.... .+.+./+...+/..n../+...+/.+.+.
xkx./xxxN/.K../..../..../..../..../R.R. +......./R+++++++/+....... ...k/.N../.NK./.... ..../.KN./..N./k...

With specification of board origin:

++++/..../..../.... ..../..../..../++++ +.../+.../+.../+... ...+/...+/...+/...+ ..k./..Q./..K./.... .+.+./+...+/..n../+...+/.+.+.
xkx./xxxN/.K../..../..../..../..../R.R. +......./R+++++++/+....... ...k/.N../.NK./.... ..../.KN./..N./k...

Note that specifying board origin after border visibility overrides current border visibility settings (as in second example below).

...k/.N../.NK./....
<c:chess border="double a1 ne">...k/.N../.NK./....</c:chess>
...k/.N../.NK./....
<c:chess border="double ne a1">...k/.N../.NK./....</c:chess>

border = pad

Use pad to force renderer to print blanks for side 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.

Without border = pad

++xx/..../..../++xx ++xx/..../..../++xx

With border = pad

++xx/..../..../++xx ++xx/..../..../++xx

mode attribute

mode = color / bw

Use mode = color / bw while specifying a position to force the output mode (color / b&w) of that position. Use mode = color / bw without specifying a position to set the default mode for all subsequent board positions.

(Setting default mode to color) Here some boards using the default mode, except for the one in the middle for which usage of bw mode is forced.

k.../..N./.KN./.... rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR ...k/.N../.NK./....
..../.KN./..N./k... ..../.NK./.N../...k

(Setting default mode to bw) Here some boards using the default mode, except for the one in the middle for which usage of color mode is forced.

k.../..N./.KN./.... rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR ...k/.N../.NK./....
..../.KN./..N./k... ..../.NK./.N../...k

cstyle attribute

Use the cstyle attribute to pass inline style information to the board table element.

+.../ R+++/ +.../ +...    +.../ R+++/ +.../ +...
To change locally the font size ... ... or to change board background color.

cclass attribute

Use the cclass attribute to pass class style information to the board table element.

(+).../(R+++)/(+).../(+)...    (+).../(R+++)/(+).../(+)...
To make simple customizations... ... or more complex ones.

Changing style based on parent's class

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR
Here is the starting position in a Wikipedia-like style.
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR
Another starting position

© Copyright 2007-2016 (http://mip.noekeon.org).

Last modified on

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