Legitimate Sounding

They say that a picture is worth a thousand words. Unfortunately, it's also worth 1000 bytes or more. In my quest to build the ultimate game of solitaire, I needed cards, 52 of them to be exact. That's a lot of bandwidth for something as simple as cards. I decided to try to fix this problem by making my cards using XHTML and CSS.

Cards are very simple; the combination of a number, a suit and a color depict all cards. This is a fairly simple set of conditions, and is very easy to lay out. A number or letter in the upper left and lower right corners can be used to convey the card value and color helps to convey the suit. A basic card shape can be thrown together very quickly and the color and designation very easily put into the left hand corner.

.black {
 color: black;
}

.card {
 background-color: white;
 width: 80px;
 height: 100px;
 margin: 1em;
 border-style: solid;
 border-width: thin;
 border-color: black;
}

 K

Nice, but not quite there. Adding a copy of the designation to the lower right corner helps, but we still have no suit. Using HTML entities, a suit can be added, but adding this much complexity makes layout more challenging. Since the width and the height of the card are already known, it becomes possible to use absolute positioning. To prepare for this, an addition of a position: relative entry to the card class allows for some creative layout.

.card {
 background-color: white;
 width: 80px;
 height: 100px;
 margin: 1em;
 border-style: solid;
 border-width: thin;
 border-color: black;
 position: relative;
}

.black {
 color: black;
}

.suit {
 font-size: 3em;
 text-align: center;
 line-height: 100px;
 vertical-align: middle;
}

.bottom {
 position: absolute;
 bottom: 3px;
 right: 3px;
}

.top {
 position: absolute;
 top: 3px;
 left: 3px;
}

.number {
 font-size: 1em;
}

K
♠
K