Making Literature on the Web Look Like Literature
           —Greg Bryant, Highland Community College

Literature needs some special formatting to look good on a web page.

<p>These are normal paragraphs, using default browser formatting. All you need are the “start paragraph” code at the start of each paragraph and the “end-paragraph” at the end, as illustrated here. It’s dull, but it works.</p>

But to make literature look like literature, you need to use some simple CSS (“cascading style sheet”) codes. This page shows you examples of such codes for stories, poems, and plays. The CSS codes to make these work are self-contained in the header of this html file, which you can copy and paste into your own html files. To view it, just go to the menu bar of your browser and choose View / Page Source.

Note: To use CSS styles in blogs like Wordpress, you have to make some changes, and you probably have to buy an upgrade. Ask me about it.


Poems

The “poem” tags define all the paragraphs between them as hanging-indent, in case the line wraps. There’s also no space between paragraphs, because each line is a paragraph.To “tab in” a line, as for the Emily Dickinson poem shown here, you could use a series of “non-breaking spaces” (&nbsp;) — otherwise the browser ignores all but the first space — but it’s a little tidier to define and use a “tab” paragraph class as we’ve done here. Here's the poem as it would appear in the html document. Notice you need a non-breaking space inside the paragraph codes to make a blank line. Also notice the code for a long dash is &mdash; ...

<div id="poem">
<p>I heard a Fly buzz&mdash; when I died&mdash;</p>
<p class="tab">The Stillness in the Room</p>
<p>Was like the Stillness in the Air&mdash;</p>
<p class="tab">Between the Heaves of Storm&mdash;</p>
<p>&nbsp;</p>
<p>The Eyes around&mdash; had wrung them dry&mdash;</p>
<p class="tab">And Breaths were gathering firm</p>
<p>For that last Onset&mdash; when the King</p>
<p class="tab">Be witnessed&mdash; in the Room&mdash;</p>
<p>&nbsp;</p>
<p>I willed my Keepsakes&mdash; Signed away</p>
<p class="tab">What portion of me be</p>
<p>Assignable&mdash; and then it was</p>
<p class="tab">There interposed a Fly&mdash;</p>
<p>&nbsp;</p>
<p>With Blue&mdash; uncertain&mdash; stumbling Buzz&mdash;</p>
<p class="tab">Between the light&mdash; and me&mdash;</p>
<p>And then the Windows failed&mdash; and then</p>
<p class="tab">I could not see to see&mdash;</p>
<p>&nbsp;</p>
<p class="tab">&nbsp;&nbsp;<i>&mdash;Emily Dickinson&mdash;</i></p>
</div>

And here’s how it looks on the page ...

I heard a Fly buzz— when I died—

The Stillness in the Room

Was like the Stillness in the Air—

Between the Heaves of Storm—

 

The Eyes around— had wrung them dry—

And Breaths were gathering firm

For that last Onset— when the King

Be witnessed— in the Room—

 

I willed my Keepsakes— Signed away

What portion of me be

Assignable— and then it was

There interposed a Fly—

 

With Blue— uncertain— stumbling Buzz—

Between the light— and me—

And then the Windows failed— and then

I could not see to see—

 

  —Emily Dickinson—

The “hanging-indent” feature doesn’t much matter on Emily, but for poets like Walt Whitman and Allen Ginsberg it’s essential ...

I saw the best minds of my generation destroyed by madness, starving hysterical naked,

dragging themselves through the negro streets at dawn looking for an angry fix,

angelheaded hipsters burning for the ancient heavenly connection to the starry dynamo in the machinery of night,

who poverty and tatters and hollow-eyed and high sat up smoking in the supernatural darkness of cold-water flats floating across the tops of cities contemplating jazz,

who bared their brains to Heaven under the El and saw Mohammedan angels staggering on tenement roofs illuminated, ...

 

           —from “Howl” by Allen Ginsberg—

By the way, if you look at the source code you’ll see I used an alternate “poem” definition called “poem-alternate” for Ginsberg so I could use this cool font instead.


Stories and Essays

Prose is simpler. The “story” tags just change the paragraph style to tab in the first line and to leave no space between paragraphs. This code ...

<div id="story">
<p>It was an exceptionally hot, bright day. The pool was crowded, loud,
and exciting, but now it was time to go home. Dad was getting some drinks
for the ride back as Freddie waited in a plastic chair next to a young
couple.</p>

