Formatting poetry with a specific font, and preserving whitespace, with additional formatting (italics)

Help
1

What I’m trying to do

I write a lot of poetry in my Obsidian. I am currently trying to format a poem for the page. The piece I am working on involves lines of text which need to be exactly aligned with spaces:

l
 ik
   e   is
     th

I would like to be able to specify Times New Roman or another serif font. I would also like the preview to preserve the spaces when it displays the content. And I would like to use additional markup for bold and italics.

Things I have tried

At first I tried using a <pre> block, which allowed me to write the text in a monospace font and preserve the spaces at the beginning of and in the middle of lines. However, this prevents me from using additional markup to bold and italicise text.

Next I tried using a CSS snippet to change the font to Times New Roman for display in preview. This allows me to use markup for bold and italics, but it strips all of the additional whitespace out of the resulting preview.

I could use <pre> with cssclasses to get a Times New Roman preformatted block, but I still wouldn’t have the additional markup. So I am unsure what I can do to achieve all of the features at once. I could write this in a word processor and get it to look right, but I’m not sure how to do it in Obsidian.

2

Could you use a markdown table, and remove the table lines to achieve your goal? That should allow you to align the text pieces, and allow further formatting.

3

Hmm, I’ve added several tools to write poetry in my theme called Dune.

Would you be interested to try out my theme and tell me your thoughts? If you’ve questions, let me know.

Poetry:

Indentation:

4

I’ve ended up having to write it as HTML as there are variations in line heights I wanted to achieve. I used the following techniques:

  • Include an appropriate CSS ‘reset’ to set a base style. I used:
<style>
* {
  font-family: 'Times New Roman';
  line-height: 1.5;
  font-size: 16px;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}
</style>
  • Wrap blocks of text with similar line heights in <div>s.
  • Add a style property to each block with non-standard line height which sets line-height, margin-top, and margin-bottom properties to achieve the desired spacing between the lines in each block, and between each block and its neighbours.
  • Stack &nbsp; where required to add spacing and move characters along a line.

The resulting HTML can be verified in a browser, and then copied back into an Obsidian note, where it will render correctly in the preview, except for setting the font-family, which seems to need to be done in a CSS snippet and applied to the note using cssclasses.

Before this I tried doing it WYSIWYG in LibreOffice Writer and FreeOffice TextMaker, but they both had annoying constraints on what I could do with line height.

I found that rendering the note to PDF in Obsidian did not work, half of the text was missing for some reason. Possibly related to where the page breaks fall across/within a <div> block. However, because I wrote it as HTML and verified the layout in my browser, I was able to print to PDF in my browser, which is important for me as I intend to submit this to journals, and I want the formatting to be exact.