search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
7.18k stars 2.52k forks source link

RTL support #947

Open OfirSinn opened 8 months ago

OfirSinn commented 8 months ago

Hi, I was trying quartz out but very soon noticed the lack of RTL language support, which is makes the existense of an arabic language file in quartz/i18n/locales quite perculiar. I know this is a niche feature, but it seems have been added in 3.2v and now in the most up to date version is absent.

The issue is specific to the html, rtl support for obsidian already exists.

best possible solution would be multi language support (like that of hugo), to have both rtl and ltr in the same file (one line rtl and one line ltr).

but even a full site text direction switch would be enough to satisfy.

if you want a quick look at an RTL file (rendered in LTR) as of now in quartz: https://ofirsinn.github.io/Articles/Home/%D7%96%D7%94-%D7%94%D7%95%D7%90-%D7%A7%D7%95%D7%91%D7%A5-%D7%91%D7%A2%D7%91%D7%A8%D7%99%D7%AA

https://github.com/OfirSinn/Articles/

saberzero1 commented 8 months ago

Right-to-left support can be added in html by using the dir attribute with value rtl:

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
...

See: https://www.w3schools.com/tags/att_global_dir.asp

One possibility is to change the direction based on the configured language.

Another option is to configured the direction in CSS:

html[lang^="he"] *,
html[lang^="fa"] *,
html[lang^="ar"] * {
  direction: rtl;
}

It should be noted that changing the text direction does not necessarily play nice with absolute styling. Therefore, additional styling may be necessary to restore the expected page layout.

Generally the html version is preferred, because it still works when CSS is not available. (e.g. when using a screenreader)

OfirSinn commented 8 months ago

I know there is a option to write the html in obisidian, is there a cleaner solution in the quartz files? in other words I'm asking where is it best to place these code snippets (both the html and the css one)?

saberzero1 commented 8 months ago

I know there is a option to write the html in obisidian, is there a cleaner solution in the quartz files? in other words I'm asking where is it best to place these code snippets (both the html and the css one)?

If all your pages are right-to-left:

https://github.com/jackyzha0/quartz/blob/1c42b6365cab71e1400e94178d39a7592aa47726/quartz/components/renderPage.tsx?plain=1#L208

Change to

<html dir="rtl" lang={lang}>

(You might have to change here too)

https://github.com/jackyzha0/quartz/blob/1c42b6365cab71e1400e94178d39a7592aa47726/quartz/plugins/emitters/aliases.ts#L62

For CSS:

html[lang^="he"] *,
html[lang^="fa"] *,
html[lang^="ar"] * {
  direction: rtl;
}

In the custom.scss file.

https://github.com/jackyzha0/quartz/blob/1c42b6365cab71e1400e94178d39a7592aa47726/quartz/styles/custom.scss#L1-L3

Please note that additional custom styling might be necessary due to the changed text direction potentially impacting the page layout.

saberzero1 commented 8 months ago

If you want page-specific right-to-left support, you can add a cssclass to the frontmatter of specific notes and use custom CSS:

In the notes:

---
title: some page with right to left text.
cssclass: rtl-class
---

In the custom.scss file:

.rtl-class,
.rtl-class * {
  direction: rtl;
}
OfirSinn commented 8 months ago

thank you very much!