Printing your own Tiles

In the past, when we tried to print fan-expansion tiles on sticky backed paper, then used a light table to paste and trim the images onto Carcassonne blank tiles; we faced two possible problems:

This is the tile that we want. The tile was printed the exact proper size and the blank tile was then placed and trimmed exactly centered on top of the image.
This tile has some white edges. The tile was printed the exact proper size but when the blank tile was placed exactly centered, it was accidently rotated just 2 degrees on top of the image before it was trimmed.
To avoid the possible white edges, this tile was printed 4 pixels larger than necessary, then the blank tile was centered over the larger image before the edges were trimmed. Note how the City Gate is now smaller at the bottom of the trimmed tile and the logo now touches the top of the tile!

But, there is another way to do this! All we have to do is print each of the tiles twice 😕 on top of each other 😧 !

If we use the <style> section of the HTML file to define each tile as an overlay, we can display the exact size desired tile image "centered on top of" an oversized background image of the same tile so that any errors in the blank tile placement will not result in white edges.

Black Line Overlayed Paste & Trim Trimmed

I modified one of my 353 dot tile images to add a 1 dot Black Line around the first 355 dot image in the Black Line example. The second Overlayed image uses the unmodified 353 dot tile, and the final Trimmed image is what you will get when you Paste & Trim your blank tile exactly centered. But, there will be no white edges if your placement is not exact!

The Math: I placed 31 Carcassonne tiles side by side on my desktop and measured them as exactly 55 inches. 55 divided by 31 equals 1.77419 inches for each tile. The standard for displaying images on a computer screen is 96 pixels per inch, so a Carcassonne tile should be 55/31*96, 170.323 pixels square! Even the cheapest printers print at a resolution of 600 dots per inch, 1,064 dots per tile! So, the higher the resolution of your copies of your tile images, the better the quality of your printed tiles.

Let's look at the HTML coding used to create these tiles

First, redefine the default styles used by HTML to display tables - - - Then define a table in the body of the HTML file to double print your tiles with your personal spacing between each tile:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML LANG="en-US">
<head>
<TITLE>Carcassonne fan tiles</TITLE>

<style>
/* display tiles in a table with no extra spacing */

table.Tiles { border-collapse:collapse;
              padding:0px; border:0px; margin:0px; }
table.Tiles td { border-collapse:collapse;
                 padding:0px; border:0px; }

/* allow two images to be printed on top of each other */

td.overlay { position: relative; left: 0; top: 0;
             vertical-align:top; }

/* Display Tile overlaid on Oversized Tile*/

img.ost { width:179px; height:179px; }
img.cst { position:absolute; width:171px; height:171px;
          left:4px; top:4px;}
</style>
</head>
<body>

<center><table class=tiles>
  <tr>
    <td class=overlay>
      <img class=ost src=Image9p.jpg>
      <img class=cst src=Image9p.jpg></td>
    <td width=10px>
    <td class=overlay>
      <img class=ost src=Image9.jpg>
      <img class=cst src=Image9.jpg></td>
  </tr>
  <tr><td height=10px></td></tr>
  <tr>
    <td class=overlay>
      <img class=ost src=Image9.jpg>
      <img class=cst src=Blank.jpg></td>
    <td width=10px>
    <td>   <img src=Image9.jpg
      style="width:171px; height:171px;"></td>
  </tr>
</table></center>

</body>
</html>


Note how each tile is printed twice in each td overlay segment; first as an ost (Over Sized Tile) image, then as a cst (Carcassonne Sized Tile) centered on top of the ost image. The cst image can now be trimmed out of the center of the ost image without the risk of any thin white edges!

Making and testing your own copy of this process!

  1. Create an empty folder on your computer.
  2. Create an empty text file in your folder called test.htm
  3. Open the empty file in Notepad.
  4. Copy all of the Red and Blue HTML coding above into your test.htm file and save it to disk.
  5. Right click the center of the "Overlayed" image above, and drag the image to your test folder. OR find another way to make a copy of the "Image9.jpg" file to your test folder.
  6. You can now double click, or just open, the test.htm file in your test directory.
  7. You should now see two rows and two columns of Image9 on your screen.

Creating the actual tiles

Your first step should be to use the <table class=tiles> coding to print a single tile exactly 180 Pixels Square (1,125 printed pixels) on plain paper, then lay one of your standard tiles on top of the image to insure that the printed image is the proper size. If not, you might have to play with the 180 pixel size to make it the proper size on your personal printer.

Once you are certain that the tiles will be printed the proper size, there is one more item that you will have to take care of. If you paste your printed tiles directly onto the Blank Tiles that are available from HiG, the white paper surface of the blank tiles will probably be visible around the edges of your printed tiles.

Both of these stack contain 8 printed tiles mixed into a stack of standard game tiles. The stack on the left does not have the white paper removed and the stack on the right does have the white paper removed. It is not perfect, but removing the white paper does make most of the tiles more difficult to notice.

  1. So, after you print your final tiles on to Sticker Project Paper, your first step will be to cut a shallow X into the center of the white paper covering of the Blank Tiles then slowly and carefully remove the white paper surface from the Blank Tiles.
  2. Once all of the white paper has been removed, step two will be to cut the Sticker Project Paper into single tile segments with about a quarter inch white border around each tile.
  3. Step three for each tile will be to remove a relatively small corner or edge of the sticker backing from the tile you are working with, place the tile face down on a light table, and carefully position the Blank Tile so that an extremely small edge of the printed tile can be seen around each edge of the tile paper.
  4. Step four will be to gently press the Tile onto the project paper on the revealed corner or edge, then hold the tile close to the project paper at that point and gently remove the rest of the project paper backing.
  5. Step five, gently place the tile back onto the light table to insure that each edge of the tile has a small amount of visibly printed project paper behind it.
  6. Once you verify that the tile is properly positioned on the Project Paper, step six will be to gently press the entire center of the tile onto the Project Paper.
  7. Then you can use an exacto knife to trim the project paper to the full size of the tile.
  8. Your final step will be to turn the tile over and forcefully press the edges of the project paper onto the slightly rounded edges of the Blank Tile.
  9. When this is all done properly, there should be little to hardly any white border visible on the sides of the finished tiles.

This is my HiG based German source for Blank Tiles.

And this is the Small A5 Light Box that I purchased from Amazon for $9.99.



Looking for the best way to get blank tiles and how to print on them.

Meepledrone has given me a link to the HiG based German source for Blank Tiles. The international shipping costs get a lot higher when you order a full 10 tile sheet packet, but are still reasonable for 5 tile sheets. Ordering 5 sheets brings the cost down close to the $3.99 offerred on Etsy, and the Etsy price does not include taxes and shipping! Might as well buy them from and support the original source of the game!

Special Note: The shipping cost break point; 6 tile sheets will cost 13.95 and 7 tile sheets will cost 49.95 shipping! So, the best price will be to order 6 sheets at a time!

For example: The order placd in July 2023 for 6 tile sheets at £1.49 each = £8.94, plus £13.20 shipping, plus 19% VAT, £3.54 = Total cost £22.14.

I am still looking into local sources for flatbed inkjet printering.



Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions