How to Generate HTML Pages with PGN Variations

You should read this text from within the LT-PGN-EDITOR


Click on the pieces on the pgn board in the left frame to make some valid moves. Copy the pgn movetext from the textbox near the board to the input field in the top frame and click the button "Generate HTML". After this a HTML page with clickable pgn moves should appear in the frame at bottom right. Test it by clicking the moves. After that reload the LT-PGN-EDITOR by clicking the "Reload" or "Back" button of your browser, in order to continue to read this text.
Example: 1.e4 e5 2.d4 exd4 3.Qxd4

Add a Variation

Input the pgn text of the main line into the input field and generate the HTML page. Click in the generated HTML page on the move where the new variation starts and after this generate the pgn text of the variation by clicking on the board. Copy the pgn text of the variation to the input field where you want to insert it and surround it with parentheses () or brackets []. If the variation starts with a black move, copy also the previous white move (with move number) and replace the move by "...". If the next move after a variation is a black move, then it must start with move number + "...". After that click the button "Generate HTML" and test the result.
Example: 1.e4 e5 2.d4 exd4 (2. ... d6 3.d5) 3.Qxd4

Multiple Variations

To generate multiple variations, simply input a variation into another variation, behind another variation or into or behind the main line.
Example: 1.e4 e5 2.d4 exd4 (2. ... d6 3.d5 (3.dxe5 dxe5 4.Qxd8+ Kxd8) 3. ... f5 4.exf5 Bxf5 ) 3.Qxd4 (2. ... Nf6 3.dxe5 Nxe4 4.Qd4 d5 5.exd6 Nxd6)
Note: If a "variation" doesn't consist of a single move (but only comment), then no other variation can be included in this variation (see example below).
Example:1.e4 e5 (Not bad!(Not possible!)) 2.d4 exd4 (2. ... d6 3.d5) 3.Qxd4
Don't use a semicolon to separate variations (this example will not work correctly):
1.e4 e5 2.d4 exd4 [2. ... d6 3.d5 (3.dxe5 dxe5 4.Qxd8+ Kxd8) 3. ... f5 4.exf5 Bxf5 ; 2. ... Nf6 3.dxe5 Nxe4 4.Qd4 d5 5.exd6 Nxd6] 3.Qxd4
Use this syntax instead (every variation in its own braces):
1.e4 e5 2.d4 exd4 [2. ... d6 3.d5 (3.dxe5 dxe5 4.Qxd8+ Kxd8) 3. ... f5 4.exf5 Bxf5 ][ 2. ... Nf6 3.dxe5 Nxe4 4.Qd4 d5 5.exd6 Nxd6] 3.Qxd4

Adding Comment

You can write any comment at the start of a variation, at the end of a variation or after a black move. If you want to write comment after a white move you must write move number + "..." before the next black move or you must include the comment into {}. You may only use numbers within your comment, when there is a letter in front of it (for instance "e4") or when it is in braces (for instance "{game 4}"). You may add any marks directly behind the moves (for instance "!", "?!", "+-", "#").
Example: Game 4 started with 1.e4 e5 followed by 2.d4 {the same opening as game 3} exd4!? (after 2. ... d6 3.d5 is not bad for white) 3.Qxd4!! is very aggressive 3. ... Nc6 4.Qd1 and black will soon be mated

Using SAN and FEN

If you want to use a certain SAN or FEN, then input the SAN or FEN value into the input field in the left frame and click the button "Apply" before you generate any pgn text by clicking on the bord and before you generate the HTML page.
Example: Load the file black_king_walk.html for a FEN example.
When you have clicked the link then you must reset the FEN string in the left frame (delete the FEN and click Apply) before you try the other examples.

Adding Diagrams

You can include (static) chess diagrams into the generated HTML page. This is useful if you want the page to be printed or if you want to create a non-JavaScript webpage. To display a chess diagram at a certain position in the main line or in a variation, write the halfmove number at this position and surround it with parentheses () or brackets []. When you want to show the pawn structure then add .0 (pawns only) to the halfmove number. Use this especially together with the "no script" checkbox checked. In order to rotate the chess diagrams, click in the left frame on the checkbox "rotate board" before you click the "Generate HTML" button.
Example: (0) 1.e4 e5 2.d4 exd4<Cd4R><Ad1d4G> (4)(2. ... d6 3.d5 (3.dxe5 dxe5 4.Qxd8+ Kxd8<Ac1g5R><Af7f6G> (8)) 3. ... f5 4.exf5 Bxf5 (8.0)) 3.Qxd4 (5)(2. ... Nf6 3.dxe5 Nxe4 4.Qd4 d5 5.exd6 Nxd6 (10))


Click with the right mouse on the generated HTML page, choose "View page source" and save the source as a html file. You can further edit this file like any other html file. Alternatively you can generate the HTML "as text" and copy it from the textarea to an empty file in an editor.
The following applies only to HTML pages, which have been generated with the "no script" checkbox unchecked. In the final version of the file you should change the line
//else setTimeout('OpenGame()',400);
else setTimeout('OpenGame()',400);
so that the game will automatically be loaded when the page is loaded. If you don't allow the viewer of the page to change moves by clicking on the board (you could do this by the JavaScript command "AllowRecording(true)"), then you can also remove the line
<a href='javascript:OpenGame()'><b>RELOAD GAME</b></a><br>
in the HTML file. In your final HTML page you will see, that all the commented game text is put into the function
If the commented game text contains much more comment than valid moves, then it makes sense to remove the comment from the string which is given to the function (however all valid moves in the string must remain unchanged!). In this way the game loads a bit faster (and is also a bit faster parsed), which can make a difference if the client uses a slow computer or a webbrowser with a slow JavaScript engine.

Hints, Suggestions, Bug Reports

If something doesn't work as it should or you have any suggestions for further versions of the LT-PGN-VIEWER, then you could write me an email. However, if something doesn't work as it should, then this doesn't mean automatically, that the bug is in the LT-PGN-VIEWER. Especially, if you copy and paste the text from any annotated game in the input field and click the "Generate HTML" button, there is a probability (which grows with the move count and comment length), that there is an error in the game text, so that the generated HTML page behaves "strange". To find the reason in such a case, here are some hints what you could do: Generate the HTML page only for a limited number of moves and check in this way out, at which position the error occurs. Put all your comment in braces; if the error still occurs, remove all comment and try again. The most common error will probably be caused by comment which is not included in braces {} and which contains numbers (so the script is assuming this is a move number) or any possible valid moves within the comment. If you found an error, which you think is a bug in the LT-PGN-VIEWER, I would be glad when you would send me a minimal example which reproduces the error together with your bug report.