You will want to use cssClasses on the notes you want to change, to enforce a different styling.
For example, say the default format of the text is LTR, but you want some notes to be RTL. The top of your note would contain the frontmatter/property below:
---
cssClasses: righty
---
And the CSS you would add to your publish would be.
/* Variables */
.righty .published-container {
--sidebar-left-border-width: 2px;
--sidebar-right-border-width: 2px;
--site-name-size: 36px;
--logo-max-height: 100px;
--component-title-size: var(--font-ui-medium);
}
/* Make it rtl */
.righty div,
.righty h1,
.righty h2,
.righty h3,
.righty h4,
.righty h5 {
direction: rtl;
}
And so on, adding .righty to the front of every existing selector
If you want RTL to be the default, and LTR to be the exception, you would use @NuclearGandhi’s Publish.css, and then also add a .lefty selector that reverts the changes.
Thanks! This is very helpful. Would it also be possible to use this code to make just part of a note RTL ? Maybe I could add the rightly code in the middle of the note, and another code to send it back to LTR, or does the code apply to the whole note only?
Or maybe I could get a section of a note to be RTL by embedding a RTL note inside a LRT note?
Or a different way?
Is there perhaps a cssClasses code that’s like the “auto” setting in the RTL plugin, so that it automatically knows to put Hebrew RTL and English LTR?
Would it also be possible to use this code to make just part of a note RTL ?
Wrap the part of the note you want in a HTML div. Note Markdown works different in HTML tags like shown below. You may have to use <b>bold</b> for bold, <I>italic</I> for italic, and so on.
<div class="lefty">
my content
</div>
or does the code apply to the whole note only?
cssClasses would apply to the whole note.
Is there perhaps a cssClasses code that’s like the “auto” setting in the RTL plugin, so that it automatically knows to put Hebrew RTL and English LTR?
No, since cssClasses is CSS.
A suggestion I have, if you want your notes to be half and half, is use a custom “invisible” callout that sets the text direction to the one you need for that content. See the div content callout code in the GitHub link. Add some of your RTL or LTR css in those.
You would need more than just the publish.css you are using. I used that small amount of CSS as an example of what you would need to do to all of the CSS posted in the opening post. RTL in Obsidian Publish?
I think for your use case, the callout option will be better, especially if you are mostly defaulting LTR and then only occasionally doing RTL.
