Dynamic diagrams - Your new chess publishing tool

by Albert Silver
1/12/2017 – In chess publishing, there is nothing quite as ubiquitous as the chess diagram. From the first chess books in the 1500s to the latest articles on the web 500 years later, diagrams are a key element of the tale. It may seem astonishing therefore that even with today’s ease of technology no one has attempted to improve on it, other than the artwork. Until now that is, as ChessBase introduces a set of tools to include dynamic diagrams in your online articles.

Even in works dating back to the 1500s, the earliest chess books to ever be published, the idea and importance of a chess diagram was well understood.

In the representation above (photo by Jon Crumiller), Damiano’s circa 1524 book called “Libro da imparare giocare a scachi” (‘Book to learn how to play chess’) one can already see diagrams used.

Although print books are still confined to using diagrams to help illustrate the flow of a game being shared, web sites such as ChesssBase News and many others use full game replayers that allow readers to play through all the moves as well as with comments.

It comes to no surprise that ChessBase has created its own spin on this with games lists and an integrated chess engine to analyze games, which everyone is invited to use for free in their pages, but that does not eliminate the interest in diagrams, which have their distinct uses as well.

The most obvious purposes are to show only a single position, or a problem to solve, where a large replayer would be overkill. Fine, you say, but what is so special about these new diagrams?

Static diagram


In the diagram above you can see a position taken from Adolf Anderssen – Carl Mayet. The great German player has just played the spectacular (and 100% correct) 22. Ng4!! The move leads to a forced mate and a very picturesque situation with the two knights threatened by the pawns. This is a typical no-frills diagram.

The code for this position is:

<div class="cbdiagram"
data-fen="r1b2r2/pp4k1/1bpp1q1p/5ppQ/2B2NN1/2P5/P5PP/R1B1R2K b - - 0 22">

Note the use of data-buttons="0" to disable the buttons.

Dynamic diagram


Above is the exact same position as before, but you will notice a pair of arrows below it. This is the digital equivalent of just setting up a position on a board and being able to move the pieces. The arrow buttons (or keys on your keyboard) let you easily take back or replay your main line. The little white or black ball in the bottom right corner tells you whose move it is to play.

The code for this position is:

<div class="cbdiagram"
data-fen="r1b2r2/pp4k1/1bpp1q1p/5ppQ/2B2NN1/2P5/P5PP/R1B1R2K b - - 0 22">

Problem/solution diagram


Finally we reach the most obviously useful variation of this new tool. Above you have a position (also taken from Anderssen-Mayet) in which it is White to play and win. If you play the correct move 20. Rxe5! You will see a message appear over the board saying “Correct move”, and if you play any other move, it will say “Wrong move, try again”.

You will also notice under the board two further buttons: the life saver, which is to ask for a hint, and the green light, meaning you want the solution.

This compact simple way allows you or anyone to post problems to be solved.

<div class="cbdiagram"
data-fen="r1b2r1k/pp2q2p/1bpp4/4nppQ/2B2N2/2P5/P2N2PP/R1B1R2K w - - 0 20"
data-legend="White to move and win."
data-hint="Think 'double attack'."

Note the addition of data-legend, data-hint, and data-solution.

Adding dynamic diagrams to your pages

The purpose of this new article is not just to show off this new tool for the ChessBase News pages, but to show off this new tool for your pages, should you so wish. There is no cost involved, and adding the code to your blog (if it allows javascripts) or web site is as easy as can be.

Full instructions

The above link shows the main instruction page, and while complete, it leaves out a couple of details that the less technically inclined may stumble on.

At the top of your HTML code, in the <head>  section, you need to add these three lines:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />
<script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
<script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>

Even if you are only interested in the plain board image, using this tool means you have no need to create a special image file or other, plus you can easily add the replayer to your pages since the three line above are the same code used. For more click on this tutorial to embed the PGN replayer.
Now, let’s add the specific code for the diagram. The basic code looks like this:

<div class="cbdiagram"
data-fen="b5k1/1qrr1p1p/4nQ2/5N2/6P1/1P3P1P/1P6/R1R3K1 w - - 0 0"
data-legend="White to Move - Mate in Three.">

The code is fairly self-explanator:

The data-size is the width in pixels, and you can change this size accordingly.

The data-legend is the italicized text that appears under the diagram. This is optional and is merely there as a convenience.

The data-fen is the only part you may find tricky. FEN is a system to code a chess position in a single line of data. There are plenty of programs that allow you to create a FEN from a position, including of course ChessBase and Fritz. However, even if you do not own any of these programs, you can use the instructions that follow by downloading the 100% free ChessBase Reader.

Getting the FEN code for a position

In ChessBase (and ChessBase Reader) or Fritz, open a game and go to the position you wish. Here you can see the exact position from Anderssen-Mayet that would make a nice quiz position.

With it on the board, go to the top, and click on Copy Position. This will copy the FEN code to the Windows clipboard. To paste it, as anything in Windows, just click Ctrl-V.

