Best way to apply css to a set of notebooks/notes

AminSadeghi · 2020-04-20T09:09:10.500Z

I’m using Joplin to write notes in English (LTR) and Farsi (RTL). Currently, I add the following snippet at the beginning of my notes in Farsi to make it render properly:

<style>
@import url('https://fonts.googleapis.com/css?family=Lateef&display=swap');
body {
    direction: rtl;
    <!--font-family: 'Lateef', cursive;-->
}
</style>

I was wondering if there’s a simpler more convinient way of doing this in Joplin. I was thinking of maybe based on tags? For example, apply this style on notes with tag farsi.

tessus · 2020-04-20T10:42:16.173Z

No, the only way is to add it to your userstyle.css file, but in that case it will be applied to all notes.

executed · 2024-11-15T03:25:30.801Z

Hmm... Just thinking out loud.
I saw that HTML in the note does not mean it becomes HTML in actual DOM.
Maybe there's a hack for it to become part of the DOM?

Theoretically, user could wrap specific note text in HTML

with a certain class and then use CSS descendant selectors to conditionally style the child nodes of this div.

executed · 2024-11-15T03:35:24.472Z

I'm not a Farsi speaker, but I've just copied a text sample to Joplin and it looks good to me.

t0dd · 2024-11-15T17:48:20.480Z

@tessus is correct. There is no simple way to do that (per-notebook CSS) yet. But you can make it easier for yourself via …

Instead of this in each note:

AminSadeghi:

<style>
@import url('https://fonts.googleapis.com/css?family=Lateef&display=swap');
body {
    direction: rtl;
    <!--font-family: 'Lateef', cursive;-->
}
</style>

… add this to the top of your userstyle.css stylings configuration: Options > General > Appearance > Show Advanced Settings > Custom stylesheet for rendered Markdown. (@import statements need to be at the top.):

@import url('https://fonts.googleapis.com/css?family=Lateef&display=swap');

… and then add this to the bottom of your userstyle.css stylings configuration:

.myfarsi, .myfarsi p {
    direction: rtl;
    font-family: 'Lateef', cursive;
}

Finally restart Joplin for it to see that change. Then add this to the top of each Farsi-language note:

<div class="myfarsi">

This here is your note.
Blah blah blah, so on and so forth.

You don't really even have to terminate that bit of HTML with a </div> at the end of the note. The renderer sees the end of the file and treats it as if it were terminated.

And, personally, I would also install the Templates plugin and use that to keep a template that looks just like that above also ready at a click every time to wanted to write in Farsi.

That should just work and reduce the clutter for you. Note, I didn't test for typos in my CSS here, but I think I got it right. Play with it and see if that works for you.

This pattern should also allow you to have an predominantly English language note (no <div …> at the top) interspersed with Farsi.

This is my note. Blah Blah Blah. <span class="myfarsi">And this some Farsi Text</span> And this here is more English.

Again, not tested, and I don't know how well that works in the same paragraph, but you get my drift. It could be:

This is my note. Blah Blah Blah.

<div class="myfarsi">

And this a paragraph written in Farsi

</div>

And here the note continues in English.

You could also add a .myenglish class in userstyle.css so you can do the reverse (a bit of LTR English in a Farsi note).

Have fun! Hope this helps.