Proposal to add standardized variation sequences for chess notation

Mon Apr 3 16:24:59 CDT 2017

Den 2017-04-03 20:46, skrev "Kent Karlsson" <kent.karlsson14 at telia.com>:

> 
> Den 2017-04-03 19:51, skrev "markus.icu at gmail.com" <markus.icu at 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
> 
> [...]
> 
A bit more modification: more colourful, even with /// striped backgrounds.
One disadvantage
is that the "white" pieces interior get the background colour rather than
being actually white.
To get them actually white (not just the interiors, but the entire pieces),
use the "black"(!) pieces,
and (via CSS) colour them white (need to be set on a non-white background to
be visible...).
I know, the latter trick will make parsing even more tricky (needing to
interpret not only the
HTML tag markup and chess characters, but also (say) HTML class attribute to
distinguish "white"
from "black" pieces).

And, parsing (for other things than display in a browser), will be quite
sensitive to the exact
way of expressing this in HTML. There are many quite different ways of
expressing this
in HTML (+CSS).

But... with a bit of JavaScript savvyness, you can program moving the pieces
around... ;-) And
substitute the chess characters to more emoji style images of chess
pieces... Still in ;-) mode.

<html>
<head>
<style>
a {
 color: #f00;
 display: block;
 font-size: 24px;
 height: 32px;
 width:  32px;
 position: relative;
 text-decoration: none;
 text-shadow: 0 1px #fff;
}

a.white { color: #0ff; }

#chess_board { border: 2px solid #333; }

#chess_board td {
 background: #ffa;
 background: -moz-linear-gradient(top, #ffa, #eea);
 background: -webkit-gradient(linear,0 0, 0 100%, from(#ffa), to(#eea));
 box-shadow:         inset 0 0 0 1px #ffa;
 -moz-box-shadow:    inset 0 0 0 1px #ffa;
 -webkit-box-shadow: inset 0 0 0 1px #ffa;
 height: 32px;
 width:  32px;
 text-align: center;
 vertical-align: middle;
}

#chess_board tr:nth-child(odd)  td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
 /*background: #acc;
 background: -moz-linear-gradient(top, #acc, #aee);
 background: -webkit-gradient(linear,0 0, 0 100%, from(#acc), to(#aee));*/
 background: repeating-linear-gradient(
  -45deg,
  #a0adbc,
  #a0adbc 2px,
  #465298 2px,
  #465298 4px
 );
 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>
<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>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://unicode.org/pipermail/unicode/attachments/20170403/6bdb630f/attachment.html>