How do I format poetry discussion redux

Returning briefly to this topic:

Recently, I both quoted and wrote (well, attempted to write) poetry and returned to this topic. To get a handle on the required formatting, I broke down the types of line breaks:

  • Stanza break (line break with vertical spacing)
  • Unindented line break (new line without vertical or horizontal spacing)
  • Continued line (line break with horizontal spacing)
    • Third line (same as above with added horizontal spacing)

I haven’t found a way to handle all of these except to use a code block and custom CSS, which is a viable approach (see below). However, I also found the Custom Classes plugin, which provides a nice compromise. So far, this is what I’ve implemented:

  • I defined two custom classes: poetry and poetry-indented
  • I added the following css snippet
.poetry blockquote {
    --p-spacing: 0.6em;
    text-align: left;
    padding-left: 0em;
	color: brown;
    background-color: unset;
}

.poetry-indent blockquote {
    --p-spacing: 0.6em;
    text-align: left;
	color: darkblue;
    background-color: unset;
    padding-left: 1em;
	text-indent: -1em;
}

/* Additional formatting added at a paragraph level */
.poetry-indent blockquote p {
    /* padding-left: 1em; */
}

I now can format poetry in either of two ways (HT to Joyce Kilmer for the poems). The first (and more complicated) is with indents. I can type the poem with spaces or tabs in the appropriate places and blank lines at stanza breaks, then enclose the entire poem in a blockquote. This allows me to apply the custom class to the entire poem and not to the rest of my note. Both classes render well in live preview and reading modes with the plugin and are readable without.

## A Blue Valentine

`class: poetry-indent`
> To the Ivory Throne that bursts into bloom with roses\
> `    `because of her who sits upon it,
> 
> ‘When you come to pay your devoir to Our Lady,
> 
> I beg you, say to her:
> 
> “Madame, a poor poet, one of your singing servants\
> `    `yet on earth,
> 
> Has asked me to say that at this moment he is especially\
> `    `grateful to you
> 
> For wearing a blue gown.”

For unindented poetry, I simply format as usual and enclose the poem in a blockquote with a custom class. This actually works fine without any blockquote or custom CSS—the key is the regex filters I’ve posted below.

## Trees

`class: poetry`
> I think that I shall never see.\
> A poem lovely as a tree.
> 
> A tree whose hungry mouth is prest\
> Against the earth’s sweet flowing breast;
> 
> A tree that looks at God all day,\
> And lifts her leafy arms to pray;
> 
> A tree that may in Summer wear\
> A nest of robins in her hai;
> 
> Upon whose bosom snow has lain;\
> Who intimately lives with rain.
> 
> Poems are made by fools like me,\
> But only God can make a tree.

The one case I still need to work out is how to insert stanza breaks with indented poetry—I’m close with the narrowed paragraph spacing, but I want to be able to add spacing between stanzas. I’ve tried inserting   on a line by itself, but I haven’t yet figured out the exact syntax to use. That also makes for ugly Markdown.

On a side note, I use the following regex to add line breaks to poetry, so that I don’t have to type them on every line. (Note: most Obsidian regex plugins require a literal newline and backslash in place of \n and \\ in the replacement string. Apparently this is a quirk of Obsidian’s regex engine. The regex filters also need to be applied to plain text, without the blockquote.)

"([^\\\n])\n([^\n])"->"$1\\\n$2"

This regex will remove the line breaks and return to normally formatted text:

"\\$"->""

Another approach:

  • Format poetry manually with desired white space.
  • Put the text into a code block preceded by the custom CSS class, `class: poetry-indent`
  • Add “text” as the language type: ```text
  • Add the following CSS to a snippet:
.poetry-indent code {
	font-family: Optima;
    font-size: 1em;
    color: gray;
}

.poetry-indent pre {
    text-align: left;
    /* --code-white-space: pre-wrap; */
    --code-background: none;
    padding-left: 0em;
}
  • Different CSS settings are applied to the code and pre blocks, so I split them out into separate style blocks.
  • Custom CSS is applied in source, live preview, and reading modes, but not when editing the code block. That is probably due to how the Custom CSS plugin works.
  • I haven’t been able to get the --code-white-space variable to work well, which is why I added “text” as the language type—that disables a lot of Obsidian’s code formatting and leaves plain, preformatted text. Probably any unrecognized language name would work.
  • Text within the code block was a bit smaller than the surrounding text, so I manually set the size to 1em.
  • Alignment can be set as desired (e.g., centered).

I haven’t yet tried exporting the note to HTML or PDF, but the formatting works within Obsidian.