Sunday, November 02, 2003

How to Create Your Own Poetry Postcard

Today's lesson requires some prior knowledge of both html and Cascading Style Sheets. I measured a standard picture postcard, and arrived at the dimensions 4.25 x 6 inches. In Photoshop, I created an image this size, and determined the image would be 334px x 432 px. Simple multiplication and division determined sizes from there; for example, if the message size side of the card were to be as large as the address side (as is true with most picture postcards), the message side could only be 231 px x 334 px.

After a couple of days of playing with this format, I arrived at some standards which could be put in a stylesheet:
body { background: #4682B4 }
/*This makes the over-all background about the same shade as "Word Perfect" blue*/

td {vertical-align: top }
/*This guarantees the image, and the poem, will begin at the top of any table cells*/

h3 { font-family: 'comic sans', cursive, verdana, sans-serif; text-align: center }
/*This is the font I selected for the address side of the card. Note I offer a couple of alternative fonts in the event the user's machine does not have "comic sans"*/

#cit { font-family: verdana, sans-serif; font-size: 8 pt; }
/*This is the font and font size for the citation which appears beneath the picture*/

#bottom { vertical-align: bottom; font-size: 8pt;}
/*This is primarily used for the "Daphne Productions" credit*/

#stamp { float:right; vertical align: top }
/*Obviously, this controls where the "stamp" image will appear*/

For most of my postcards, I have used a table to control where things appear. The next generation of Web whiz-kids are opposed to using tables for formatting, but this is a relatively small one. You'll note that I've left myself a trail of section headings, as comments.
<table align="center" height="668">
### That "668" is twice "334"; this guarantees the table will at least be as tall as both sides of my "virtual postcard" ###
<tr>
<td colspan="2">
### The following assumes the image is landscape. I use a different format for "portait", which I'll discuss below. ##
<img src="http://server/images/filename.jpg" width="432" height="334">
</td>
</tr>
<tr>
### CARD BODY ###
<td width="216" height="334" bgcolor="#87CEFA">
### The "bgcolor" (background color) here is a slightly lighter blue that the body of the page. Blue was selected because it is easier on the eyes than white ###

### Picture Citation ###
<div id="cit"><font size="-2">
Author Name and dates
Picture title
Media and dimensions
source (and link to website, as appropriate)
</font></div>
### CARD TEXT ###
<p>WRITE POEM HERE</p>
<div id="bottom"><font size="-2"><i>Daphne Productions</i></font></div>
</td>
<td width="216" bgcolor="#87CEFA">
### Place for inside address and stamp ###
<div id="cit"><font size="-2">Address</font></div>
<div id="stamp">
<img border="0" src="http://server/dir/Images/filename" width="57" height="81"></div>
### The dimensions of the stamp are arbitary - based on what looked good to my eye. The empty line below
is outrageous fudging to allow space between the stamp and the fictious address. ###
<h4> <br /> </h4>
### Mailing Address ###
<h3>Name
Address
City, State, etc</h3>
</td>
</tr>
</table>

As far as that "216 px" restriction goes, about the best format I've found is three stanzas of three verses each. The lines need to be relatively short, as well; the available space seems to be about 18 em, when using 12pt 'Times New Roman' font. Anything beyond that becomes a notecard, rather than a postcard. And I've done a few of those as well.

The advantage of these external limitations is they force one to be brief and concise. There is also an element of "first thought, best thought" at operation, since there is little chance for editing once an actual postcard has been mailed.

I share the code for any poetic geeks out there who want to explore the possibilities of this form.

No comments: