title: How do I properly position the rank and file labels for a chess game?
body: <p>I'm making a chess game with the HTML5 canvas and I'm having trouble getting the rank and file labels to display correctly.  By labels I mean the 1,2,..,8 and A,B,...H text that is positioned around the outskirts of the board to uniquely identify board positions.  Currently I'm using two divs outside of the "board" element to display the the labels.  The way I currently do this isn't responsive and often doesn't display properly when shown on devices other than the one I designed it on.  The text for the file (letters) and rank (numbers) might be different sizes, or the characters might not align with the center of each column or row.</p>
  
  <p>This is what the board looks like when everything is working as intended
  <a href="https://i.stack.imgur.com/Ig86h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ig86h.png" alt="chess board"></a></p>
  
  <p>And here's the problem I run into on the phone. The letters don't line up with the tiles of the board, as well as the control widget moving outside the page:<a href="https://i.stack.imgur.com/RRmzY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RRmzY.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>chessboard = document.getElementById('chessboard');
  ctxPiece = document.getElementById('chesspieceCanvas').getContext('2d');
  ctxHighlight = document.getElementById('highlight').getContext('2d');
  
  drawBoard(chessboard, chessboard.getContext('2d'));
  
  function drawBoard(canvas, ctx) {
   var rows = 8;
   TILE_SIZE = canvas.height / rows;
      var white = true;
      var TILE_COLOR1 = "rgb(160,82,45)";
    var TILE_COLOR2 = "rgb(245,222,179)";
      for (var row = 0; row &lt; rows; row++) {
          for (var col = 0; col &lt; rows; col++) {
              if (!white) {
                  ctx.fillStyle = TILE_COLOR1;
                  ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                  white = true;
              } else {
                  ctx.fillStyle = TILE_COLOR2; 
                  ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                  white = false;
              }
          }
          white = !white;
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#gameArea {
      width: 650px;
      font-size: 16px;
  }
  
  #output {
      text-align: center;
  }
    #outputMessage {
        display: inline-block;
        font-size: 2.5em;
        font-weight: bold;
    }
  
  #boardAndInfo {
      overflow: visible;
      position: relative;
      width: 1000px;
  }
  
  #board {
  display: inline-block;
  border: 0.12em solid black;
  height: inherit;
  position: relative;
  width: 600px;
  line-height: 0;
  overflow: hidden;
  }
  
  #chessboard {
      position: absolute;
      z-index: 0;
  }
  
  #highlight {
      position: absolute;
      z-index: 1;
  }
  
  #gameInfo {
      display: inline-block;
      height: 585px;
      width: 190px;
      vertical-align: top;
      position: relative;
  }
  
  #fileNotation {
      color: gray;
      font-size: 2.0em;
      margin-left: 50px;
      letter-spacing: 54px;
  }
  
  #chesspieceCanvas {
      font-size: 70px;
      font-family: 'Open Sans', sans-serif;
      position: relative;
      z-index: 2;
  }
  
  #rankNotation {
      color: gray;
      float: left;
      font-size: 2.0em;
      line-height: 235%;
      position: relative;
      width: 1.5ch;
      word-wrap: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;div id='gameSynopsis'&gt;
   &lt;/div&gt;
   &lt;div id="gameArea" lang='en'&gt;
     &lt;div id="output"&gt;
        &lt;span id="outputMessage"&gt;Some text here&lt;/span&gt;
        &lt;span id="aiThinkingIndicator" class="loading hide"&gt;&lt;/span&gt;
      &lt;/div&gt;
     &lt;div id="fileNotation" class="boardLabel"&gt;
        ABCDEFGH
     &lt;/div&gt;
     &lt;div id="rankNotation" class="boardLabel"&gt;
        87654321
     &lt;/div&gt;
     &lt;div id="boardAndInfo"&gt;
      &lt;div id="board"&gt;
       &lt;canvas id="chessboard" width="600" height="600"&gt;&lt;/canvas&gt;
       &lt;canvas id="highlight" width="600" height="600"&gt;&lt;/canvas&gt;
       &lt;canvas id="chesspieceCanvas" width="600" height="600"&gt;
        &lt;p id='canvasSupportMsg'&gt;&lt;/p&gt;
       &lt;/canvas&gt;
      &lt;/div&gt;
      &lt;fieldset id="gameInfo"&gt;
       &lt;legend id='gameInfoTitle'&gt;Stuff&lt;/legend&gt;
      &lt;/fieldset&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The fiddle for my game can be found <a href="https://jsfiddle.net/hqL7cmhu/17/" rel="nofollow noreferrer">here</a>.  If I'm missing anything else please let me know.</p>
  
  <p>I'm looking for a way to change the way this works in order to have it scale properly but I haven't been able to find a solution yet.</p>