Center text for selected notes (Poetry collection) [CSS]

I want to center all texts in note of my poetry collection. It is only selected files not whole poetry vault.

I tried to add:

  • <body class="poetry">POEM TEXTS</body>>
  • & in CSS I defined body.poetry{text-align =center}>

But for some reason the Obsidian ignores the body tag and text is aligned by default to left.


Do you have another idea how to center all text in specific note, without doing it manualy for each verse? Take in cosideration that I don’t want to create new Vault with all text aligned in center.

1 Like

What about using <div> or <span> instead of <body>? I wouldn’t have expected body to work.

There’s no way beyond adding some custom HTML elements to have modular styling as of right now.

Because I want all text inside the note should be centered. When I tried <div> or <spans> the poems lose all line-breaks, so it was big continuous mash of text, or it will just center after first line-break and all rest ignore the center alignment.

Hm. Do you use many block quotes or code blocks otherwise? You could repurpose either of those markdown syntaxes and style them
for poetry instead.

:frowning: I dont use many, but I use them… don’t want to sacrifice them for poems.
Do you have any idea why the <body> is not working?

1 Like

You can’t use <body> inside <body>. Obsidian is a HTML document, it already has a <body>.

I just noticed your CSS is not written correctly—at least as far as I understand CSS. It should be:

.poetry {
    text-align: center;
}

I.e., no equals sign.

And I got the following to work. You have to use <br /> to force line breaks, is all. (The need for <br /> is a markdown issue.)

<div class="poetry">
	Test  
	<br />
	New test  
	</div>

Screen Shot 2020-08-21 at 9.01.30 AM

2 Likes

I tried same CSS before…

In poems I have no <br/> and I really don’t want to put them. If you try it without them the line-break which is fine before, will disappear.

Yes, this has to do with the markdown rendering processes of Obsidian. Feel free to submit a feature request for “Recognize line breaks within custom HTML elements” or similar.

But using <br /> is the only way this will work for now, as far as I can tell.

Thank you @den for the question and @ryanjamurphy for the CSS. This helped me out a lot. :+1:

1 Like

But there is still not effective solution for this problem…

With this poetry class definition in the .css file, why is the period (or any non-space) symbol required in order to center align this text?

Thanks ahead for any provided help.,
Den

Hm. Is Strict Line Breaks on in your Obsidian preferences? Does the following work?

![[function composition 1.png]]  

<div class=“poetry”>[[Abstract Algebra - Judson#Reference]] p.3</div>

With the period removed, as you have suggested, the link syntax is not parsed as in:
unexplained period prefix 1

Would it be helpful if I uploaded the .css and/or the .md file?
Also, The preference for “strict line breaks” is turned off.

Hm. Make sure you copy+paste my text above exactly. (There are two spaces after the image line, and a blank line between the statements.) Otherwise, try turning strict line breaks on…

My guess is that markdown is not treating the two separate lines as separate paragraphs, causing odd behaviour.

I am so new to this forum that I didn’t know that you responded until now. I will use your suggestion and retry. In the meantime, I have turned on notifications. :wink:
And thank you Ryan!

1 Like

Hi guys.

I’m having the same problem as @dducoff, right now (v0.12.3, macOS 11.4). Without any non-space character right before the <div class=… stuff, the link inside the <div> … </div> is not parsed.

Anyone knowing what happens?

Thanks in advance for any clue.

You could do this by giving each poetry page a specific CSS class in the top-of-the-page YAML:

```YAML
---
cssclass: poetry
---
```

And then create a CSS snippet in your vault that styles pages that have the YAML header:

```css
/* verses text */
.markdown-preview-view.poetry {
    font-size: 1em;
    font-style: italic;
    text-align: center;
}

/* heading h1 */
.markdown-preview-view.poetry h1 {
   font-size: 2em;
   text-transform: uppercase;
}
```

See the following for reference.

Angel

I deleted my earlier post because I suggested using <center></center>. I saw that has been deprecated. The following works for me:

  1. Create and activate a css snippet:

    /*style to center text; activated by <p class="center">text</p> */
    .center {
     text-align: center;
    }
    
  2. Create a Templater (a Community plugin) template by opening a new Note, and typing the following as the Note’s content: <p class="center"><% tp.file.selection ( ) %></p> Choose a title for the Note like “center text.” This is “your template.”

  3. Move “your template” into your Templater folder.

  4. Then, to center text: (a) select all the text that you want to center; and (b) open the Command pallet (⌘ P), find and click on “Templater: Insert Template,” © click on “your template” from the pop up (you can set up a hotkey for this). All the text you selected should then be centered.

  5. You might have to quit/restart Obsidian to get this all to work.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.