Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer

Für die pgn-Viewer von Chess Tempo und ChessBase wird gezeigt, wie sie in HTML-Seiten integriert werden und welche weiteren Konfigurationsmöglichkeiten bestehen.

walter

08 Feb. 2019

pgn-Viewer ChessBase Schach pgn Trainingsfrage HTML pgn4web Chess Tempo

Inhaltsverzeichnis

Einordnung des Artikels

Interaktive Schach-Elemente für HTML-Seiten: Übersicht
- Interaktive Schach-Elemente für HTML-Seiten: Taktik-Aufgaben
- Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer
- Interaktive Schach-Elemente für HTML-Seiten: Schach-Programm und Live-Übertragung von Schach-Turnieren

Einführung

Die Abkürzung pgn steht für portable game notation und hat sich als Standard zum Speichern von Schach-Partien durchgesetzt; vermutlich alle Schach-Programme können inzwischen pgn-Dateien lesen und – auch wenn sie intern ein anderes Dateiformat verwenden – in pgn exportieren.

Eigentlich sind pgn-Dateien reine Text-Dateien, die für den Menschen leicht lesbar sind; da sie strengen Regeln für ihren Aufbau und die erlaubten Symbole gehorchen, sind sie auch maschinen-lesbar. Eine weitere wichtige Eigenschaft ist, dass man in einer pgn-Datei nicht nur eine Schach-Partie sondern beliebig viele Schach-Partien ablegen kann (sie werden einfach durch eine Leerzeile getrennt).

In den folgenden Abschnitten werden einige pgn-Viewer (also "pgn-Betrachter") besprochen, die

eine (oder mehrere) Schach-Partien aus einer pgn-Datei auf einem Schach-Brett darstellen und
die leicht in eine HTML-Seite eingebunden werden können.

Es gibt noch zwei weitere Möglichkeiten, wie man Schach-Partien in eine HTML-Seite integrieren kann:

Export aus einem Schach-Programm
Plugins für CMS (CMS = Contents Mangement System).

Diese beiden Möglichkeiten sollen hier nicht besprochen werden, da sie auf speziellen Schach-Programmen beziehungsweise CMS beruhen. Das Wichtigste ganz kurz:

Zu 1.: Nahezu alle Schach-Programme bieten heute die Möglichkeit, eine (oder mehrere) Schach-Partien als HTML-Datei zu exportieren. Dabei werden alle nötigen Dateien erzeugt:

eine HTML-Datei, in der ein pgn-Viewer (meist als iframe) integriert ist,
die javascript-Dateien, die die Funktionalität etwa zum Navigieren in der Schach-Partie und zum Bedienen des Schach-Brettes bereitstellen,
die css-Datei, die die Farben und andere Stil-Elemente definiert.

Die unten besprochenen pgn-Viewer arbeiten kaum anders: der große Unterschied ist, dass die nötigen Zusatz-Dateien (javascript und css) aus dem Internet geladen werden und dass man Code-Schnipsel selber in eine HTML-Seite einbauen muss – die Technik ist identisch.

Zu 2.: Die Plugins zu CMS arbeiten meist noch einfacher; es reicht oftmals durch einen entsprechenden Befehl anzugeben, wo die pgn-Datei beginnt und wo sie endet, dazwischen wird die pgn-Datei plaziert. Das Plugin sorgt dann dafür, dass die nötigen Dateien (javascript und css) und die Ansicht des Schach-Brettes generiert werden.

Übersicht über die besprochenen pgn-Viewer

pgn-Viewer	Funktionalität
Chesstempo pgn-Viewer	Anzeige einer pgn-Datei
pgn-Viewer von pgn4web	Anzeige einer pgn-Datei
Chessbase pgn-Viewer	fast schon ein komplettes Analyse-Programm: Anzeige eines pgn-Files, Varianteneingabe, Analyse mit Engine, Abspeichern der pgn-Datei

Testdateien im pgn-Format

Es empfiehlt sich, für Tests der pgn-Viewer geeignete pgn-Dateien zu verwenden, etwa

pgn-Datei mit typischen Kommentierungssymbolen, die in Schach-Programmen verwendet werden,
pgn-Datei mit mehreren Partien,
pgn-Datei, in der eine bestimmte Anfangsposition vorgegeben ist und die Züge von dort aus enthalten sind; dabei ist die Anfangsposition durch ihren FEN-Code bestimmt;
pgn-Datei mit Kommentierungshilfen, die nur von ChessBase eingesetzt werden: farbige Pfeile und Markierung von Feldern,
pgn-Datei mit eingebauter Trainingsfrage (wird auch nur von ChessBase unterstützt).