<p>&ldquo;What&rsquo;s he doing?&rdquo; said the man.</p>

<p>&ldquo;Going off the high board,&rdquo; said the woman. &ldquo;Can he do that?&rdquo;</p>

<p>This got Freddie&rsquo;s attention. He hoped to qualify for the high board
someday.</p>

<p>&ldquo;I don&rsquo;t know, but it looks like he&rsquo;s doing it,&rdquo; the man said, never
taking his eyes from the small, thin boy walking on the high board. &ldquo;Maybe
he tested with the lifeguard yesterday when he went with the Bensons.&rdquo;</p>
</div>

... creates this effect:

It was an exceptionally hot, bright day. The pool was crowded, loud, and exciting, but now it was time to go home. Dad was getting some drinks for the ride back as Freddie waited in a plastic chair next to a young couple.

“What’s he doing?” said the man.

“Going off the high board,” the woman. “Can he do that?”

This got Freddie’s attention. He hoped to qualify for the high board someday.

“I don’t know, but it looks like he’s doing it,” the man said, never taking his eyes from the small, thin boy walking on the high board. “Maybe he tested with the lifeguard yesterday when he went with the Bensons.”

Notice that the keyboard quotation marks ("") are fine — if you want to do it the easy way. But to make it look like real literature, use the left & right versions of quotation marks (“”). They’re made with the codes &ldquo; and &rdquo;. Single quotes (‘’) are made with &lsquo; and &rsquo;.


Plays

Plays, like poems, use “hanging indent.” This makes it easier to see who’s speaking. One special tag is needed whenever you want to distinguish some text as stage directions, so we have a “class” called “direction.” It can be used as a “div” (which makes a separate indented paragraph) or as a “span” (which just changes the style for part of a paragraph). In either case it throws the selected part into italics. This code gives an example ...

<div id="play">
<p class="direction">As the curtain rises, GLORIA is reading at the plush
chair with the lamp on despite the diffuse daylight of the windows. The doorbell
rings. She places her bookmark, closes the book and sets it aside, turns off the
reading light, rises and opens the door.</p>

<p>PRATT: Hi, Miss Pennington. We&rsquo;re a little early.</p>

<p>GLORIA: Come in!</p>

<p>PRATT: Then if you&rsquo;re ready, I&rsquo;ll go back to the car and get Mr. Barrett.</p>

<p>GLORIA: Yes, you do that.
<div class="direction">(PRATT disappears from the doorway. GLORIA turns
gracefully away from the door, takes a deep breath and releases it, closes her
eyes a moment and stands still. She opens her eyes and faces the doorway. PRATT
appears.)</div>
Come in, come in.</p>

<p>PRATT: <span class="direction">(Enters, followed by BILLY in handcuffs.)
</span> This is William Barrett. &mdash;Mr. Barrett, Miss Gloria Pennington. &mdash;We have about an hour till we have to get him back.</p>
</div>

And the result looks like this ...

As the curtain rises, GLORIA is reading at the plush chair with the lamp on despite the diffuse daylight of the windows. The doorbell rings. She places her bookmark, closes the book and sets it aside, turns off the reading light, rises and opens the door.

PRATT: Hi, Miss Pennington. We’re a little early.

GLORIA: Come in!

PRATT: Then if you’re ready, I’ll go back to the car and get Mr. Barrett.

GLORIA: Yes, you do that.

(PRATT disappears from the doorway. GLORIA turns gracefully away from the door, takes a deep breath and releases it, closes her eyes a moment and stands still. She opens her eyes and faces the doorway. PRATT appears.)
Come in, come in.

PRATT: (Enters, followed by BILLY in handcuffs.) This is William Barrett. —Mr. Barrett, Miss Gloria Pennington. —We have about an hour till we have to get him back.


That should get you started. —Let me know if you need help.

Greg Bryant — Dept. of English
Highland Community College
600 West Main
Highland, KS 66035
email — gbryant@highlandcc.edu


Font test:

“JSL Ancient” regular, bold, italic
“Cock” regular, bold, italic
“Jane” regular, bold, italic
“William Shakespeare handwriting” regular, bold, italic
“Aquiline” regular, bold, italic
“Garamond” regular, bold, italic