Text alignment with links, images, formatting using markdown, etc

After going around this forum a lot I found that no one has shared before how to achieve this:



You need to create the following CSS snippet:


.center-menu {
  display: block;
  text-align: center;
}

.right-menu {
  display: block;
  text-align: right;
}

.left-menu {
  display: block;
  text-align: left;
}

Then, in your notes:

<span class="right-menu">![[an image]]<br> <br>_[[some internal links]]_ and <br> _some_  <sup>cool</sup> **text** </span>

I hope you find it useful!

4 Likes

If you combine the CSS below with the Templater and cMenu plugins, you can have all 3 “alignments” in cMenu and you’d just have to select text in your note and click on the right icon in cMenu. It requires a one-time set-up, but after that, it’s easy-peasy! No more typing < span > html :), just select and click!

The CSS:

.center-align {
display: block;
text-align: center;
}

.right-align {
display: block;
text-align: right;
}

.left-align {
display: block;
text-align: left;
}

cMenu is very powerful, out of the box it is just a basic text-editor to add markdown/markup to your text like bold, italic etc. But you can add just about every command from Obsidian’s command library.

How-to:

  1. Create and activate the css snippets for left, center and right like in your post above

  2. Create 3 Templater templates: one for each alignment command. You do this by opening a new note and typing the following as the Note’s content:
    2.1. For Left alignment: create a new note and type or paste this in it:
    <% tp.file.selection ( ) %>
    Remove the backticks if you copy and paste from here!
    2.2. For Center alignment: create a new note and type or paste this in it:
    <% tp.file.selection ( ) %>
    Remove the backticks if you copy and paste from here!
    Call this note Left Align Text Template and stick it in your Templates folder.
    2.3. For Right alignment: create a new note and type or paste this in it:
    <% tp.file.selection ( ) %>
    Remove the backticks if you copy and paste from here!
    Call this note Right Align Text Template and stick it in your Templates folder.

  3. Assign each of your new templates a Hotkey in the Templater plugin’s options. I used shift-cmd-L for left, shift-cmd-C for center and shift-cmd-R for right. But you can pick any combination that is valid and not already used in Obsidian. You won’t ever have to use these hotkeys manually, because we are going to assign these hotkey commands to cMenu. Assigning a hotkey in Templater basically makes a template available for use as a command for inserting it, manually or in this case, with cMenu.

  4. Now, go to cMenu’s options and click the + sign for adding a new cMenu option. You’ll get a pop-up window that allows you to search for whatever Obsidian command you want to assign. If you search for Templater, you will see every Templater command/hotkey listed. Pick the one that says Templater: Insert Template/Left Align Text Template.md. You will be given the option to pick an icon for it: search for ‘align’ and the top 3 will be icons for left, center and right alignment. In this case, pick the one that indicates left alignment.

  5. Repeat step 4 for the Center and Right alignment.

You now have a text-editor (cMenu) with 3 options for aligning text, that Obsidian doesn’t have out of the box. You select text in your note, click on left, center or right alignment in cMenu and poof! All done. No typing, just a click!

To make things even easier to use, I use another plugin called Customizable Sidebar and I have added a command to my sidebar that will open or close cMenu. I don’t always need it and if I don’t, I can now hide it with 1 click and call it back with 1 click.

2 Likes

First of all, thank you for letting me know the two great plugins. I have a question about using them.

The three templates seems to be the same, I tried, it does not work. You mentioned some backtick, is it missing?

I just skim through the templater documents, it seems like a PHP style scripting method enclose code inside special tags and can mix with standard mark-down tag.

I tried

<span class="right-menu">  <% tp.file.selection ( ) %>  </span>

it produced the expected text in the MarkDown file, however, it does not produce the right-align result. I guess it’s because of HTML/CSS

I just realized I made two mistakes.

  1. I should have enabled CSS code for Obsidian , form the settings menu

  2. I used the wrong CSS style, I wrote right-menu, but the CSS is right-align.

After I corrected those two mistakes, the alignment occurs. In fact without using span, we can also use div which looks cleaner.

It’s exciting to learn template for Obsidian. Its capability opens a whole new era of notes taking. Thank you @Nils.Srvd @FiekeB

2 Likes