Comments/Ratings for a Single Item

This isn't showing up well on any browser or OS I've seen it on. On my iPad, I see the arrowed board both above and below the blank 7x8 board with the pieces, and the one above is tiled. On Android and Windows, the tiled board is not appearing at the top, but the pieces are still not appearing on the same board as the arrows.

The comment contains the board image twice, the second time as a plain image below the Diagram (which works), the first time as background-image to the <table> element that contains the board squares as cells. The background of these cells is then set to transparent.

For some reason this does not work anymore. The I.D. on the Eurasian Chess page also lost its background, and I am sure this worked before. Is there some global style definition now that gives <tr> elements a background color? These are the only elements between the <td> and the <table>. A background color of the table would be displayed behind the background-image.

For some reason this does not work anymore. The I.D. on the Eurasian Chess page also lost its background, and I am sure this worked before. Is there some global style definition now that gives elements a background color?

Looking at it with Web Developer Tools in Firefox, I see that TABLE TR has the background-color value of var(--nav-bgcolor), and when I turn it off, the background image shows up. With that in mind, I added this to the Eurasian Chess page, and that fixed it:

<STYLE>
TABLE#board0 TR {background-color: inherit;}
</STYLE>

Would it be a good idea to add this to global.css?

Also, I added the same code to the Smess diagram, and it is now tiling with the pieces on it. Since I made those pieces for a larger board, I think the board image and the pieces are not at the same scale.

I changed the board image to the one that goes with the pieces, and it looks a lot better, but there are still some alignment issues. The spaces on the board are rectangular with a width of 83 and a height of 73, but the squareSize parameter seems to expect one value that gets used for both height and width. Is there any way to specify height and width separately? In the meantime, I'll make a resized copy of the board with square spaces.

I created and used a new board with 83x83 spaces, and I set squareSize to 83, but now the board is starting halfway into the first rank and tiling on the right side. What can I do to fix that?

I got your diagram to display correctly and added it to the page with some modifications. To make the board display correctly without tiling, I removed the firstRank assignment and set borders to 0. I replaced the graphics with ones I created for Smess. The board is a stretched version of one I made for Game Courier, and the pieces are the ones I made for Storm the Ivory Tower, which have smoother edges. I set useMarkers to 1 to stop it from changing the background color of a space when highlighting it, but this doesn't work for moves made by the opponent. Since it is important to not hide the arrows on the board, it would be helpful if useMarkers would also change how the opponent's moves are highlighted.

Because the Ivorytower pieces looked a little small on the board, I reduced the size of the board from 83x83 squares to 73x73 squares. The original board had 83x73 squares to give it a more square shape with a 7x8 layout, but the 73 pixel width works better for the Ivorytower pieces, because they can now fully cover up the oval on some spaces that names the piece starting from that position. I also tried 60x60 spaces, as that is the size used in Storm the Ivory Tower, but the Blue Brain was covering up too much of the forward arrow on its space. So I reverted to 73x73.

While the Ivorytower pieces do look better, they are still rough around the edges. and I think they would look better as SVG pieces.

Would it be a good idea to add this to global.css?

I think it would be good to have no background color at all for <tr> elements. I see no legitimate use for it. If it is desirable to see the background color of the page for <table>, <tr> or <td> elements, they could simply be transparent. Then the page background would shine through. If it is desirable to have a color for table cells that is different from the page background, then this should be specified for the <table>  element, and the <tr> and <td> cells can be transparent to show that color in every cell. This way it is prevented that background colors of a foreground element would cover/hide non-default changes made in the elements behind it.

I guess that 'inherit' is not a sensible setting for elements like <td> and <tr>, which always have a <table> as (grand-)parent element. Because these would automatically get the color of the parent by being transparent. Inheriting the color just causes problems by eclipsing any background-image of the parenet element; it allows the background-color of the parent to sneak in front of its background-image.

In the I.D. I made the cells transparent by specifying an empty string for lightShade and darkShade. This worked, but I don't know if it is the official method (and thus whether it will always keep working). I now learned that in general (semi-)transparency can be set in HTML by using a notation

rgb(R G B / A%)

where A is the opacity (100 = opaque, 0 = fully transparant). Perhaps I should make the Diagram script recognize the empty string as a color spec for the square shades, and replace it by rgb(0 0 0 / 0%).

With the current coloring scheme it is very hard to distinguish occupied squares from empty squares; the pieces blend in too easily with the bright square and arrow colors. I would recomment to decrease the saturation of all the board colors by at least 50%. E.g. by giving the image a 50% (or even 70%) transparency and have a whitish background shine through.