Concert Ticket Generator

Someone showed me this Concert Ticket Generator, which uses software on the server end to create a jpeg file based on what you type. I figured it should be possible to do it all with HTML and CSS, and not require any behind-the-scenes processing.

This page is my attempt to do that. This will explore some features about CSS, and the current state of the art and limitations of the standards.

Fonts

The inspiration site credits Larabie Fonts for the font that looks like the kind of printing done by these machines.

Now the first issue: how can you see this font in your browser? There is no standard for embedding fonts. Actually, CSS2 mentioned something (@font-face), but it was removed in CSS2.1.

The Fake Receipt font only has one variation. The effect of doubling the height was done by the program. Really, a good font would have variations toat correspond to the effects produced by those machines. Stretching the glyph is not authentic. The machine prints more dots to double the height, and does not work by making the dots into ellipses!

Backgrounds

It should be possible to make the different colored areas in the ticket by using backgrounds in CSS. A background image could be mapped to the entire table, scaled to fit. Solid colors could be assigned to different table cells, with images only at the edges of cells.

CT0207	GA	xx	yyyyy	ADULT
$42.00	GEN ADMISSION			$42.00
C 39812	SAYS-IT PRODUCTIONS PRESENTS
GA	SAYS-IT AND THE GENERATORS
CL 3X	w/ SURPRISE SPECIAL GUEST
	COLISEUM AMPHITHEATER
CTG3991	NO CAMERAS/RECORDERS
02FEB07	FRI 2 FEB 2007 8:30PM

Above is a primitive attempt at layout using a table, depending on installed fonts, it’s not half bad. The point here is that the green background is done simply by assigning a background-color to the TABLE element.

That still allows you to override individual cells. Here some colors are applied to some of the cells in the table as well:

CT0207	GA	xx	yyyyy	ADULT
$42.00	GEN ADMISSION			$42.00
C 39812	SAYS-IT PRODUCTIONS PRESENTS
GA	SAYS-IT AND THE GENERATORS
CL 3X	w/ SURPRISE SPECIAL GUEST
	COLISEUM AMPHITHEATER
CTG3991	NO CAMERAS/RECORDERS
02FEB07	FRI 2 FEB 2007 8:30PM

This shows green lines between what is supposed to be a contiguous white area. By having different colors on inner and enclosing elements, it makes apparent some details about the box layout model that we normally don’t worry about. But to get this kind of layout right, we need to pay attention to the difference between the content area of a box, the padding, margin area, and border.

Using the BORDER attribute of the TABLE element, the lines between cells in a table were special magic applied just for tables. I use the past tense, because the whole pre-CSS layout of tables is rather vague in the HTML standard. In contrast, CSS describes tables in detail and we can rely on standard and controllable behavior. Specifically, the lines in question are simply borders, as present on any box.

CT0207	GA	xx	yyyyy	ADULT
$42.00	GEN ADMISSION			$42.00
C 39812	SAYS-IT PRODUCTIONS PRESENTS
GA	SAYS-IT AND THE GENERATORS
CL 3X	w/ SURPRISE SPECIAL GUEST
	COLISEUM AMPHITHEATER
CTG3991	NO CAMERAS/RECORDERS
02FEB07	FRI 2 FEB 2007 8:30PM

Adding these style lines

#ticket3 {
	border-collapse: collapse;
	border: thick solid #8f8  }
#ticket3 TD { border: none }

causes thick green borders to appear around the whole table, while all interior lines are gone. I want the cells to have no separation, and the spacing of the text will be done with padding.

Supplimental Images

It is not necessary to have a background image entirely in a bitmap file. If most of it is a solid color, like we have here, then only the odd bits can be bitmapped and the bulk done with CSS colors. The next trick is to show a feature between the left and right columns.

This is done by having a narrow bitmap that only has that feature, and attaching it to the left edge of each cell on the right, or the right edge of each cell on the left, or both if it straddles. The important point is that the image can be specified to not repeat, so it only shows one small image, and the rest of the box is then the background color. Furthermore, the image can contain transparant parts.

CT0207	GA	xx	yyyyy	ADULT
$42.00	GEN ADMISSION			$42.00
C 39812	SAYS-IT PRODUCTIONS PRESENTS
GA	SAYS-IT AND THE GENERATORS
CL 3X	w/ SURPRISE SPECIAL GUEST
	COLISEUM AMPHITHEATER
CTG3991	NO CAMERAS/RECORDERS
02FEB07	FRI 2 FEB 2007 8:30PM

The background bitmap is assigned to the right edge of the first column. Defining the COL as an HTML element doesn’t work, because the background colors on the individual cells (red and white) appear on top. This layering order in CSS cannot be changed. (or is it because Mozilla-based browsers don't support COL and COLGROUP?)

It is still simple to put the same background on every cell in the first column, without adding anything to the HTML! Use the :first-child pseudo-class:

#ticket4 TR > TD:first-child { background-image: url(vstripe.png) }

That is, the first TD in each TR in the table identified as ticket4 will have this style.

Can't, without snapping to the viewport: >> Finally, a single coherent image can span multiple boxes (table cells) by aligning them with the enclosing table, not starting the alignment over in each cell. Need to use nested tables.