The puzzles I’ve posted so far have been easy-to-describe as “like sudoku, but…”. But, as I’ve done more research into the mathematics underlying these types of puzzle systems, I’ve come to realize that the “sudoku-like”ness of these puzzles is captured entirely by the concept of the “Latin square”. And, in doing further research into Latin squares, I found a neat kind of puzzle that seems very underexplored.

If you’d like to skip the writeup and just solve some puzzles, you can play it here.

Latin Squares

Latin squares are a type of pattern that underlies a huge number of common pencil and paper logic puzzles. A Latin square is an NxN grid, where each square of the grid is filled in with one of N unique symbols, under the constraint that each symbol appears exactly once in each row or column. For example, we can construct a 5x5 Latin square as:

A B C D E
D A E B C
C E D A B
E D B C A
B C A E D

You can see that each letter A, B, C, D and E, appears exactly once in each row and in each column.

This makes up 2/3s of the constraints of arguably the most popular pencil and paper puzzle in the world: sudoku. Sudoku, played on a 9x9 instead of a 5x5, simply adds the constraints that the each symbol can only appear once in each 3x3 “house” of the grid.

And sudoku is not alone. Latin squares are kind of like the mayonnaise of pencil and paper logic puzzles. Most people don’t just sit down and eat mayonnaise, but 70% of all dipping sauces are just “mayonnaise + spices”. Similarly, few people solve Latin squares for fun, but 70% of pencil and paper logic puzzles are just Latin squares with extra constraints.

Orthogonal Latin Squares

It’s possible for a pair of Latin squares to have a property called “orthogonality”. Two “orthogonal” Latin squares have the property that if you pair up their corresponding cells, the same pair of symbols will appear in exactly one pair of corresponding cells.

A B C D
C D A B
D C B A
B A D C
1 2 3 4
2 1 4 3
3 4 1 2
4 3 2 1

It’s a little hard to see the pairings with them separated out into two squares like this, so, orthogonal Latin squares are often written as a single square with the corresponding values from each constituent square written together in the same cell:

A1 B2 C3 D4
C2 D1 A4 B3
D3 C4 B1 A2
B4 A3 D2 C1

You can see that, not only do the letters and numbers separately obey the Latin square rule, but also each combination of letters and numbers appears exactly one time.

Examples with two orthogonal Latin squares are sometimes called “Graeco-Latin squares”, because they usually use Latin alphabet symbols and Greek alphabet symbols. However, for large enough Latin squares, you can actually find sets of more than 2 Latin squares that are all pairwise orthogonal to one another. This is called a set of “mutually-orthogonal” Latin squares.

A1X B2Y C3Z D4W
C2W D1Z A4Y B3X
D3Y C4X B1W A2Z
B4Z A3W D2X C1Y

You can see that “A” and “1” appear together in the same square in the top left square only, and never appear together in any other square. The same is true of “A” and “X” and the same is true of “1” and “X”. The ABCD, 1234 and WXYZ Latin squares are all orthogonal to one another.

Since this is kind of like 3 layers of Latin squares, in some ways, it’s almost like a 3-dimensional latin square, where the third dimension selects one of the Latin squares.

The 3 mutually-orthogonal latin squares above, displayed as three separate Latin squares, layered to create a 3d visual effect

For NxN Latin squares, the maximum achievable number of mutually-orthogonal Latin squares is known to be N-1 (although this is not achievable for every N). For example, you can have 3 mutually orthogonal 4x4s as in the example above, or 4 mutually-orthogonal 5x5s (here with the symbol sets: ABCDE, 12345, VWXYZ and ?!%@&):

D4X? E5W! A1V% B2Y@ C3Z&
E3V@ B1X& D2Z! C4W% A5Y?
B5Z% C2V? E4Y& A3X! D1W@
C1Y! A4Z@ B3W? D5V& E2X%
A2W& D3Y% C5X@ E1Z? B4V!

It’s the 4 mutually-orthogonal 5x5s that ties into the puzzle being introduced today, as the puzzle is essentially just a challenge of completing a partially filled-in set of 4 mutually-orthogonal 5x5 Latin squares.

Cleaning up the UI for 4 Mutually-Orthogonal 5x5s

