Need guidence to format Arabic text

[blackened]

I plan to compile my Quran notes. I would like to have a blockquote or callout class (or whatever) to display the Arabic text nicely in a box, something I can tinker with. Can someone guide me as to what I should do?

[ariehen]

Do you always have your editor in the right-to-left (RTL) setting or do you use a plugin like Obsidian RTL or Dynamic RTL? Your approach might vary depending on how you work currently, but I think a custom callout (or a few) would be perfect for something like this:

.callout[data-callout="rtl"] {
    --callout-color: var(--color-green-rgb);
    --callout-icon: lucide-book-open;
    --callout-border-width: 1px;
    --callout-border-opacity: 0.5;
    --callout-title-size: 0.8em;
    --callout-blend-mode: normal;
    direction: rtl;
    border-radius: 20;
    /* float: right; */    
}

and in your note written as:

> [!rtl] rtl callout!
> كيف حال الطقس اليوم؟

https://help.obsidian.md/Editing+and+formatting/Callouts#Customize+callouts

---

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

[blackened]

Thank you.

How do I specify callout color of border, title, background, and text one by one? And how do I make the title of the callout left to right?

[ariehen]

The callout background color is this part --callout-color: var(--color-green-rgb);. It needs a rgb value, so like the above or --callout-color: 255, 219, 154.

The border color could be this border: 1px solid #b4b4ff; and color: is the content text color.

The title needs another section if you want to change only that: .callout[data-callout="rtl2"] .callout-title. So, all together maybe something like this:

.callout[data-callout="rtl2"] {
    --callout-color: 255, 120, 154;
    --callout-icon: lucide-book-open;
    --callout-border-opacity: 0.5;
    --callout-title-size: 0.8em;
    --callout-blend-mode: normal;
    border: 1px solid #b4b4ff;
    direction: rtl;
    border-radius: 20;
    color: green;
}

.callout[data-callout="rtl2"] .callout-title {
    color: gray;
    direction: ltr;
}

---

I recommend having a look at https://forum.obsidian.md/t/obsidian-css-quick-guide/58178, the app.css (found in the dev tools), and some theme.css files to see how callouts are structured.