Die letzten beiden Eigenschaften (farbige Markierungen und Trainingsfragen) gehören nicht zur Spezifikation von pgn-Dateien. Sie wurden zum Beispiel von ChessBase mit dem Dateiformat .cbh (für Schach-Datenbanken) eingeführt; diese Formatierungen können auch in pgn-Dateien exportiert werden und werden vom pgn-Viewer von ChessBase angezeigt. Man kann diese Formatierungen aber auch direkt in der pgn-Datei erzeugen – was weiter unten erklärt wird (siehe Feld-Markierungen, Pfeile und Trainingsfragen).

Abbildung 1: Stellung nach 9...Qd7??

Die folgenden Listings zeigen pgn-Dateien, die man zum Testen der pgn-Viewer verwenden kann.

pgn-Datei mit typischen Kommentierungssymbolen:

[Event "Um die Wurst (komm.)"]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[ECO "C50"]
[PlyCount "31"]

1. e4 e5 2. Nf3 Nc6 3. Nc3 Nf6 4. Bc4 Bc5 5. O-O O-O 6. d3 d6 7. Bg5 Bg4 8. Nd5
Nd4 9. Qd2 Qd7 $4 {unüberlegt: man kann die Symmetrie nicht beliebig lange
erhalten} (9... c6 $1 10. Nxf6+ gxf6 11. Bh4 $1 Bxf3 (11... Nxf3+ $142 12. gxf3
Bxf3 $14) 12. Qh6 $16) 10. Bxf6 Nxf3+ (10... Bxf3 11. Ne7+ Kh8 12. Bxg7+ (12.
Qh6 $4 Ne2+ 13. Kh1 Bxg2+ 14. Kxg2 Qg4+ 15. Kh1 Qf3#) 12... Kxg7 13. Qg5+ Kh8
14. Qf6# {Capablanca - N.N., New York, 1918}) 11. gxf3 Bh5 $18 12. Ne7+ Kh8 13.
Qh6 Rg8 14. Nxg8 Rxg8 15. Qxh5 gxf6+ 16. Kh1 1-0

Abbildung 2: Rybkatz schlägt den Springer auf f6 und überlegt ...

pgn-Datei mit mehreren Partien

[Event "Um die Wurst "]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[ECO "C50"]
[PlyCount "31"]

1. e4 e5 2. Nf3 Nc6 3. Nc3 Nf6 4. Bc4 Bc5 5. O-O O-O 6. d3 d6 7. Bg5 Bg4 8. Nd5
Nd4 9. Qd2 Qd7 $4 {unüberlegt: man kann die Symmetrie nicht beliebig lange
erhalten} (9... c6 $1 10. Nxf6+ gxf6 11. Bh4 $1 Bxf3 (11... Nxf3+ $142 12. gxf3
Bxf3 $14) 12. Qh6 $16) 10. Bxf6 Nxf3+ (10... Bxf3 11. Ne7+ Kh8 12. Bxg7+ (12.
Qh6 $4 Ne2+ 13. Kh1 Bxg2+ 14. Kxg2 Qg4+ 15. Kh1 Qf3#) 12... Kxg7 13. Qg5+ Kh8
14. Qf6# {Capablanca - N.N., New York, 1918}) 11. gxf3 Bh5 $18 12. Ne7+ Kh8 13.
Qh6 Rg8 14. Nxg8 Rxg8 15. Qxh5 gxf6+ 16. Kh1 1-0

[Event "Um die Wurst - Rückkampf"]
[Date "2019.02.08"]
[White "Walter"]
[Black "Rybkatz"]
[Result "1-0"]
[ECO "E01"]
[PlyCount "30"]

1. d4 d5 2. c4 c6 3. Nc3 e6 4. Nf3 Nf6 5. g3 dxc4 6.
e4 6... b5 7. e5 Nd5 8. Bg2 a5 9. O-O Ba6 10. Ne4 Nd7 11. Nfg5 h6 12.
Nxe6 fxe6 13. Qh5+ Ke7 14. Nd6 Qb6 15. Qf7+ Kd8 1-0

pgn-Datei aus Anfangsposition (dabei ist die Ausgangsstellung durch den FEN-Code festgelegt):

[Event "Endspieltraining"]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[SetUp "1"]
[FEN "4k3/8/2K5/3P4/8/8/8/8 w - - 0 0"]
[PlyCount "8"]

1. Kc7 Ke7 2. d6+ Ke8 3. d7+ Ke7 4. d8=Q+ Ke6 1-0

Abbildung 3: Ausgangsstellung im Endspieltraining mit Weiß am Zug

Abbildung 4: Leichtes Spiel für Rybkatz.

pgn-Datei mit Pfeilen und Felder-Markierungen:

[Event "Um die Wurst"]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[ECO "C50"]
[PlyCount "31"]

1. e4 e5 2. Nf3 Nc6 3. Nc3 Nf6 4. Bc4 Bc5 5. O-O O-O 6. d3 d6 7. Bg5 Bg4 8. Nd5
{[%csl Gf6]} Nd4 9. Qd2 Qd7 10. Bxf6 {[%cal Rd2g5,Gd5e7]} Nxf3+ (10... Bxf3 11.
Ne7+ Kh8 12. Bxg7+ Kxg7 13. Qg5+ Kh8 14. Qf6# {Capablanca - N.N., New York,
1918}) 11. gxf3 Bh5 12. Ne7+ Kh8 13. Qh6 Rg8 14. Nxg8 Rxg8 15. Qxh5 gxf6+ 16.
Kh1 1-0

pgn-Datei mit Trainingsfrage:

[Event "Um die Wurst"]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[ECO "C50"]
[PlyCount "31"]

1. e4 e5 2. Nf3 Nc6 3. Nc3 Nf6 4. Bc4 Bc5 5. O-O O-O 6. d3 d6 7. Bg5 Bg4 8. Nd5
Nd4 9. Qd2 Qd7 10. Bxf6 Nxf3+ (10... Bxf3 {[%tqu "Wie gewinnt Weiß?"]} 
11. Ne7+ Kh8 12. Bxg7+ Kxg7 13. Qg5+ Kh8 14. Qf6# {Capablanca - N.N., New York, 1918}) 
11. gxf3 Bh5 12. Ne7+ Kh8 13. Qh6 Rg8 14. Nxg8 Rxg8 15. Qxh5 gxf6+ 16. Kh1 1-0

Wissenswertes über das pgn-Format

Nebenvarianten, Kommentare und Klammern in einer pgn-Datei

Betrachtet man die obigen Beispiele für pgn-Dateien, fallen sofort einige Regeln auf:

Die Hauptvariante wird als laufender Text in der üblichen Notation geschrieben.
Nebenvarianten werden in runden Klammern angegeben.
Nebenvarianten können beliebig ineinander verschachtelt werden (Klammern in einer Klammer).
Kommentare werden in geschweiften Klammern angegeben.
Eckige Klammern werden für die Annotationen vor der eigentlichen Partie angegeben; dabei ist in der Spezifikation festgelegt, welche Annotationen vorkommen können (wie Spieler, Turnier, Datum, Eröffnung und so weiter).
In den letzten beiden Beispielen werden geschweifte und eckige Klammern verwendet, etwa in {[%csl Gf6]} . Diese Notation ist in der pgn-Spezifikation nicht vorgesehen und wurde nachträglich hinzugefügt. Sie erlaubt, Felder zu markieren und Pfeile in ein Diagramm einzuzeichnen. Nicht alle Schach-Programme und pgn-Viewer unterstützen diese Notation. Sie wird weiter unten genauer erklärt.

NAG: Numeric Annotation Glyphs

Um Züge zu kommentieren, stehen im pgn-Format die üblichen Zeichen zur Verfügung, die in Schachbüchern oder im Informator verwendet werden. Also etwa das Ausrufezeichen beziehungsweise das Fragezeichen um einen guten beziehungsweise schlechten Zug zu kennzeichnen. Laut Spezifikation des pgn-Formates werden diese Zeichen als NAG = Numeric Annotation Glyphs bezeichnet und in der Form $i geschrieben, wobei i eine Zahl von 0 bis 139 sein kann. So stehen zum Beispiel $1 und $2 für einen guten Zug (!) und einen schlechten Zug (?).

Die meisten Schachprogramme bieten eine Palette zur Eingabe dieser NAG an, so dass sich niemand die Kodierung merken muss. Umgekehrt können pgn-Viewer die NAG lesen und wieder in die menschen-lesbaren Symbole verwandeln. (Ob sie tatsächlich alle NAG erkennen und übersetzen ist eine andere Frage.) Die Beispiele oben für pgn-Dateien wurden mit einem Schach-Programm erzeugt und anschließend als pgn exportiert; daher enthalten sie NAG.

Feld-Markierungen, Pfeile und Trainingsfragen

Zusammen mit dem Dateiformat .cbh für Schach-Datenbanken hat ChessBase eingeführt, dass man

Felder farbig kennzeichnen kann,
farbige Pfeile in ein Diagramm einfügen kann,
Trainingsfragen erstellen kann (die Lösung ist vorerst verborgen).

Die Notation dafür soll kurz erklärt werden. Man muss dabei aber bedenken, dass manche pgn-Viewer diese Notation einfach übergehen.

Hat man kein Schach-Programm zur Verfügung, das diese Eingaben erlaubt, aber einen pgn-Viewer, der sie anzeigt, kann man sich leicht behelfen: Man kann jederzeit eine pgn-Datei nachbearbeiten, indem man die entsprechenden Befehle eingibt – man muss nur die Syntax kennen.

Um ein Feld farbig zu kennzeichnen schreibt man etwa den Befehl: {[%csl Re4]} . Dabei stehen die äußeren geschweiften Klammern für einen Kommentar, die inneren eckigen Klammern zusammen mit %csl für ein farbiges Feld (coloured sqare). Die Angabe Re4 sagt, dass das Feld e4 rot (R = Red) gekennzeichnet wird.

Mögliche Farben sind:

R = Red
G = Green
B = Blue
Y = Yellow (ist meist kaum sichtbar).

Sollen mehrere Felder gekennzeichnet werden, gibt man eine Liste an, die durch Kommas getrennt ist. So erzeugt {[%csl Re4,Ge5]} ein rotes Feld e4 und ein grünes Feld e5.

Die Regeln für farbige Pfeile (coloured arrow) sind ganz ähnlich: {[%cal Rd2g5,Gd5e7]} erzeugt einen roten Pfeil von d2 nach g5 und einen grünen Pfeil von d5 nach e7.

Für Trainingsfragen (training question) ist die Syntax deutlich komplizierter, daher wird hier nur der wichtigste Spezialfall erklärt: Eine pgn-Datei soll durch eine Trainingsfrage, etwa "Wie gewinnt Weiß?", unterbrochen werden. Die Partie-Notation nach der Frage ist nicht sichtbar. Erst wenn man "Lösung anzeigen" anklickt, wird die weitere Notation sichtbar – bis zur nächsten Trainingsfrage.

Die Syntax für diesen Spezialfall lautet: {[%tqu "Wie gewinnt Weiß?"]}

Man könnte hier noch Lösungshinweise geben, Punkte vergeben und ein Feedback geben, die allgemeine Form lautet:

{[%tqu "Question", "Help1","Help2", move1,"Feedback1", points1, move2,"Feedback2", points2]}

Kodierung einer .pgn-Datei

Laut Spezifikation des pgn-Formates werden die Dateien nach ISO 8859/1 (Latin 1) kodiert; Schach-Programme, die pgn-Dateien exportieren, sollten sich an diese Spezifikation halten.

Sollen die pgn-Dateien aber in HTML-Seiten integriert werden, kann dies zu einem Problem führen: HTML-Seiten sind oft gemäß UTF-8 kodiert, so dass Sonderzeichen (wie Umlaute) falsch angezeigt werden.

Wer also pgn-Dateien in HTML-Seiten einbauen möchte, muss darauf achten, dass beide Dateien die identische Kodierung besitzen. Im ersten Beispiel oben enthält ein Kommentar einen Umlaut, nämlich unüberlegt bei 9... Qd7 . Achten Sie bei Ihren Tests darauf, ob der Umlaut richtig dargestellt wird!

Der Chess Tempo pgn-Viewer

Der pgn-Viewer von Chess Tempo wird ausführlich vorgestellt auf den Seiten:

https://chesstempo.com/pgn-viewer.html
https://chesstempo.com/pgn-usage.html

Integration in eine HTML-Seite

Für die Integration des pgn-Viewer von Chess Tempo benötigt man vier Dinge:

Zwei javascript-Dateien und eine .css-Datei, die im Kopf der HTML-Datei geladen werden.
Die anzuzeigende pgn-Datei, auf die später im Konstruktoraufruf verwiesen wird.
Zwei div-Elemente für das Schach-Brett beziehungsweise die Anzeige der Züge aus der pgn-Datei.
Den Konstruktoraufruf für den pgn-Viewer.

Laden der zwei javascript-Dateien und der .css-Datei; dies geschieht im Kopf der HTML-Datei:

<!-- Support libraries from Yahoo YUI project -->  
<script type="text/javascript"  
    src="https://chesstempo.com/js/pgnyui.js">  
</script>   
<script type="text/javascript"  
    src="https://chesstempo.com/js/pgnviewer.js">  
</script>  
<link  
 type="text/css"   
 rel="stylesheet"   
 href="https://chesstempo.com/css/board-min.css">  
</link>

Die pgn-Datei kann sich unter einem beliebigen Pfad befinden, sie muss nur später beim Konstruktoraufruf richtig referenziert werden. Dort, wo sich der pgn-Viewer später in der HTML-Seite befinden soll, werden die beiden div-Elemente eingebaut:

<div id="demo-container"></div>  
<div id="demo-moves"></div>

Dabei ist zu beachten: Der Name der id ist nur zum Teil frei wählbar:

container steht für das Schach-Brett und darf nicht verändert werden;
moves steht für die Anzeige der Züge und darf auch nicht verändert werden;
das Präfix, hier demo , ist eigentlich frei wählbar, es wird im Konstruktoraufruf als boardName gesetzt. Stimmen diese Namen nicht überein, werden die div-Elemente nicht erzeugt.

Der Konstruktoraufruf von PgnViewer :

<script>  
    new PgnViewer(  
      { boardName: "demo",  
        pgnFile: 'pgn/rybkatz.pgn',  
        pieceSet: 'leipzig',   
        pieceSize: 46  
      }  
    );  
</script>

Zur Erklärung:

Zeile 3: Der boardName wird gleich demo gesetzt (in Übereinstimmung mit dem Präfix in den beiden div-Elementen, siehe oben).

Zeile 4: Die Variable pgnFile erhält den Pfad zur pgn-Datei (hier befindet sich im Ordner, in dem sich die HTML-Datei befindet, ein Ordner namens pgn, der eine Datei rybkatz.pgn enthält). Ist der Pfad falsch angegeben, erhält man beim Laden der HTML-Seite eine Fehlermeldung.

Zeile 5 und 6: Hier wird der Figurensatz pieceSet und die Figurengröße pieceSize (in Pixel) gesetzt. Wird kein Figurensatz gewählt, wird per default pieceSet: 'merida' gesetzt; mit diesem Figurensatz sind die Figuren am deutlichsten zu erkennen

Der javascript-Code wird am Besten am Ende des body der HTML-Datei plaziert.

Eine komplette HTML-Datei könnte wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Chess Tempo: PGN-Viewer</title>
        
        <!-- Support libraries from Yahoo YUI project -->  
        <script type="text/javascript"  
            src="https://chesstempo.com/js/pgnyui.js">  
        </script>   
        <script type="text/javascript"  
            src="https://chesstempo.com/js/pgnviewer.js">  
        </script>  
        <link  
         type="text/css"   
         rel="stylesheet"   
         href="https://chesstempo.com/css/board-min.css">  
        </link>
        
        <link  
         type="text/css"   
         rel="stylesheet"   
         href="css/board_moves.css">  
        </link>
    </head>
    <body>
    
        <h1>Chess Tempo pgn-Viewer</h1>
    
        <div id="css-container"></div>  
        <div id="css-moves"></div>
        
        <!-- Mit angepasstem CSS -->
        <script>  
        new PgnViewer(  
          { boardName: "css",  
            pgnFile: 'pgn/Rybkatz.pgn',
            pieceSize: 46  
          }  
        );  
        </script>
    </body>
</html>

Zur Erklärung:

Zeile 4: Als Kodierung der HTML-Seite ist UTF-8 angegeben; wenn später eine pgn-Datei eingebaut wird, ist darauf zu achten, dass sie die identische Kodierung besitzt.

Zeile 7 bis 18: Hier werden die Dateien (wie oben erklärt) von Chess Tempo geladen.

Zeile 20 bis 24: Hier wird eine eigene css-Datei geladen, die weiter unten (bei Anpassungsmöglichkeiten) beschrieben wird. Wichtig sind dabei zwei Dinge:

Die eigene css-Datei muss nach der css-Datei von Chess Tempo geladen werden, da sie einige css-Klassen überschreiben soll.
Die id , die in den beiden <div> -Elementen vergeben wird, muss in der css-Datei eingesetzt werden (genauere Erklärung folgt unten).

Zeile 23: Die zu ladende css-Datei befindet sich im Ordner css und hat den Namen board_moves.css.

Zeile 30 und 31: Die beiden <div> -Elemente stehen an der Stelle, an der das Schach-Brett und die Anzeige der Züge später zu sehen; sie sind nach der Überschrift plaziert.

Zeile 34 bis 41: Der Konstruktoraufruf von PgnViewer füllt die <div> -Elemente mit Inhalt. Dieses <script> muss nach den <div> -Elementen plaziert werden und die Namenskonvention beachten, die oben erklärt wurde.

Zeile 37: Aus dem Ordner pgn wird die Datei Rybkatz.pgn geladen.

Zeile 37: Die Größe der Figuren pieceSize definiert die Größe des Schach-Brettes; ein Figurensatz ist nicht angegeben, wodurch per default merida geladen wird.

Die Funktionalität des pgn-Viewers

Der pgn-Viewer besitzt folgende Funktionalitäten:

Das pgn-File kann mehrere Partien enthalten. Es wird dann eine Drop-Down-Liste über dem Schach-Brett angezeigt, aus dem man eine Partie wählen kann.
Es gibt die üblichen Schalter, um die Partie vorwärts oder rückwärts durchzuspielen.
Die Partie kann man sich vorführen lassen; per default geschieht ein Zug pro 0.8 Sekunden, die Zeitspanne lässt sich einstellen.
In der Anzeige der Züge kann man einen beliebigen Zug (in der Hauptvariante oder einer Nebenvariante) anwählen und das Brett wird entsprechend aktualisiert.
Soll nicht eine komplette Partie gezeigt werden, sondern nur ein Ausschnitt ab einer gewissen Anfangsposition, so muss die pgn-Datei entsprechend vorbereitet werden: Die Anfangsposition wird über den FEN-Code festgelegt, die Notation der Züge startet wie im FEN-Code definiert.

Was der pgn-Viewer nicht kann:

Man kann keine Züge (etwa für Nebenvarianten) eingeben und somit ein neues pgn-File erzeugen.
Man kann das pgn-File nicht über den pgn-Viewer herunterladen.
Es gibt keine Engine, die Stellungs-Bewertungen berechnet.
Die speziellen Befehle für farbige Felder und Pfeile sowie Trainingsfragen werden nicht erkannt (man sieht sie zwar in der Anzeige der Züge, sie haben aber keinen Einfluss auf die Darstellung des Brettes).

Anpassungsmöglichkeiten für den pgn-Viewer

In den default-Einstellungen hat der pgn-Viewer sehr wenig Kontraste und längere Zeit vor dem Schach-Brett ist sehr ermüdend. Es gibt zahlreiche Möglichkeiten, wie man die Darstellung des Schach-Brettes und der Anzeige der Züge verändern kann.

Im Beispiel der kompletten HTML-Seite von oben wurde eine zusätzliche css-Datei namens board_moves.css eingebaut.

Diese css-Datei könnte folgendermaßen aussehen:

/* schwarze Felder */
#css-container .ct-black-square  
{  
    background-color: #f5f594;  
}  

/* weisse Felder */
#css-container .ct-white-square  
{  
    background-color: white;  
}  

/* Züge der Hauptvariante */
#css-moves .ct-board-move-mainline  
{   
    color: #330099;
    font-weight: bold;
}  

/* Farbe der Nebenvariante */
#css-moves .ct-board-move-variation  
{   
    color: #ad6105;  
} 

/* Farbe der Kommentare */
#css-moves .ct-board-move-comment  
{   
    color: darkcyan;  
}

/* Farbe des aktuell markierten Zuges */
#css-moves  .ct-board-move-current  
{   
    color: red;
    font-weight: bold;
}

An den Kommentaren ist erkennbar, welche Elemente verändert wurden. Wer mit CSS vertraut ist, kann durch einen Blick in die Datei https://chesstempo.com/css/board-min.css zahlreiche weitere Anpassungsmöglichkeiten finden.

Der pgn-Viewer von pgn4web

Eine leicht zu bedienende graphische Oberfläche zum Generieren eines pgn-Viewers bietet pgn4web auf der Seite

http://pgn4web-board-generator.casaschi.net/board-generator.html

Die Bedienung der graphischen Oberfläche wird dort ausführlich erklärt, eine Kurzform folgt unten.

Integration in eine HTML-Seite

Die Arbeitsschritte, um auf der oben genannten Seite von pgn4web einen pgn-Viewer zu erzeugen sind denkbar einfach:

Man gibt eine pgn-Datei in das entsprechende Textfeld ein.
Man wählt die Einstellungen für den pgn-Viewer. Diese sind sehr zahlreich; zu empfehlen ist daher, mit den default-Einstellungen zu beginnen und schrittweise anzupassen. Man sollte beachten, dass die Knöpfe, um in der Partie vorwärts und rückwärts zu navigieren, verborgen sind und daher die Partie automatisch abgespielt wird (how to show control buttons hat als default-Einstellung hidden).
Erzeugt man jetzt den HTML-Quelltext, erscheint in einem Textfeld das iframe -Element, das in die HTML-Seite kopiert werden muss. Zudem wird eine Vorschau angezeigt, wie der pgn-Viewer aussehen wird.
Ist man mit dem Aussehen zufrieden, muss man nur das iframe -Element aus dem Textfeld kopieren und einbauen.

Eine komplette HTML-Seite mit 2 pgn-Dateien könnte dann so aussehen:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>pgn-Viewer von pgn4web</title>
	</head>
	<body>
		<h1>pgn-Viewer von pgn4web</h1>

		<h2>Komplette Partie</h2>
		
		<iframe height='726' width='489' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://pgn4web-board.casaschi.net?am=g&amp;d=3000&amp;ss=40&amp;ps=d&amp;pf=d&amp;lcs=W_iH&amp;dcs=MHW2&amp;bbcs=$$$$&amp;hm=s&amp;hcs=RKim&amp;bd=h&amp;hd=j&amp;md=f&amp;tm=0&amp;fhcs=$$$$&amp;fhs=16&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=RKim&amp;fms=16&amp;fcs=m&amp;cd=i&amp;bcs=____&amp;fp=0&amp;hl=f&amp;fh=726&amp;fw=489&amp;pe=651$zlax9Rvfu2Vcwxg_aSOZP6fWTu2T6Z4co7ZYnz1fDnr0g$41wilh_CvQxfaEtp2KlOrjQzvHKj2D4_tNHgX9pNmheQZkD3nXD9pNgpZmf9ZPD9pNkW7KmSNYlP1nnjQxLL78x1pw$75ho$QdfL32jo$Nm7L1$Fnv9BDP14MUs1TXJyv7RNcXvD308Vv8e3d$vqtAvRXfd02JPfWHF2_R7aYtGu_MDyW7xsy_D6SAn2K9FMHbhbLK2Tu3HZ23wjcgVPc3N23p28MAUkbxLyUWRkx9CY0Pr$$7EN2_MDbD10FEr_fCkaz5b1$CHfuZc$kjBfsbn$$fck8CV2_MH7vN$fCk8xL9Fi7e_5M_Dbv3dKrv_XqCZvNv71FAN0FEb_fsbD$$71FzN250$M1KPmedfo$71FBkZvVo$4yGS7e_nvnxeP5n1aCyf4kc6V2n04QjPfVCyY0I$xUTPdEb_Y_Dbv$$gskbF2b02FtKPmeda2n02Fme_fmYYUKUGaNIeftvn$L$Y$M0_$uWUX60V22yd6Y_Dbn38Qho$iRDe_5rvN$fbfGY4OOz5n0nVYNdEJfq$75FBU6pEJfqf7sFYF3VEr_fqv7Jtc0yNxMn0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>

		<h2>Endspieltraining (aus Anfangsposition)</h2>

		<iframe height='771' width='489' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://pgn4web-board.casaschi.net?am=g&amp;d=3000&amp;ss=40&amp;ps=d&amp;pf=d&amp;lcs=W_iH&amp;dcs=MHW2&amp;bbcs=$$$$&amp;hm=s&amp;hcs=RKim&amp;bd=s&amp;cbcs=W_iH&amp;ctcs=$$$$&amp;hd=j&amp;md=f&amp;tm=0&amp;fhcs=$$$$&amp;fhs=16&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=RKim&amp;fms=16&amp;fcs=m&amp;cd=i&amp;bcs=____&amp;fp=0&amp;hl=f&amp;fh=771&amp;fw=489&amp;pe=215$zlax9RvgomqYJ58AoYTbF5ki4co7ZYnz1fDnr0g$41wilh_CvQxfaEtp2KlOrjQzvHKj2D4_tNHgX9pNmheQZkD3nXD9pNlnhLucT3njQzHVl5vl$UyoMHxWioAW2oMHTRrqdfeTeftwh40ilhKo4VZZmFRvivEG4wvgsfFax4fv3qUZxTyzb05NKPm39y$7RUByKVaxrvMUgn0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>

</body>
</html>

Dabei wurde:

Für die komplette Partie die erste der obigen Beispiel-Dateien ausgewählt und die default-Einstellungen von pgn4web verwendet.
Die zweite Partie ist das Endspieltraining mit der Anfangsposition aus Abbildung 3. Hier wurden die Knöpfe zum Navigieren sichtbar gemacht.

Man erkannt am Quelltext, dass die pgn-Datei kodiert wird und im Quelltext nicht menschen-lesbar erscheint.

Die Funktionalität stimmt in etwa mit dem pgn-Viewer von Chess Tempo überein.

Disclaimer von pgn4web

Zu beachten ist der Disclaimer von pgn4web:

"service availability disclaimer: the pgn4web board generator on this site is intended for chess enthusiasts to easily add chess games with a dynamic chessboard to their personal blogs and websites; this online service is provided on a best effort basis with no guarantee of future availability; if you publish chess games as part of a professional site and need continued server availability and high network performance, you are strongly recommended to evaluate the code from the pgn4web site and install the tool on your own servers; for more details see the board widget generator pages of the pgn4web wiki at the pgn4web site"

Der ChessBase pgn-Viewer

Der pgn-Viewer von ChessBase zeichnet sich vor allem durch folgende Punkte aus

Er ist sehr leicht in eine HTML-Seite zu integrieren.
Das Design entspricht wohl dem Geschmack der meisten Schachspieler, so dass keine Anpassungen im CSS nötig sind.
Die Funktionalität entspricht schon fast einem ausgereiften Schach-Programm.

Eine Beschreibung findet sich unter dem Link:

https://schach.de/HowTo/EmbedPGN

Integration in eine HTML-Seite

Der pgn-Viewer benötigt drei Dateien, die im Kopf der HTML-Datei geladen werden:

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

Zeile 1: Eine css-Datei, die später noch angepasst werden kann.

Zeile 2: Von jQuery wird die Version 1.14 oder höher benötigt. Viele Web-Anwendungen haben jQuery bereits integriert – dann kann diese Zeile weggelassen werden.

Zeile 3: Die eigentliche javascript-Datei für den pgn-Viewer.

Dort wo sich der pgn-Viewer in der HTML-Seite befinden soll, wird dann ein div-Element definiert. Zur Konfiguration benötigt es nur:

die CSS-Klasse class="cbreplay" zur Darstellung sowie
eine pgn-Datei.

Dabei kann die pgn-Datei

entweder direkt in das div-Element kopiert werden
oder sie wird als data-url im div-Element als Pfad angegeben.

Im ersten Fall sieht das div-Element etwa folgendermaßen aus:

<div class="cbreplay">
[Event "Um die Wurst"]
[Date "2019.02.07"]
[White "Rybkatz"]
[Black "Walter"]
[Result "1-0"]
[ECO "C50"]
[PlyCount "31"]

1. e4 e5 2. Nf3 Nc6 3. Nc3 Nf6 4. Bc4 Bc5 5. O-O O-O 6. d3 d6 7. Bg5 Bg4 8. Nd5
{[%csl Gf6]} Nd4 9. Qd2 Qd7 10. Bxf6 {[%cal Rd2g5,Gd5e7]} Nxf3+ (10... Bxf3 
11. Ne7+ Kh8 12. Bxg7+ Kxg7 13. Qg5+ Kh8 14. Qf6# {Capablanca - N.N., New York,
1918}) 11. gxf3 Bh5 12. Ne7+ Kh8 13. Qh6 Rg8 14. Nxg8 Rxg8 15. Qxh5 gxf6+ 
16. Kh1 1-0

[Event "Um die Wurst - Rückkampf"]
[Date "2019.02.08"]
[White "Walter"]
[Black "Rybkatz"]
[Result "1-0"]
[ECO "E01"]
[PlyCount "30"]

1. d4 d5 2. c4 c6 3. Nc3 e6 4. Nf3 Nf6 5. g3 dxc4 6.
e4 6... b5 7. e5 Nd5 8. Bg2 a5 9. O-O Ba6 10. Ne4 Nd7 11. Nfg5 h6 12.
Nxe6 fxe6 13. Qh5+ Ke7 14. Nd6 Qb6 15. Qf7+ Kd8 1-0
</div>

Wie man sieht, kann man pgn-Dateien verwenden, die mehrere Partien enthalten.

Wer gerne seine HTML-Quelltexte durch Einrückungen besser lesbar gestaltet, sollte hier vorsichtig sein: Wird der Inhalt der pgn-Datei eingerückt (was eigentlich vernünftig ist, da man besser erkennt, dass es sich um den Inhalt des div-Elementes handelt), wird eventuell die zweite Partie nicht erkannt. Schlimmstenfalls wird keine Partie erkannt.

Im zweiten Fall:

<div class="cbreplay"  data-url="pgn/rybkatz.pgn">
</div>

Zu empfehlen ist natürlich der zweite Fall, da die HTML-Datei übersichtlicher bleibt.

Allerdings funktioniert die zweite Methode nicht, wenn man lokal arbeitet und die pgn-Datei von der Festplatte geladen wird; die pgn-Datei muss über einen https-request vom Server geladen werden.

Die Funktionalität des pgn-Viewers

Der pgn-Viewer von ChessBase besitzt sämtliche Funktionalitäten des Chesstempo pgn-Viewers:

Wie der pgn-Viewer kommt er mit pgn-Dateien mit mehreren Partien und mit pgn-Dateien, die aus einer Anfangsposition starten zurecht.
Ebenso ist die Navigation durch die Partie und die Nebenvarianten problemlos möglich.
Die Partie kann automatisch abgespielt werden.

Zusätzlich werden die Befehle für farbig markierte Felder und Pfeile und für Trainingsfragen ausgeführt (siehe Feld-Markierungen, Pfeile und Trainingsfragen).

Darüber hinaus ist es möglich:

Varianten selber einzugeben, indem man die Figuren auf dem Feld bewegt, die pgn-Datei wird dabei sofort angepasst.
Die pgn-Datei kann mit mehreren Werkzeugen, die man von Schachprogrammen kennt bearbeitet werden (Varianten löschen, Varianten aufwerten, Partie entkommentieren).
Zur Analyse kann eine Engine zugeschaltet werden.
Die pgn-Datei kann (mit ihren Veränderungen) abgespeichert werden.

Da der pgn-Viewer beim Laden relativ klein dargestellt wird und er vergrößert werden kann, sollte man beim Design der Seite beachten, dass der vergrößerte pgn-Viewer nicht zu viel des Seiten-Inhaltes verdeckt.