The 4 mutually-orthogonal 5x5s make for a more interesting puzzle than standalone Latin squares, but it presents a bit of a unique user interface challenge for how to present the puzzle in a readable way. Luckily, 4 letters per square maps in a fairly natural way onto the four corners of the square.

A 5x5 square with the letters associated with 4 orthogonal 5x5 Latin squares each placed in corresponding corners of the squares of the grid.

For each square, one of the four quadrants is used to store that square’s element of one of the four Latin squares. I’ve used thinner, disconnected lines to separate the quadrants so that it’s more clear which subsquares are grouped together as quadrants of a single square.

However, this selection of symbols for the quadrants is a little arbitrary and hard to remember, as well as being hard to type.

In an earlier prototype of the game I had attempted to solve this readability issue by using symbols derived from a standard keyboard layout.

A corner place puzzle with a mix of symbols, and four separate sets of buttons below, each comprising one quarter of the top 20 alphanumeric keys of the keyboard

These symbols were derived from the top two rows of a standard keyboard, which each contain 10 alphanumeric characters. This version actually made the rules of the puzzle a little easier to explain, but the sets of symbols used for each quadrant were somewhat arbitrary which made it difficult to figure out what symbols were allowed in a particular quadrant without looking down at your keyboard.

So, I revised this and took a slightly different approach.

A 5x5 square with the letters associated with 4 orthogonal 5x5 Latin squares each placed in corresponding corners of the squares of the grid; all latin squares use the same symbols.

I tried out using the same symbols: just the numbers from 1 to 5, for all four quadrants. This makes it easier to remember what symbols are allowed in each quadrant, since the same symbols are allowed in all four quadrants. However, it has some readability issues; it’s harder to scan over the board and quickly situate yourself and identify which quadrant a particular number belongs to. To address this, I tried introducing different fonts for each quadrant:

A 5x5 square with the letters associated with 4 orthogonal 5x5 Latin squares each placed in corresponding corners of the squares of the grid; all latin squares use the same symbols.

This seems to work well enough in practice, even with just a collection of off-the-shelf Google fonts. I tried to pick a quartet of meaningfully distinct fonts: a sharp solid font, a rounded solid font, a sharp font with an open interior and a rounded font with an open interior

However, this only helps when looking at a filled-in square, but often you need to identify matching quadrants across several squares that may not be filled in. So, I added a number of other visual aids to help with identifying corresponding quadrants across multiple squares quickly.

Hovering over or pressing a quadrant will automatically highlight the corresponding quadrants in all of the squares in the same row or column:

An animation of the mouse hovering over a puzzle. as it moves, all squares in the same row or column have the same quadrant highlighted as the one that the mouse is currently over.

This helps to quickly identify which numbers have already been used and are not valid for a particular quadrant of a particular square.

I also added a helper feature for checking what values should be excluded based on already existing pairs in different squares. Remember the core rule of orthogonal Latin squares: each pair of values appears together in exactly one square. In the case of this puzzle: no two squares may have the same pair of numbers in the same pair of quadrants.

This helper is activated when you press down on one quadrant, and then drag to another quadrant of the same square.

The mouse presses down on a quadrant, then moves to another quadrant. A corresponding quadrant in another square that shares the same value becomes highlighted.

Every square that shares the same value in the quadrant you dragged to gets highlighted-- both the shared value (in blue), and the quadrant corresponding to the one that you initially pressed down on (in green, like the rows and columns). This makes it easy to get a visual read on what squares can cause a conflict. In this example, 1, 2 and 5 are in the same row or column, and the press-and-drag feature reveals a 3 that has already been paired with the northeast 1, meaning that 4 is the only valid option remaining.

I’m still not 100% sure that the font-based approach, or at least this particular set of fonts, is the right solution. I’ll likely continue to iterate on improving the visuals of the puzzle over time.

Wrapping Up

The more I worked on Corner Place, the more surprised I became that this wasn’t an existing puzzle game. It has a very classic sort of feel to it. Maybe the information overload of having to cross-reference squares in such a strange way is a part of it, as it definitely took a lot of iteration to work it into something playable-- and I’ll probably continue to tweak the UI as time goes on. But if you’d like to try it out for yourself to see how well these little UI tweaks have come together, you can try playing the game here.