RTL support

[themedleb]

From my understanding in HTML, dir="auto" can be added to make the page/elements go left or right depending on the text entered, so if the entered text is Latin, the text will be displayed LTR automatically, and if it's Arabic, Hebrew, ... the text will be displayed RTL automatically.

More info in here:
https://www.w3schools.com/tags/att_global_dir.asp
https://www.w3.org/International/questions/qa-html-dir#unknowndirection

Thanks in advance.

[QingWei-Li]

Hi, I recently supported RTL, but I'm not sure if it is correct. You can test via https://notea-l58j2mnbh-cinwell.vercel.app/.

Some screenshots

[themedleb]

Wow, that is good, actually that is fantastic!! I didn't expect to work on this very early.

However, this switches the whole site/app direction to RTL, which is good, but only for anything other than the content of notes, because RTL language speakers (like me) uses Latin and Arabic at the same time on the notes.

Problem:
So the problem here is that:

• Some notes I have are only Latin (they are going to be shown RTL either way which is bad).
• Some other notes are only Arabic (they are going to be shown RTL which is good), this is not really a problem, but it is part of the problem and it explains it.
• Some other notes are mixed with Arabic and Latin (they are going to be shown RTL either way which is bad, but that's understandable because they are mixed).

So what you implemented here is only good for RTL language speakers that write their notes only with RTL languages which is not realistic, because in reality we use both RTL and LTR languages in the same note, like programing codes and scientific names/phrases/quotes, URLs, ...

Solution:

• The solution is to use the RTL mode you implemented only when Arabic language is selected from the languages list, so that works everywhere else expect notes content.
• And notes content should follow the direction of the entered text as I showed you before with something like the HTML attribute (dir="auto")

And by the way, I will work on translating it to Arabic when RTL and LTR both supported at the same time in notes content.

Thank you so much for your huge efforts, I'm still impressed.

[themedleb]

Also while using the site/app in the RTL mode you implemented, I noticed that the buttons to control the rows of the table are dislocated and can't click them anymore.

Screenshot:

[QingWei-Li]

Hi, I find it difficult to fully support RTL. Because the editor core I use is rich-markdown-editor, It seems that there are still many unresolved problems, I see you mentioned here.

I now support RTL in a simple way, at least it works. I’m sorry I don’t have enough time to help fix the problem you mentioned.

[themedleb]

No worries, It's understandable, it takes time and effort.
Anyway, hopefully someone out there is able to do it.

[themedleb]

@QingWei-Li
Hey, I tried Notea today again, and I noticed that it got some RTL improvements, once I type the first letter in the RTL language inside the note, everything goes to the right, which is a good thing to start with, except the title of the note, it stays where it is even after I type something in an RTL language.

Also the gray vertical bar of the Quote element is hidden in RTL, probably it needs a little bit of padding/margin from the right to appear for RTL languages.

Other than that, everything else looks good to me.

Thanks for your great efforts.

And as I promised, I translated the project to Arabic, now I have the translated json file, but no idea how to submit it, I tried to upload the file inside the "locale" directory but it says "Uploads are disabled.", should I just paste its content here in a comment as a code block?

[QingWei-Li]

@themedleb
Thanks for the feedback, I will fix it.

You can paste the translation content here and I will submit the code.

[themedleb]

Alright, here it is:

{
  "Add a page inside": "أضف صفحة داخلها",
  "Add to Favorites": "أضف إلى المفضلة",
  "Align center": "اصطفاف مركزي",
  "Align left": "اصطفاف يساري",
  "Align right": "اصطفاف يميني",
  "Anyone can visit the page via the link": "يمكن لأي شخص زيارة الصفحة عبر الرابط",
  "Back": "الرجوع",
  "Basic": "أساسي",
  "Big heading": "عنوان كبير",
  "Bold": "خط عريض",
  "Bulleted list": "قائمة نقطية",
  "Cancel": "إلغاء",
  "Code": "كود",
  "Code block": "كتلة الكود",
  "Copied to clipboard": "تم النسخ في الحافظة",
  "Copied!": "تم النسخ!",
  "Copy Link": "انسخ الرابط",
  "Copy to clipboard": "انسخ في الحافظة",
  "Create a new note": "تدوينة جديدة",
  "Create bookmark": "مرجعية جديدة",
  "Create embed": "تضمين جديد",
  "Create link": "رابط جديد",
  "Create page": "صفحة جديدة",
  "Daily Notes": "تدوينات يومية",
  "Daily notes are saved in": "يتم حفز التدوينات اليومية في",
  "Daily notes will be created under this page": "ستكون التدوينات اليومية داخل هذه الصفحة",
  "Dark": "داكن",
  "Delete": "احذف",
  "Delete column": "احذف العمود",
  "Delete image": "احذف الصورة",
  "Delete row": "احذف الصف",
  "Delete table": "احذف الجدول",
  "Disable editing in the demo.": "عطل التحرير في العرض التجريبي.",
  "Divider": "مقسم",
  "Export": "تصدير البيانات",
  "Favorites": "المفضلة",
  "File size must be less than {{n}}mb": "يجب أن يكون حجم الملف أقل من {{n}}mb",
  "Find or create a note…": "أنشئ تدوينة أو ابحث عنها…",
  "Fold Favorites": "طوي المفضلة",
  "Fold sidebar": "طوي الشريط الجانبي",
  "Forward": "تقدم",
  "Heading": "العنوان",
  "Highlight": "بارز",
  "Image": "صورة",
  "Import": "استيراد البيانات",
  "Import & Export": "تصدير واستيراد البيانات",
  "Import a zip file containing markdown files to this location, or export all pages from this location.": "قم باستيراد ملف مضغوط ZIP يحتوي على ملفات Markdown إلى هذا الموقع ، أو قم بتصدير جميع الصفحات من هذا الموقع.",
  "Info": "معلومات",
  "Info notice": "إشعار",
  "Inject analytics or other scripts into the HTML of your sharing page. ": "قم بإدخال التحليلات أو البرامج النصية الأخرى في HTML في صفحة المشاركة الخاصة بك.",
  "Insert column after": "أدخل العمود بعد",
  "Insert column before": "أدخل العمود قبل",
  "Insert row after": "أدخل الصف بعد",
  "Insert row before": "أدخل الصف قبل",
  "Italic": "خط مائل",
  "Keep typing to filter…": "استمر في الكتابة لتصفية النتائج ...",
  "Language": "اللغة",
  "Light": "فاتح",
  "Link": "رابط",
  "Link copied to clipboard": "تم النسخ إلى الحافظة",
  "Linked to this page": "مربوط بهذه الصفحة",
  "Location": "المكان الجغرافي",
  "Medium heading": "عنوان متوسط",
  "My Pages": "صفحاتي",
  "New Page": "صفحة جديدة",
  "No notes inside": "لا توجد مدونات داخلها",
  "No results": "لا توجد نتائج",
  "Not a public page": "ليست صفحة عامة",
  "Not found markdown file": "لا يوجد ملف  Markdown",
  "Open link": "افتح الرابط",
  "Ordered list": "قائمة مرتبة",
  "Page break": "فاصل الصفحة",
  "Paste a link…": "انسخ رابط…",
  "Paste a {{title}} link…": "انسخ رابط {{title}} …",
  "Placeholder": "النص النائب",
  "Please select zip file": "المرجو اختيار الملف المضغوط ZIP",
  "Quote": "اقتباس",
  "Recovery": "استعادة",
  "Remove": "احذف",
  "Remove from Favorites": "احذف من المفضلة",
  "Remove link": "احذف الرابط",
  "Remove, Copy Link, etc": "احذف، انسخ رابط، إلخ",
  "Root Page": "الصفحة الأصلية",
  "Search note": "ابحث عن تدوينة",
  "Search note in trash": "ابحث عن تدوينة في القمامة",
  "Search or paste a link…": "ابحث أو قم بلصق رابط …",
  "Settings": "الإعدادات",
  "Share page": "شارك الصفحة",
  "Share to web": "انشر على الويب",
  "Sharing": "النشر",
  "Small heading": "عنوان صغير",
  "Snippet injection": "حقن مقتطف الكود",
  "Sorry, an error occurred creating the link": "عذرًا، حدث خطأ أثناء إنشاء الرابط",
  "Sorry, an error occurred uploading the image": "عذرًا، حدث خطأ أثناء تحميل الصورة",
  "Sorry, that link won’t work for this embed type": "عذرًا، هذا الرابط لن يعمل مع هذا النوع من التضمين",
  "Strikethrough": "يتوسطه خط",
  "Subheading": "العنوان الفرعي",
  "Successfully imported {{n}} markdown files": "تم استيراد {{n}} من ملفات Markdown",
  "Sync with system": "تزامن مع النظام",
  "Table": "الجدول",
  "Theme mode": "وضع الثيم",
  "This page is in trash": "توجد هذه الصفحة في القمامة",
  "Tip": "تلميح",
  "Tip notice": "إشعار التلميح",
  "Todo list": "قائمة ما يجب فعله",
  "Trash": "قمامة",
  "Type '/' to insert…": "اكتب "/" للإدراج …",
  "Untitled": "بدون عنوان",
  "Warning": "تحذير",
  "Warning notice": "إشعار التحذير",
  "Write something nice…": "اكتب شيئًا لطيفًا …"
}

And thank you again.

[themedleb]

Hey @QingWei-Li, thank you for implementing it.
Although the implementation, I noticed that when I use my RTL language, the layout doesn't change to RTL like what you showed me before in your comment #6 (comment)

Is there any way you can make it happen only when an RTL language is selected?