Ciao amici !
This article is intended primarily for writers who have at least some familiarity with web page formatting. For those who are not familiar with the terms used here, if you follow the instructions given you sholud have good results also. If you have not read my first article on typography, please read it here.
When I first started submitting poetry to PoetrySoup, one of the most difficult things I encountered was the lack of typography options in the poem submission (editing) field on the Submit Poem page. The suggestions I make here are (mostly) for poems and the information area related to poems on the poem submission page.
For me, the most irking typographical thing is the lack of white space, in particular the left and right margin space. By default, poems are left justified very close (about 1 em) to the left margin, which, in my opinion, distracts from the content of the poem.
So, I began looking for a way to add some white space to the left of each line. My first idea was to add several spaces at the beginning of each line, but that got pretty boring on longer poems and did not work in the poem information section preceding the poem.
After some playing around, I discovered that I could use a stylesheet to add a left margin to the entire poem. To do that, I only needed to click the "Source" button on the "About Poem" field further down the page. This enabled me to add a style to the poem field.
Poems are displayed in a <pre> ... </pre>
block which means that the poem is displayed exactly as entered in
the poem field on the submission page. Fortunately there is only one <pre>
block on the page when displayed for reading. Thus, by entering the <style type="text/css">....</style>
in the source view, I could use any css I needed.
To add wider left and right margins around the poem,
enter the following in the source view:
<style type="text/css">
pre
{margin-left: 2em; margin-right:2em; }
</style>
which will result in a 2 em (the width of 2 "m" characters, about 1/4 inch) margin, left and right of the text.
I prefer serif fonts to the default san-serif font, so I added a definition for that:
font-family: serif;
which causes the default serif font (usually Times or Times New Roman) to display the text. I also prefer a little larger text size (the default is 14px) so I increased that with the addition of
font-size: 16px;
and a little more leading for easier reading, so I added
line-height: 1.5;
Thus, my default style for a poem is:
<style type="text/css">
pre {margin-left: 2em; margin-right:2em;
font-family: serif;
font-size: 16px;
line-height: 1.5;}
</style>
Here is an example of how each looks, first the default followed by my changes:
Dawn's light seeks to obliterate silence
Night overpowers Day's cacophony
Loneliness reaches to touch a heart
Darkness sings the song of fire.
Dawn's light seeks to obliterate silence
Night overpowers Day's cacophony
Loneliness reaches to touch a heart
Darkness sings the song of fire.
I you want the poem right justified, simply add
text-align: right;
to your style definition, with the resulting:
Dawn's light seeks to obliterate silence
Night overpowers Day's cacophony
Loneliness reaches to touch a heart
Darkness sings the song of fire.
Obviously, you can add any other styles you want.
To add a left and right margin to the poem's information section, a new style definition must be added.
<style type="text/css">
.collapsePanel {margin-left: 2em;
margin-right:2em; }
</style>
In a similar fashion, blog entries can be formatted. However,
in order to access only the blog text, it must be wrapped in its own, named, block, i.e. in a
<div>....</div>
tag pair. So, to add left and right margins, the style sheet might be:
<style> type="text/css">
#name {margin-left: 2em;
margin-right:2em; }
</style>
<div id="name">Write your text here</div>
The result will be similar to this page.
If you want to use any of the styles above, simply copy the style defintion from
<style type="text/css">to
</style>
and paste into a simple text document. I keep the definitions in a plain text (.txt) document on my desktop for easy access. Be sure that you have all of the style definition, from
tag. Also, be sure to check the results when published and make any necessary corrections or changes.
If you have any questions, please post them in the comments below.
Thanks for reading, and good luck
- beto