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!
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:
Create and activate the css snippets for left, center and right like in your post above
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.
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.
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.
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.
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.
I should have enabled CSS code for Obsidian , form the settings menu
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
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!!
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âŚ
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 !
Are you sure you are not mixing up left and right in this? i kept messing up because i was thinking of left from the computerâs direction (i know its dumb)