Den 2017-04-03 19:51, skrev "markus....@gmail.com" <markus....@gmail.com>:
> It seems to me that higher-level layout (e.g, HTML+CSS) is appropriate for the > board layout (e.g., via a table), board frame style, and cell/field shading. > In each field, the existing characters should suffice. > > markus True, and one can easily find an example online. Slightly modified from http://stackoverflow.com/questions/18505921/chess-using-tables <html> <head> <style> a { color:#000; display:block; font-size:12px; height:16px; position:relative; text-decoration:none; text-shadow:0 1px #fff; width:16px; } #chess_board { border:2px solid #333; } #chess_board td { background:#fff; background:-moz-linear-gradient(top, #fff, #eee); background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee)); box-shadow:inset 0 0 0 1px #fff; -moz-box-shadow:inset 0 0 0 1px #fff; -webkit-box-shadow:inset 0 0 0 1px #fff; height:16px; text-align:center; vertical-align:middle; width:16px; } #chess_board tr:nth-child(odd) td:nth-child(even), #chess_board tr:nth-child(even) td:nth-child(odd) { background:#ccc; background:-moz-linear-gradient(top, #ccc, #eee); background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee)); box-shadow:inset 0 0 10px rgba(0,0,0,.4); -moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4); } </style> </head> <body> <p>True, and one can easily find an example online.</p> <p>Slightly modified from http://stackoverflow.com/questions/18505921/chess-using-tables</p> <table id="chess_board" cellpadding="0" cellspacing="0"> <tr> <td id="A8"><a href="#" class="rook black">♜</a></td> <td id="B8"><a href="#" class="night black">♞</a></td> <td id="C8"><a href="#" class="bishop black">♝</a></td> <td id="D8"><a href="#" class="king black">♛</a></td> <td id="E8"><a href="#" class="queen black">♚</a></td> <td id="F8"><a href="#" class="bishop black">♝</a></td> <td id="G8"><a href="#" class="night black">♞</a></td> <td id="H8"><a href="#" class="rook black">♜</a></td> </tr> <tr> <td id="A7"><a href="#" class="pawn black">♟</a></td> <td id="B7"><a href="#" class="pawn black">♟</a></td> <td id="C7"><a href="#" class="pawn black">♟</a></td> <td id="D7"><a href="#" class="pawn black">♟</a></td> <td id="E7"><a href="#" class="pawn black">♟</a></td> <td id="F7"><a href="#" class="pawn black">♟</a></td> <td id="G7"><a href="#" class="pawn black">♟</a></td> <td id="H7"><a href="#" class="pawn black">♟</a></td> </tr> <tr> <td id="A6"></td> <td id="B6"></td> <td id="C6"></td> <td id="D6"></td> <td id="E6"></td> <td id="F6"></td> <td id="G6"></td> <td id="H6"></td> </tr> <tr> <td id="A5"></td> <td id="B5"></td> <td id="C5"></td> <td id="D5"></td> <td id="E5"></td> <td id="F5"></td> <td id="G5"></td> <td id="H5"></td> </tr> <tr> <td id="A4"></td> <td id="B4"></td> <td id="C4"></td> <td id="D4"></td> <td id="E4"></td> <td id="F4"></td> <td id="G4"></td> <td id="H4"></td> </tr> <tr> <td id="A3"></td> <td id="B3"></td> <td id="C3"></td> <td id="D3"></td> <td id="E3"></td> <td id="F3"></td> <td id="G3"></td> <td id="H3"></td> </tr> <tr> <td id="A2"><a href="#" class="pawn white">♙</a></td> <td id="B2"><a href="#" class="pawn white">♙</a></td> <td id="C2"><a href="#" class="pawn white">♙</a></td> <td id="D2"><a href="#" class="pawn white">♙</a></td> <td id="E2"><a href="#" class="pawn white">♙</a></td> <td id="F2"><a href="#" class="pawn white">♙</a></td> <td id="G2"><a href="#" class="pawn white">♙</a></td> <td id="H2"><a href="#" class="pawn white">♙</a></td> </tr> <tr> <td id="A1"><a href="#" class="rook white">♖</a></td> <td id="B1"><a href="#" class="night white">♘</a></td> <td id="C1"><a href="#" class="bishop white">♗</a></td> <td id="D1"><a href="#" class="king white">♕</a></td> <td id="E1"><a href="#" class="wife white">♔</a></td> <td id="F1"><a href="#" class="bishop white">♗</a></td> <td id="G1"><a href="#" class="night white">♘</a></td> <td id="H1"><a href="#" class="rook white">♖</a></td> </tr> </body> </html>