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

[Nils.Srvd]

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!

[FiekeB]

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:
   <span class="left-align"><% tp.file.selection ( ) %></span>
   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:
   <span class="center-align"><% tp.file.selection ( ) %></span>
   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:
   <span class="right-align"><% tp.file.selection ( ) %></span>
   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.

[lawipac]

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

@FiekeB

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 ( ) %>

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

[lawipac]

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

[lawipac]

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

[JWolfcat]

Hi!
I’m a rookie in all this coding and obsidian, but coping and pasting bits of css I am making my vault as I want it with no problem, but this is frustrating me as I cannot make it work, and I don’t know why.
This are my steps:

I have enabled one CSS snippet called “align” with the 3 alignments + justify
It looks like this

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

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

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

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

Next I’ve made the 4 templates in my templater folder. I’ve name each one as its alignment “right-align”, “left-align”… and add inside it this (without the backticks):

<% tp.file.selection ( ) %>

(There is a space between the brackets, I try without it just in case)

Then I set the Templater shortcuts and assigned it into cMenu as @FiekeB says in the steps 3 and 4.

As I say I don’t know where the error is, everything else is working fine, the other functions in cMenu, the other templates in templater, and my other css snippets (I’ve revisited it all, and no one seems to interfere with alignment).

Thaks in advance!!

[FiekeB]

Sorry i never answered your question, @lawipac - I had a major disaster with my computer, everything gone except what I had backed up in the cloud. My external harddisk broke and on that was my obsidian vault. It should be backep up in the cloud, but since it broke, it hadn’t done that for weeks so much was vanished. I was devastated and it took me months before I wanted to touch Obsidian again and restore everything.

I’m back now, but it seems I have forgotten so much about Obsidian in the meantime, I need to start learning it all over again…

[avril]

Hello, thank for your sharing,
is it possible to have it on preview mode ?

For example, this code alowed me to justify my text in obsidian in reading mode/source mode/and preview mode :

/* reading mode */
.markdown-preview-view p {
text-align: justify;
text-justify: inter-word;
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line {
text-align: justify;
text-justify: inter-word;
}

source : Align text Justified in Obsidian - #2 by Scribe

Merci !