{chess}

A chess position from FEN as an SVG board, with marked squares and arrows.

Games Single tags

Syntax 

{chess 'fen'}
{chess 'fen', flip, highlight='e2, e4', arrow='e2-e4, g8-f6', size=320, title='Name'}

Parameters

fen
The position in FEN. The piece placement alone will do; side to move, castling, en passant and the two counters are checked when written.

Options

flip
Bare option: turn the board, Black at the bottom.
highlight
Squares to mark, separated by commas: 'e2, e4'.
arrow
Arrows from square to square, separated by commas: 'e2-e4, g1-f3'.
size
Width and height in pixels, 360 when not given (80 at least); the board shrinks to fit a narrower container.
title
The accessible name of the board. Chess position, White to move when not given.

Description

{chess} draws a chess position as inline SVG: the board, the pieces as shapes of PAD's own (no font, no image), the coordinates along the edges, and optionally marked squares and arrows - for the last move, a plan or a threat. It is drawn on the server and needs no script.

The position is written in FEN (Forsyth-Edwards Notation). Only the first field, the placement of the pieces rank by rank from rank 8, is required: {chess '8/8/8/4k3/8/8/4K3/8'}. When the other fields are written - side to move, castling rights, en passant square, half-move clock and move number - they are checked, and the side to move is part of the description.

flip turns the board so Black plays up. highlight= marks squares and arrow= draws arrows from the middle of one square to the middle of another, over the pieces. size= sets the width and height in pixels.

The board is an image for a screen reader (role="img") with a title and a description listing every piece by side and kind, the side to move, the marks and the arrows. Under the strict check a FEN with a wrong number of ranks, an unknown piece letter or a wrong field is an error, as is a square or an arrow that is not on the board. The colours are --pad-chess-light, -dark, -white, -black, -ink, -mark, -arrow and -text on .pad-chess.

Examples

The starting position

Only the placement field of the FEN, at a smaller size.

Templateexamples/chess/1-start.pad 
{chess 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR', size=240}
Resultopen alone
Chess position, White to move White: king e1; queen d1; rooks a1, h1; bishops c1, f1; knights b1, g1; pawns a2, b2, c2, d2, e2, f2, g2, h2. Black: king e8; queen d8; rooks a8, h8; bishops c8, f8; knights b8, g8; pawns a7, b7, c7, d7, e7, f7, g7, h7. White to move. a 1 b 2 c 3 d 4 e 5 f 6 g 7 h 8

After 1.e4, seen by Black

The full FEN, the board flipped, the last move marked and two answers drawn as arrows.

Templateexamples/chess/2-move.pad 
{chess 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1', flip, highlight='e2, e4', arrow='c7-c5, e7-e5', size=280}
Resultopen alone
Chess position, Black to move White: king e1; queen d1; rooks a1, h1; bishops c1, f1; knights b1, g1; pawns a2, b2, c2, d2, e4, f2, g2, h2. Black: king e8; queen d8; rooks a8, h8; bishops c8, f8; knights b8, g8; pawns a7, b7, c7, d7, e7, f7, g7, h7. Black to move. castling KQkq. en passant e3. marked e2, e4. arrow c7 to c5. arrow e7 to e5. a 1 b 2 c 3 d 4 e 5 f 6 g 7 h 8

A position from data

The FEN from the page's PHP, with a title naming the position for a screen reader.

Templateexamples/chess/3-opera.pad 
{chess $fen, highlight='d1, d8', arrow='g5-d8', size=280, title='Morphy against the Duke and the Count, Paris 1858: 17.Rd8 mate'}
PHPexamples/chess/3-opera.php 
<?php

  $fen = '1n1Rkb1r/p4ppp/4q3/4p1B1/4P3/8/PPP2PPP/2K5 b k - 1 17';

?>
Resultopen alone
Morphy against the Duke and the Count, Paris 1858: 17.Rd8 mate White: king c1; rook d8; bishop g5; pawns a2, b2, c2, e4, f2, g2, h2. Black: king e8; queen e6; rook h8; bishop f8; knight b8; pawns a7, e5, f7, g7, h7. Black to move. castling k. marked d1, d8. arrow g5 to d8. a 1 b 2 c 3 d 4 e 5 f 6 g 7 h 8

See also

  • {sudoku} A sudoku as a table, the givens bold - and with solve, solved on the server.
  • {crossword} A crossword made from a list of words: a numbered SVG grid with the Across and Down clues.
  • {chart} Draws a chart as inline SVG on the server - 46 kinds, from bars and lines to sankeys, maps of a hierarchy and org charts.