and it should not be difficult to replace all the style stuff in the first two lines there by a class="boardsquare". But it seems a problem that sqrSize is not fixed here, but a JavaScript variable that only becomes known after the JavaScript has parsed the Diagram's definition squareSize=N.
Apart from that, we should also handle the situation where there are multiple Diagrams on the same page, which each use different squareSize. I suppose this could be fixed by defining a separate class for the squares of each Diagram, with name 'boardsquare'+bnr.
But I guess it would be simpler if the JavaScript could somehow query the screen width in pixels as well as in inches. Then it could set a variable bigScreen to 1 or 2 based on some logical combination of that, and it could multiply the parameter value of sqrSize by that at the point at the point where it gets read from the Diargarm definitions.
But it would still be a problem if the Diagram was contained in a surrounding HTML element with a fixed width specified in pixels. (Like almost all Diagrams I made so far are.) Then the Diagram would have understood it would have to present itself with twice the size, but the browser would then think "hey, this is too large to fit", and reduce it back. (And perhaps not at exactly 50%.)
So I guess it would only work if the Diagram script would somehow double the size of all surrounding HTML elements that did have a specified size in pixels as well. I suppose this would be possible, even though such elements would in general not have an id (and even when they have, it would be unknown): I think it is possible to ask a HTML element what its parent is, and work your way outwards from the Diagram that way. It sounds a bit tricky, though.
Currently the board squares are defined by the statement
row = row + '<td id="' + bnr + 'y' + h + 'y' + j + '" style="width:' + sqrSize + 'px;height:' + sqrSize + 'px' +
';border:' + bb + ';font-size:xx-large;background-repeat:no-repeat;background-position: center center;background-size:contain"' +
' onmousedown="Down(' + bnr + ',' + j + ',' + h + ',event)" onmouseup="Up(' + bnr + ',' + j + ',' + h +
',event)" ontouch="Touch(' + bnr + ',' + j + ',' + h +
')" onmouseover="Hover(event' +
')" ondragover="PreDrop(event)" ondrop="Drop(event)" ondragend="Relay(event)" valign="center" align="center"></td>';
and it should not be difficult to replace all the style stuff in the first two lines there by a class="boardsquare". But it seems a problem that sqrSize is not fixed here, but a JavaScript variable that only becomes known after the JavaScript has parsed the Diagram's definition squareSize=N.
Apart from that, we should also handle the situation where there are multiple Diagrams on the same page, which each use different squareSize. I suppose this could be fixed by defining a separate class for the squares of each Diagram, with name 'boardsquare'+bnr.
But I guess it would be simpler if the JavaScript could somehow query the screen width in pixels as well as in inches. Then it could set a variable bigScreen to 1 or 2 based on some logical combination of that, and it could multiply the parameter value of sqrSize by that at the point at the point where it gets read from the Diargarm definitions.
But it would still be a problem if the Diagram was contained in a surrounding HTML element with a fixed width specified in pixels. (Like almost all Diagrams I made so far are.) Then the Diagram would have understood it would have to present itself with twice the size, but the browser would then think "hey, this is too large to fit", and reduce it back. (And perhaps not at exactly 50%.)
So I guess it would only work if the Diagram script would somehow double the size of all surrounding HTML elements that did have a specified size in pixels as well. I suppose this would be possible, even though such elements would in general not have an id (and even when they have, it would be unknown): I think it is possible to ask a HTML element what its parent is, and work your way outwards from the Diagram that way. It sounds a bit tricky, though.