For the diagram code, we just replace the sample FEN with the correct one, and we are set to go. There are a few other options also available, such as adding the hint information, the solution, and even arrows or highlighted squares.

Our final sample code to illustrate looks like this:

<div class="cbdiagram"
data-fen="r1b2r1k/pp2q2p/1bpp4/4nppQ/2B2N2/2P5/P2N2PP/R1B1R2K w - - 0 20"
data-legend="White to move and win. Every option available was used"
data-hint="Think 'reginacide'."

And the end result looks like this:


Born in the US, he grew up in Paris, France, where he completed his Baccalaureat, and after college moved to Rio de Janeiro, Brazil. He had a peak rating of 2240 FIDE, and was a key designer of Chess Assistant 6. In 2010 he joined the ChessBase family as an editor and writer at ChessBase News. He is also a passionate photographer with work appearing in numerous publications.
Feedback and mail to our news service Please use this account if you want to contribute to or comment on our news page service


Rules for reader comments


Not registered yet? Register

sicilian_D sicilian_D 1/13/2017 01:28
thank you! will try it out.
Mr TambourineMan Mr TambourineMan 1/13/2017 04:36
As long as one doesnt have the choice of choosing chess pieces and boards it aint dynamic.
Mrudenko Mrudenko 1/13/2017 04:49
An excellent and very useful tool! It would be really nice if you could provide the FEN for "Tactics Training" positions in order to allow saving interesting puzzles for later review.
benedictralph benedictralph 1/13/2017 08:32
Interesting. But what happens when one tries to save such a page? Obviously as a PDF won't preserve such diagrams but is there some other format that will?
bro bro 1/13/2017 10:10
It is possible to adding your dynamic diagrams to Chess News articles for example about chess puzzles. For example all Christmas Puzzles are simple pictures.
anotherone anotherone 1/13/2017 11:27
this was really necessary
expectnomercy expectnomercy 1/13/2017 07:10
Please make it so that it also supports chess960! The game replayer does not seem to understand castling in chess960. It would also be awesome if other chess variants would be supported, but I would settle for chess960 for now :)
dengtianle dengtianle 1/14/2017 07:28
santiago2 santiago2 1/14/2017 05:59
michelhoetmer@me.com: you have resolve with wordpress?
expectnomercy expectnomercy 1/14/2017 07:32
michelhoetmer@me.com When I tested the code in my Blogger blog, it also had a problem with the code. The first line that goes in the <head> section is the problem. When I changed it to <link href='https://pgn.chessbase.com/CBReplay.css' rel='stylesheet' type='text/css'/> it worked.
ERICTANG ERICTANG 1/15/2017 09:53
I get errors when I tried this:

This is my head section:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://pgn.chessbase.com/CBReplay.css" rel="stylesheet" type="text/css"/>
<script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
<script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>

I put this in the body:
<div class="cbdiagram"

These are the errors that I got:
http://localhost:8080/Common/Media/Chess/LightSquaresCoolerBrighterSofter.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/Common/Media/Chess/DarkSquaresLessSatur.png Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/Common/Media/Chess/MarginBrighter.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/Common/Media/Chess/OrangeBrighterSoftBacklightLessSatur.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/Common/Media/Chess/Pieces/DiagramTTFritz44.png Failed to load resource: the server responded with a status of 404 (Not Found)
expectnomercy expectnomercy 1/16/2017 10:54
@ERICTANG I am assuming that the problem is with these two lines <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script> If you look at the Full instructions https://docu.chessbase.com/reader/cbdiagram.html It says there that "The "jQuery" file in the second line is not needed if you have it already in your web page (quite common). jQuery version 1.12 is sufficient." Therefore I would try removing the line <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> and seeing if it works then.
martien martien 1/19/2017 02:04
Thanks for this great feature! I just wanted to point out that on my mobile device there is a lot of empty space below the diagrams. I see this both on this page as well as on that of my Chessclub's website.
Unfortunately on my website, the hint-button doesn't work. This probably has to do with my Wordpress theme, which gives some interference with the Chessbase script.
The page I have applied this to is: http://www.dubbelschaak.nl/intern/spanning-terug-in-topcompetitie/

But nonetheless, thanks for this!
expectnomercy expectnomercy 1/24/2017 10:42
Is it possible to use different colored arrows? If it is possible, how can it be done? Please respond, thank you.
DrAmbar DrAmbar 8/8/2017 11:37
I tried it out, but it works only partly. Some images used by the javascript have to be copied and unless I have the links to these I am unable to proceed. Specifically, the error is:
DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
The required files appear to be somewhere in /Common/Media/Ribbons/Reader/Status ....
Anyone wanting to try may cut-paste the following code to a file on his desktop and then double-click it:
-------Start code--------
<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css"/>
<script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
<script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>
<div class="cbreplay">
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6
-------------------------End code-------------------