Comments/Ratings for a Single Item

The editor Fergus Duniho has revised this page.

While changing the aspect-ratio of the board to auto fixes the problem on the iPad, it appears to be causing a new problem at small sizes. On my Android phone and when I make the window narrow on Windows, it displays a black horizontal bar instead of the board. At least the iPhone I tested it on doesn't have this problem. So, I have to fix this or find a solution that doesn't have either problem.

Since pages are cached differently through chessvariants.com and chessvariants.org, I tried the pages using my fork through chessvariants.org on Safari and Chrome on my iPad, and they no longer had the problem of showing extra space.

I mostly solved both problems. Looking at the difference between code generated by betza.js and betzaNew.js, I saw that the latter included the style "aspect-ratio: 10 / 11" for the board. To test whether this was the problem, I added this CSS to this page:

  #board0 {aspect-ratio: auto !important}

When I loaded the page on my iPad, it no longer had the problem with extra space showing up. As a further test, I commented out line 108 in my fork, and I loaded pages that used it on my iPad. This fixed the problem on Firefox and Edge, though not on Chrome and Safari. Maybe it's a caching issue with these two, though I did try clearing the browser cache without it helping, and the script was called with the query string "?nocache=true".

While using the iPad, I noticed that I could click on a piece in the Pieces table and click where I wanted it to go in the diagram. I tried this on my Android tablet, and it worked. Although dragging is not working, it's enough to have an alternative to dragging that will work.

@HGMuller

The Interactive Diagram is giving me different problems on my iPad and my Android tablet. On the iPad, I'm getting unwanted blocks of white space where elements of the diagram are hidden. This happens in Safari, Edge, Chrome, and Firefox. I believe all iOS browsers are forced to use webkit, which may be at the root of this problem. I don't get this problem on my Android tablet. While it doesn't have Safari, I tried Dolphin, which is supposed to use webkit, but it still displayed without the unwanted white space. On my iPad browsers, this is happening even when grid is not being employed to rearrange things in two columns, and it is even happening on pages without the grid code, such as Frog Chess with Manticore and Falcon, which I have not touched yet. Where everything appears as one column, I can see that the white space is only between message0 and the board. But it is not happening with Chess, which uses betza.js instead of betzaNew.js. Looking at the generated code with Firefox's Web Developer Tools on my Windows PC, I have not been able to detect what the difference might be.

The problem on the Android tablet is that I cannot drag pieces to the board. When I longpress on a piece, I get a pop-up menu. Although an image of the piece will follow my finger when I move it to the board, it does not deposit the piece there or decrement the count in the table.

There are two possible reasons I can think of for this. Either your screen width is too narrow, or your browser does not support CSS grid. What is your screen width, and what browser are you using?

Yes!

Are you saying everything appears in a single column instead of in two side-by-side columns?

To me the diagram appears bellow still.

I adjusted the grid areas so that when the description or legend appears by itself, each uses some of the same space as the other would. When both are displayed, each partially appears alongside the board, which helps make the whole diagram fit the window height better when everything is displayed.

I edited the new text a little and published this page.

Ok, Fergus! I'll do it later today!

I cleaned up the grid CSS by using grid-area to place every element where it should go in the grid. I used a container query for the code to preserve the aspect-ratio of spaces at small sizes. This container query goes into effect if and only if the container query for the grid code does not, which eliminates the conflict between the two.

I'm now waiting for Aurelian to update the rules for this page, as he had entered the same text for both the Rules and the Notes section.

I got the grid CSS to work, but I gave up on getting the squares to maintain their aspect ratio when a small window size causes them to become narrower. The solution that worked for this involved setting the height of each table cell to auto. The problem with this was that it would let the following sections of the page overlap with the diagram. This was apparently because it now had no height for the table.

I think what you have in mind would involve rewriting the HTML whenever someone resizes the window. We already have a simple CSS solution that works well without needing to do that. All my fork does is add some containing DIVs around the HTML generated for the idiagram, and these allow for a responsive display with just a small amount of CSS code.

But JavaScript can read the screen width, not? So you could make it responsive in any way you want.

I am not really familiar with this grid business. But when I want side-by-side display I just use a table of one row and two columns, put the ID in the left cell, and the piece list or piece table in the right cell as a satellite HTML table (or a list or paragraph).

I was seeing what I could do without forking betzaNew.js. Using tables is not a responsive solution, because you would still have them on a small screen.

In the standard script the Diagram only fills the element with class=idiagram (which I usually take as a div) with a diagram. But it should be possible to have it generate such a table with the Diagram proper in the left cell, when a parameter would request this, and put the stuff that normally goes underneath it in the rightmost cell of that table. It is just a matter of creating the 'anchors' in a slightly different way.

The fork I made already distributes the code between two different divs that can be placed side-by-side with a small bit of flex CSS.

It probably could even be made to calculate if there is room to do that.

With the flex solution, there is no need for that. It displays the board and pieces alongside each other when the screen is wide enough for that, and it displays everything in a single column when it isn't wide enough.

Since the grid solution is not working as well as the flex solution, I recommend incorporating the changes I made in my /fergus/betzaNew.js fork into the official betzaNew.js script. Then I can just change this page to use the flex solution with the official betzaNew.js script.

I am not really familiar with this grid business. But when I want side-by-side display I just use a table of one row and two columns, put the ID in the left cell, and the piece list or piece table in the right cell as a satellite HTML table (or a list or paragraph). I specify a width for the left cell large enough to hold the Diagram; I know how large it is (squareSize*files).

In the standard script the Diagram only fills the element with class=idiagram (which I usually take as a div) with a diagram. But it should be possible to have it generate such a table with the Diagram proper in the left cell, when a parameter would request this, and put the stuff that normally goes underneath it in the rightmost cell of that table. It is just a matter of creating the 'anchors' in a slightly different way. It probably could even be made to calculate if there is room to do that.

@HGMuller

I have made more progress toward making this display properly with grid. I put all the grid code in a container query for the wrapper div. So, when it's not wide enough, it just displays everything as block elements. The problem is that when it does display as a grid, children elements of the idiagram are also displaying as grids, because they are set to display: inherit, and this is messing up how some of them look. In particular, the bar with the control buttons is displaying as a single column. I have tried some things, but nothing I've tried is getting it to display properly without stopping the main grid from working.

I'm done working on this for tonight. Instead of using CSS flex with a fork of betzaNew.js, I used CSS grid with the official betzaNew.js to make the piece table appear alongside the board. To reference the idiagram div, I put a wrapper div around the whole idiagram code with an id of wrapper. Since its display value is inherit, I gave its surrounding div a display of grid. It doesn't work as fluidly as the flex version, but it may be good enough if you aren't switching screen sizes to test it.

The Rules section and the Notes section were the same, and I divided the text between them. Compared with Frog Chess with Gryphon and Falcon, it appears that the Notes were duplicated, and the Rules were omitted.