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

 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
Default border style - Default border style is solid with round corner (BW only).
  
  
  
  
   
   
   
    
♗   
♖ ✕✕
  ✕♚
  •✕
Extra symbols - Use '+' and 'x' in the FEN notation to indicate some squares of interests on the board.
  
  
  
  
   
   
   
    
♗   
♖ ✕✕
  ✕♚
  •✕
Highlighting - Surround squares with brackets ( ... ) to have them highlighted in a different color.
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
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

    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖

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.

    
    
    
    
    
    
    
    


        
        
        
        


♖♘♗♕♔♗♘♖
♙♙♙♙♙♙♙♙
        
        
        
        
♟♟♟♟♟♟♟♟
♜♞♝♛♚♝♞♜

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.

    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖

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.

  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 

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.

  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 

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.

 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
 abcd
8
7
6
5
  
  
  
  
   
   
  
    
♚   
  ♘ 
 ♔♘ 
    
efgh 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
4
3
2
1
  
  
  
  
    
  
   
   
    
 ♔♘ 
  ♘ 
♚   
 abcd
  
  
  
  
    
  
   
   
    
 ♘♔ 
 ♘  
   ♚
4
3
2
1
efgh 

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.

    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
  
  
  
  
   
   
   
    
  ♚ 
  ♕ 
  ♔ 
    
  
  
  
  
    
   
   
   
    
  ♔ 
  ♕ 
  ♚ 
  
  
  
  
    
 
    
    
    
♚♕♔ 
    
    
  
  
  
  
    
    
 
    
    
    
 ♔♕♚
    
  
  
  
  
   
   
   
    
  ♚ 
  ♕ 
  ♔ 
    
  
  
  
  
    
   
   
   
    
  ♔ 
  ♕ 
  ♚ 
  
  
  
  
    
 
    
    
    
♚♕♔ 
    
    
  
  
  
  
    
    
 
    
    
    
 ♔♕♚
    

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

  
  
  
  
    
    
    
    
••••
    
    
    
  
  
  
  
    
    
    
    
    
    
    
••••
  
  
  
  
    
    
    
    
•   
•   
•   
•   
  
  
  
  
    
    
    
    
   •
   •
   •
   •
  
  
  
  
   
   
   
    
  ♚ 
  ♕ 
  ♔ 
    
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
  
  
  
  
  
  
  
  
   
   
   
    
    
    
    
  
✕♚✕ 
✕✕✕♘
 ♔  
    
    
    
    
♖ ♖ 
    
    
    
        
       
        
•       
♖•••••••
•       
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
  
  
  
  
    
  
   
   
    
 ♔♘ 
  ♘ 
♚   

With specification of board origin:

abcd
  
  
  
  
    
    
    
    
••••
    
    
    
  
  
  
  
    
    
    
    
    
    
    
••••
abcd
4
3
2
1
  
  
  
  
    
    
    
    
•   
•   
•   
•   
  
  
  
  
    
    
    
    
   •
   •
   •
   •
4
3
2
1
 efgh 
8
7
6
5
  
  
  
  
   
   
   
    
  ♚ 
  ♕ 
  ♔ 
    
8
7
6
5
 efgh 
 bcdef 
6
5
4
3
2
  
   
  
   
  
     
     
    
     
     
 • • 
•   •
  ♞  
•   •
 • • 
6
5
4
3
2
 bcdef 
abcd
  
  
  
  
  
  
  
  
   
   
   
    
    
    
    
  
✕♚✕ 
✕✕✕♘
 ♔  
    
    
    
    
♖ ♖ 
abcd
3
2
1
    
    
    
        
       
        
•       
♖•••••••
•       
3
2
1
abcd 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
4
3
2
1
4
3
2
1
  
  
  
  
    
  
   
   
    
 ♔♘ 
  ♘ 
♚   
 abcd

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

abcd 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
4
3
2
1
<c:chess border="double a1 ne">...k/.N../.NK./....</c:chess>
4
3
2
1
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
 abcd
<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

4
3
2
1
  
  
  
  
    
    
    
    
••✕✕
    
    
••✕✕
 abcd
abcd 
  
  
  
  
    
    
    
    
••✕✕
    
    
••✕✕
4
3
2
1

With border = pad

      
4
3
2
1
  
  
  
  
    
    
    
    
••✕✕
    
    
••✕✕
 
 
 
 
 abcd 
 abcd 
 
 
 
 
  
  
  
  
    
    
    
    
••✕✕
    
    
••✕✕
4
3
2
1
      

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.

 abcd
8
7
6
5
  
  
  
  
   
   
  
    
♚   
  ♘ 
 ♔♘ 
    

♜♝♚♞
♟♟♟♟
    
    
    
    
♙♙♙♙
♘♕♗♖

efgh 
  
  
  
  
   
   
  
    
   ♚
 ♘  
 ♘♔ 
    
8
7
6
5
4
3
2
1
  
  
  
  
    
  
   
   
    
 ♔♘ 
  ♘ 
♚   
 abcd
  
  
  
  
    
  
   
   
    
 ♘♔ 
 ♘  
   ♚
4
3
2
1
efgh 

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


♚ 
  
 ♘
  
 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 

  
♘ 
 ♔
  
  
♔ 
 ♘
  

  
♘ 
  
 ♚


cstyle attribute

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

efgh 
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
8
7
6
5
  
efgh 
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
8
7
6
5
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.

4
3
2
1
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
 abcd
  
4
3
2
1
  
  
  
  
    
   
    
    
•   
♖•••
•   
•   
 abcd
To make simple customizations... ... or more complex ones.

Changing style based on parent's class

 abcdefgh 
8
7
6
5
4
3
2
1
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
8
7
6
5
4
3
2
1
 abcdefgh 
Here is the starting position in a Wikipedia-like style.
    
    
    
    
    
    
    
    


        
        
        
        


♜♞♝♛♚♝♞♜
♟♟♟♟♟♟♟♟
        
        
        
        
♙♙♙♙♙♙♙♙
♖♘♗♕♔♗♘♖
Another starting position

© Copyright 2007-2016 Michaël Peeters (http://mip.noekeon.org).

Last modified on 08/30/2024 13:00:30

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