-- Leo's gemini proxy

-- Connecting to gem.acdw.net:1965...

-- Connected

-- Sending request

-- Meta line: 20 text/gemini; charset=UTF-8

2020-08-05-Typesetting-verse

Typesetting Verse


I was talking a bit today on IRC/#gemini about verse typesetting -- there was talk about the alt-text for the 'pre' line-type, and I brought up how it'd be nice to have a verse style, though I was mostly joking -- verse is a niche concern pretty much anywhere, even though I think about it a fair amount due to being what I suppose you could call a "poet" -- I struggle with defining myself that way for reasons that are definitely out of scope for what I'm writing here, and possibly out-of-scope for any context save a therapist's office -- but I digress.¹ ²


Since I've done a fair amount of verse publishing -- in my undergraduate⁴ and graduate theses⁵, in the couple of literary⁶ magazines⁷ I've been a part of, and self-publishing on my own website⁸ -- I've come to what I think is a pretty good system for typesetting verse, at least online. In something like LaTeX, it's easy -- you just


\begin{verse}
\end{verse}

and Bob's your uncle, but HTML doesn't have a dedicated verse tag (maybe it'll be in HTML6, who knows?). So I kind of hacked something together.


There's a few considerations to make with verse that prove a special typesetting challenge:⁹


Whitespace is important


Not as important as, say, Python, but still ... the artist put it there, so it must *mean* something, say the literature professors. (As a poet, let me tell you that it probably meant only "oh that looks ~cool~.") There's a couple of ways poems use whitespace.


At the beginning of a line. Sometimes there's a pattern --


 His classic studies made a little puzzle,
   Because of filthy loves of gods and goddesses,
Who in the earlier ages raised a bustle,
   But never put on pantaloons or bodices;
His reverend tutors had at times a tussle,
   And for their Aeneids, Iliads, and Odysseys,
Were forced to make an odd sort of apology,
For Donna Inez dreaded the mythology.

~ Lord Byron, Don Juan, canto 1:42


-- sometimes there's just *not*.

	       Eiffel Tower
	       Guitar of the sky
					Your wireless telegraphy
					Draws words to you
					As a rose-arbour draws bees
	       In the night the Seine
	       No longer flows
					Telescope or bugle
					Eiffel Tower
	       And a beehive of words
	       Or the night’s inkwell
	       At the dawn’s base
	       A spider with wire feet
	       Spins its web with clouds
Do

    re

	 mi

	      fa

		   sol

		       la

			    ti

				do


	       We are high up:
	       A bird calls
	       In the antennae
	       Of the wireless
					It is the wind
					The wind from Europe
					The electric wind

~ Vincente Huidobro, Eiffel Tower (h/t iolfree)


(Seemingly) Randomly, in the middle of the line, usually as a caesura.


I am here		, and there is nothing to say			.
									If among you are
those who wish to get	somewhere		,			let them leave at
any moment		.				What we re-quire			is
silence			;	but what silence requires
	is		that I go on talking	.

~ John Cage, Lecture on Nothing¹⁰


Both of these types of white space need to be respected, and HTML doesn't respect either one of them by itself. So good verse typesetting in HTML needs something like

.verse { whitespace: pre-wrap; }

to work.


Long lines


Some poems have extremely long lines. This is a typical line from Allen Ginsberg's famous "Howl":


Peyote solidities of halls, backyard green tree cemetery dawns, wine drunkenness over the rooftops, storefront boroughs of teahead joyride neon blinking traffic light, sun and moon and tree vibrations in the roaring winter dusks of Brooklyn, ashcan rantings and kind king light of mind,

~ Allen Ginsberg, Howl¹¹


If you follow the link there, you'll see that the Poetry Foundation does the correct thing and gives each long line a hanging indent of about 2ch. While I've often pondered about a poem that has both long lines and indented-by-2ch lines, and how that would break this whole operation, the convention is what it is. And yeah, you can look at what the Poetry Foundation does to *their* long lines, but I don't care about them -- this is about me. The CSS here took a little while to hammer out, but I got it in the end:


.verse .line {
  text-indent: 2ch;
  margin-left: -2ch;
  position: relative;
  left: 2ch;
}

As semantic as possible


The big thing about HTML5 is that it's supposed be semantic. I want the same thing for verse -- it's easy with LaTeX because, again, you have `\begin{verse}`, which is about as semantic as you can get. With HTML, I wanted to group the elements similarly. So instead of, say, `<div class="verse">` I do `<p class="verse">`, since stanzas are basically verse paragraphs. For lines, I like using `<span class="line">` instead of `<br>`, since those spans enable me to break the lines better and separate them more logically. It also enables styling to collapse the linebreaks into `/` and `//` notation, if you just want to do it that way.¹²


You'll see the way I do it in just a moment. As I'm writing this, I realize that you *could* write it this way, too -- I think it requires more thought, or is maybe just down to personal preference.


<pre class=verse>
     <p>
	<span class=line>...</span>
	...
     </p>
     ...
</pre>

Some really weird stuff


Sometimes poems get so weird that they *need* to be monospaced, or just printed as an image. You can find those around; I don't write poems like that, so that's not what this is about either.


Solution


After much consideration, then, I've reached the following solution in HTML + CSS that I employ when I want to typeset verse.


HTML


<p class=verse>
    <span class=line>...</span>
    ...
</p>

CSS


.verse {
       white-space: pre-wrap;
}
.verse .line {
       text-indent: 2ch;
       margin-left: -2ch;
       position: relative;
       left: 2ch;
}

Coda


Sooo.... as I finally went to write the code in the solution, I looked at my own site ... which is set up a little differently. I have `<pre class=verse>` paragraphs instead of `<p>` ones. I feel only slightly sheepish and I might actually change the site later. One thing that is different about my CSS is that I've added a `font: inherit;` rule to .verse, since otherwise it'd be in monospaced text.

If you'd like a reference, see the source to my site here:

(see I/S/acdw.css and lib.sh)


Anyway, this is how I do things. I'd love to hear how others typeset verse in a variety of document formats!


Other talk


~ Transjovian, Poetry (ref. IRC conversation)

~ bouncepaw, Extending gemtext's preformatted text

... others?


- = - = - = - = - = - = - = - = - = - = ~ = - = - = - = - = - = - = - = - = - = -


¹ "But I digress" is maybe one of my favorite phrases. The rhythm of it, the kind of self-aware, shy nod, saying "oh, this is still interesting, but I can't talk about it right now due to the linear movement of time and the constraints we all face as mortal beings..." though maybe I'm reading a *little* too much into it. At any rate, it's a fun thing to say, and I don't get to say it much in my day-to-day, non-gemini life.


² Also, can we talk about the amounts of indirection I've written in that first paragraph?! I've got parenthetical inside parenthetical, with only the barest hint that I'll return to the main thrust of this article, whatever that may be. We don't even really know what it is yet. I know I don't; I'm writing these footnotes as they come up in the text, though you might be reading them whenever.³


³ Speaking of, I love footnotes. I'm not at a David Foster Wallace level of love, but they're fun too. And apparently I'm in a footnote mood. I also love these little Unicode footnote numbers -- you can have your own here:

https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts

I just copied and pasted them.


⁴ Elegies for Alternate Selves


⁵ Autocento of the breakfast table


⁶ Sequoya Review


⁷ Thin Air


⁸ acdw.net


⁹ For all of these examples, I'm using text/gemini's ``` preformatted blocks, which will render the text (in some of the more fancy browsers) as monospaced. Not all poetry is monospaced, of course -- only the really good stuff written by a hipster on a typewriter for $5 on the street corner at one of those little local festivals that pop up in smallish towns in the summer or early fall.


¹⁰ This is actually a good example of a poem that would *need* to be typeset in monospace. Weirdness abounds.


¹¹ I *was* going to use the famouser first line ("I saw the best minds of my generation ..."), but it turns out it's actually almost a normal length, which was disappointing to me.


¹² This little bit of CSS is left as an exercise for the reader.



~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Copyright (c) 2019-2020 Case Duckworth. CC-BY-SA.

History

Raw

HTML

-- Response ended

-- Page fetched on Fri May 3 02:57:54 2024