diff --git a/_config.yml b/_config.yml index d6f84c57815..912e70180f6 100644 --- a/_config.yml +++ b/_config.yml @@ -3,6 +3,20 @@ # Import the theme theme: jekyll-theme-chirpy +# RTL Support Configuration +# Set this to true to enable RTL support for all languages +# If false, RTL will only be applied to RTL languages (ar, he, fa, etc.) +rtl_support: false + +# RTL Languages array - add more languages if needed +rtl_languages: + - ar + - fa-IR + - ku-IQ + - ur-PK + - ps-AF + - dv-MV + # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm # If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed, # otherwise, the layout language will use the default value of 'en'. diff --git "a/_data/locales/dv\342\200\221MV.yml" "b/_data/locales/dv\342\200\221MV.yml" new file mode 100644 index 00000000000..680ca1f8b4c --- /dev/null +++ "b/_data/locales/dv\342\200\221MV.yml" @@ -0,0 +1,90 @@ +# The layout text of site in Dhivehi (Maldives) + +# ----- Commons label ----- + +layout: + post: ޕޯސްޓް + category: ނަތީޖާ + tag: ޓެގް + +# The tabs of sidebar +tabs: + # format: : + home: ހުންނަ + categories: ނަތީޖާތައް + tags: ޓެގްތައް + archives: އާރޗިވްސް + about: އިންސާން + +# the text displayed in the search bar & search results +search: + hint: ސާރޗް + cancel: ކެންސަލް + no_results: އޮޕްސް! އެއްވެސް ނުފެނުނީ. + +panel: + lastmod: އާދަމާ އޮޕްޑޭޓްކުރި + trending_tags: މަރާހު ޓެގްތައް + toc: ކޮންޓެންސް + +copyright: + # Shown at the bottom of the post + license: + template: މި ޕޯސްޓް :LICENSE_NAME އިން ލައިސަންސްކުރާ ނުވަތަ މުޤައްރާއަށް. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: އެކީ ބާރަށް ހުށަހަޅާ. + verbose: >- + އަދި އެ ރަނގަޅުގައި ނުލާހެވެސް، މި ސައިޓުގެ ޕޯސްޓްތައް + މުޤައްރާއަށް Creative Commons Attribution 4.0 International (CC BY 4.0) ލައިސަންސްކުރަނީ. + +meta: :PLATFORM އަށް :THEME ތީމް ބަލާލާށެވެ. + +not_found: + statement: ސޯރީ، މި ޔޫ.އާރއެލް މަށެވެއްނެ ނުވަތަ އެކަމެއް ނުވެއެވެ. + +notification: + update_found: ޔޫ ވާރޝަން ހުރިހާ. + update: އޮޕްޑޭޓް + +# ----- Posts related labels ----- + +post: + written_by: ލެކްއޯލް + posted: ޕޯސްޓްކުރެވި + updated: އޮޕްޑޭޓްކުރެވި + words: ބަސް + pageview_measure: ބަނޑުކުރާ + read_time: + unit: މިނެޓް + prompt: އިސްކާރު + relate_posts: އެއްޗެހި ފަހުރަށްދަން + share: ސެއާރް + button: + next: އަދާވަނަ + previous: ކޮނޯނި + copy_code: + succeed: ކޮޕީ ކުރެވި! + share_link: + title: ލިންކް ކޮޕީ ކުރު + succeed: ލިންކް ހަދަންކުރެވި! + +# Date time format. +# See: , +df: + post: + strftime: "%b %e, %Y" + dayjs: "ll" + archives: + strftime: "%b" + dayjs: "MMM" + +categories: + category_measure: + singular: ނަތީޖާ + plural: ނަތީޖާތައް + post_measure: + singular: ޕޯސްޓް + plural: ޕޯސްޓްތައް diff --git a/_data/locales/fa-IR.yaml b/_data/locales/fa-IR.yml similarity index 93% rename from _data/locales/fa-IR.yaml rename to _data/locales/fa-IR.yml index d5c6e0eb6ab..60a032076ee 100644 --- a/_data/locales/fa-IR.yaml +++ b/_data/locales/fa-IR.yml @@ -37,7 +37,7 @@ copyright: # Displayed in the footer brief: برخی حقوق محفوظ است. verbose: >- - مگر اینکه خلاف آن ذکر شده باشد، پست‌های وبلاگ در این سایت + به‌جز مواردی که خلاف آن ذکر شده باشد، محتوای پست‌های این وبلاگ تحت مجوز Creative Commons Attribution 4.0 International (CC BY 4.0) توسط نویسنده منتشر شده‌اند. meta: با استفاده از :PLATFORM قالب :THEME @@ -55,8 +55,8 @@ post: written_by: نوشته شده توسط posted: منتشر شده updated: به‌روزرسانی شده - words: کلمات - pageview_measure: بازدیدها + words: کلمه + pageview_measure: بازدید read_time: unit: دقیقه prompt: زمان مطالعه diff --git a/_data/locales/ku-IQ.yml b/_data/locales/ku-IQ.yml new file mode 100644 index 00000000000..d04adc5d2b0 --- /dev/null +++ b/_data/locales/ku-IQ.yml @@ -0,0 +1,91 @@ +# The layout text of site in Kurdish (Sorani) + +# ----- Commons label ----- + +layout: + post: بابەت + category: هاوپۆل + tag: تاگ + +# The tabs of sidebar +tabs: + # format: : + home: سەرەکی + categories: هاوپۆلەکان + tags: تاگەکان + archives: ئەرشیف + about: دەربارە + +# the text displayed in the search bar & search results +search: + hint: گەڕان + cancel: هەڵوەشاندنەوە + no_results: ببوورە! هیچ ئەنجامێک نەدۆزرایەوە. + +panel: + lastmod: دوایین نوێکردنەوەکان + trending_tags: تاگە باوەکان + toc: ناوەڕۆک + +copyright: + # Shown at the bottom of the post + license: + template: ئەم بابەتە لەلایەن نووسەرەوە بە مۆڵەتی :LICENSE_NAME بڵاوکراوەتەوە. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: هەندێک مافی پارێزراوە. + verbose: >- + تەنها لەو شوێنانەی کە بە پێچەوانەوە ئاماژەی پێدراوە، بابەتەکانی بڵۆگ لەم سایتەدا + لەژێر مۆڵەتی Creative Commons Attribution 4.0 International (CC BY 4.0) لەلایەن نووسەرەوە مۆڵەتیان پێدراوە. + +meta: بە بەکارهێنانی :PLATFORM لەگەڵ ڕووکاری :THEME + +not_found: + statement: ببوورە، ئەم بەستەرە نادۆزرێتەوە یان ئاماژە بە شتێک دەکات کە بوونی نییە. + +notification: + update_found: وەشانێکی نوێی ناوەڕۆک بەردەستە. + update: نوێکردنەوە + +# ----- Posts related labels ----- + +post: + written_by: نووسەر + posted: بڵاوکراوەتەوە + updated: نوێکراوەتەوە + words: وشە + pageview_measure: بینین + read_time: + unit: خولەک + prompt: خوێندنەوە + relate_posts: بابەتی پەیوەندیدار + share: بڵاوکردنەوە + button: + next: نوێتر + previous: کۆنتر + copy_code: + succeed: کۆپی کرا! + share_link: + title: کۆپی بەستەر + succeed: بەستەر بە سەرکەوتوویی کۆپی کرا! + +# Date time format. +# See: , +df: + post: + strftime: "%d %b, %Y" + dayjs: "DD MMM, YYYY" + archives: + strftime: "%b" + dayjs: "MMM" + +# categories page +categories: + category_measure: + singular: هاوپۆل + plural: هاوپۆلەکان + post_measure: + singular: بابەت + plural: بابەتەکان \ No newline at end of file diff --git "a/_data/locales/ps\342\200\221AF.yml" "b/_data/locales/ps\342\200\221AF.yml" new file mode 100644 index 00000000000..fca6877238c --- /dev/null +++ "b/_data/locales/ps\342\200\221AF.yml" @@ -0,0 +1,90 @@ +# The layout text of site in Pashto (Afghanistan) + +# ----- Commons label ----- + +layout: + post: لیکنه + category: وېشنيزه + tag: ټګ + +# The tabs of sidebar +tabs: + # format: : + home: کورپاڼه + categories: وېشنيزې + tags: ټګونه + archives: آرشيف + about: په اړه + +# the text displayed in the search bar & search results +search: + hint: لټون + cancel: لغوه + no_results: ها! هېڅ پایله ونه موندل شوه. + +panel: + lastmod: وروستی تازه + trending_tags: مشهور ټګونه + toc: منځپانګه + +copyright: + # Shown at the bottom of the post + license: + template: دا لیکنه د :LICENSE_NAME جواز لاندې د لیکوال له خوا خپره شوې ده. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: ځینې حقونه خوندي دي. + verbose: >- + تر هغه ځایه چې بل ډول نه وي یاد شوي، د دې سایټ لیکنې + د لیکوال له خوا د کریټېو کامنز د انتساب 4.0 نړیوال (CC BY 4.0) جواز لاندې خپرېږي. + +meta: د :PLATFORM لپاره د :THEME موضوع کاروي. + +not_found: + statement: بښنه غواړو، دغه URL ناسم دی یا هغه څه ته اشاره کوي چې شتون نه لري. + +notification: + update_found: نوې نسخه شتون لري. + update: تازه + +# ----- Posts related labels ----- + +post: + written_by: لیکوال + posted: خپره شوې + updated: تازه شوې + words: کلمې + pageview_measure: کتنې + read_time: + unit: دقیقې + prompt: لوستل + relate_posts: نوره لوستنه + share: شریکول + button: + next: نوی + previous: زوړ + copy_code: + succeed: کاپي شو! + share_link: + title: لینک کاپي کړئ + succeed: لینک بریالي کاپي شو! + +# Date time format. +# See: , +df: + post: + strftime: "%b %e, %Y" + dayjs: "ll" + archives: + strftime: "%b" + dayjs: "MMM" + +categories: + category_measure: + singular: وېشنيزه + plural: وېشنيزې + post_measure: + singular: لیکنه + plural: لیکنې diff --git a/_data/locales/ur-PK.yml b/_data/locales/ur-PK.yml new file mode 100644 index 00000000000..e5184df171c --- /dev/null +++ b/_data/locales/ur-PK.yml @@ -0,0 +1,90 @@ +# The layout text of site in Urdu (Pakistan) + +# ----- Commons label ----- + +layout: + post: تحریر + category: زمرہ + tag: ٹیگ + +# The tabs of sidebar +tabs: + # format: : + home: گھر + categories: زمروں + tags: ٹیگز + archives: محفوظات + about: تعارف + +# the text displayed in the search bar & search results +search: + hint: تلاش + cancel: منسوخ + no_results: اوہ! کوئی نتیجہ نہیں ملا۔ + +panel: + lastmod: حال ہی میں اپ ڈیٹ + trending_tags: مقبول ٹیگز + toc: مواد + +copyright: + # Shown at the bottom of the post + license: + template: یہ تحریر :LICENSE_NAME کے تحت مصنف کی جانب سے لائسنس یافتہ ہے۔ + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: کچھ حقوق محفوظ ہیں۔ + verbose: >- + جب تک کہ دوسری صورت میں ذکر نہ ہو، اس سائٹ کی تحریریں + مصنف کی جانب سے تخلیقی العام انتساب 4.0 بین الاقوامی (CC BY 4.0) لائسنس کے تحت دستیاب ہیں۔ + +meta: :PLATFORM کے لیے :THEME تھیم استعمال کیا جا رہا ہے۔ + +not_found: + statement: معذرت، یہ URL غلط ہے یا جس چیز کی طرف اشارہ کر رہا ہے وہ موجود نہیں۔ + +notification: + update_found: نیا مواد دستیاب ہے۔ + update: اپ ڈیٹ + +# ----- Posts related labels ----- + +post: + written_by: از + posted: شائع شدہ + updated: اپ ڈیٹ شدہ + words: لفظ + pageview_measure: مشاہدات + read_time: + unit: منٹ + prompt: پڑھیں + relate_posts: مزید مطالعہ + share: شیئر + button: + next: نیا + previous: پرانا + copy_code: + succeed: کاپی ہو گیا! + share_link: + title: لنک کاپی کریں + succeed: لنک کامیابی سے کاپی ہو گیا! + +# Date time format. +# See: , +df: + post: + strftime: "%b %e, %Y" + dayjs: "ll" + archives: + strftime: "%b" + dayjs: "MMM" + +categories: + category_measure: + singular: زمرہ + plural: زمروں + post_measure: + singular: تحریر + plural: تحریریں diff --git a/_includes/head.html b/_includes/head.html index 4514666a541..b8da2e452db 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -57,6 +57,9 @@ {{ site.title }} + + {% include rtl-font-loader.html %} + {% include_cached favicons.html %} diff --git a/_includes/lang.html b/_includes/lang.html index 34b50dfaab8..b1ec69c7751 100644 --- a/_includes/lang.html +++ b/_includes/lang.html @@ -1,5 +1,6 @@ {% comment %} - Detect appearance language and return it through variable "lang" + - Detect appearance language and return it through variable "lang" + - Detect appearance language direction and return it through variable "dir" {% endcomment %} {% if site.data.locales[page.lang] %} {% assign lang = page.lang %} @@ -8,3 +9,16 @@ {% else %} {% assign lang = 'en' %} {% endif %} + +{% assign dir = 'ltr' %} + +{% if site.rtl_support %} + {% assign dir = 'rtl' %} +{% else %} + {% for rtl_lang in site.rtl_languages %} + {% if lang contains rtl_lang %} + {% assign dir = 'rtl' %} + {% break %} + {% endif %} + {% endfor %} +{% endif %} diff --git a/_includes/rtl-font-loader.html b/_includes/rtl-font-loader.html new file mode 100644 index 00000000000..5c0cc8a9d79 --- /dev/null +++ b/_includes/rtl-font-loader.html @@ -0,0 +1,21 @@ +{% comment %} + Load appropriate RTL fonts based on the page language +{% endcomment %} + +{% include lang.html %} + +{% if dir == 'rtl' %} + {% if lang == 'fa-IR' %} + + + + {% elsif lang == 'ur-PK' %} + + + + {% else %} + + + + {% endif %} +{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html index a55bfefe9ab..aef7ae3b7cb 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,7 +13,7 @@ {% endif %} - + {% include head.html %} diff --git a/_posts/2025-04-20-rtl-test-persian.md b/_posts/2025-04-20-rtl-test-persian.md new file mode 100644 index 00000000000..c529a56f9a6 --- /dev/null +++ b/_posts/2025-04-20-rtl-test-persian.md @@ -0,0 +1,203 @@ +--- +title: متن و تایپوگرافی +description: نمونه‌هایی از متن، تایپوگرافی، معادلات ریاضی، نمودارها، فلوچارت‌ها، تصاویر، ویدیوها و موارد دیگر. +author: cotes +date: 2019-08-08 11:33:00 +0800 +categories: [بلاگ‌نویسی, نمونه] +tags: [تایپوگرافی] +pin: true +math: true +mermaid: true +image: + path: /commons/devices-mockup.png + lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA + alt: نمایش واکنش‌گرای قالب Chirpy روی دستگاه‌های مختلف. +lang: fa-IR +--- + +## سرتیترها + + + +# H1 — سرتیتر +{: .mt-4 .mb-0 } + +## H2 — سرتیتر +{: data-toc-skip='' .mt-4 .mb-0 } + +### H3 — سرتیتر +{: data-toc-skip='' .mt-4 .mb-0 } + +#### H4 — سرتیتر +{: data-toc-skip='' .mt-4 } + + +## پاراگراف + +لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + +## لیست‌ها + +### لیست مرتب شده + +1. اول +2. دوم +3. سوم + +### لیست مرتب نشده + +- فصل + - بخش + - پاراگراف + +### لیست کارها + +- [ ] کار + - [x] مرحله ۱ + - [x] مرحله ۲ + - [ ] مرحله ۳ + +### لیست توضیحی + +خورشید +: ستاره‌ای که زمین به دور آن می‌چرخد + +ماه +: قمر طبیعی زمین که با نور منعکس شده از خورشید قابل مشاهده است + +## نقل قول + +> این خط نقل قول را نشان می‌دهد. + +## هشدارها + + + +> یک مثال که نوع هشدار `tip` را نشان می‌دهد. +{: .prompt-tip } + +> یک مثال که نوع هشدار `info` را نشان می‌دهد. +{: .prompt-info } + +> یک مثال که نوع هشدار `warning` را نشان می‌دهد. +{: .prompt-warning } + +> یک مثال که نوع هشدار `danger` را نشان می‌دهد. +{: .prompt-danger } + + +## جدول‌ها + +| شرکت | تماس | کشور | +| ---: | ---: | ---: | +| آلفردز فاترکیسته | ماریا آندرز | آلمان | +| تجارت جزیره | هلن بنت | انگلستان | +| مگازینی آلیمنتاری ریونیتی | جیووانی روولی | ایتالیا | + +## لینک‌ها + + + +## پاورقی + +روی این قلاب کلیک کنید تا به پاورقی برسید[^footnote]، و اینجا یک پاورقی دیگر است[^fn-nth-2]. + +## کد درون‌خطی + +این یک مثال از `کد درون‌خطی` است. + +## مسیر فایل + +اینجا مسیر `/path/to/the/file.extend`{: .filepath} است. + +## بلوک‌های کد + +### عمومی + +```text +این یک بلوک کد معمولی است، بدون هایلایت سینتکس و شماره خط. +``` + +### زبان خاص + +```bash +if [ $? -ne 0 ]; then + echo "فرمان موفقیت‌آمیز نبود."; + #انجام کار لازم / خروج +fi; +``` + +### نام فایل خاص + +```sass +@import + "colors/light-typography", + "colors/dark-typography"; +``` +{: file='_sass/jekyll-theme-chirpy.scss'} + +## ریاضیات + +ریاضیات با استفاده از [**MathJax**](https://www.mathjax.org/): + +$$ +\begin{equation} + \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} + \label{eq:series} +\end{equation} +$$ + +می‌توانیم به معادله به صورت \eqref{eq:series} ارجاع دهیم. + +وقتی $a \ne 0$ باشد، دو جواب برای $ax^2 + bx + c = 0$ وجود دارد و آنها عبارتند از + +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +## نمودار SVG با Mermaid + +```mermaid + gantt + title افزودن قابلیت نمودار گانت به mermaid + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d +``` + +## تصاویر + +### پیش‌فرض (با عنوان) + +![نمای دسکتاپ](/posts/20190808/mockup.png){: width="972" height="589" } +_عرض کامل صفحه و تراز وسط_ + +### تراز چپ + +![نمای دسکتاپ](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal} + +### شناور به سمت چپ + +![نمای دسکتاپ](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left} + +لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + +### شناور به سمت راست + +![نمای دسکتاپ](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right} + +لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + +### حالت روشن/تاریک و سایه + +تصویر زیر بر اساس تم روشن/تاریک تغییر می‌کند، توجه کنید که دارای سایه است. + +![فقط حالت روشن](/posts/20190808/devtools-light.png){: .normal .light .w-75 .shadow .rounded-10 w='1212' h='668' } +![فقط حالت تاریک](/posts/20190808/devtools-dark.png){: .normal .dark .w-75 .shadow .rounded-10 w='1212' h='668' } + +## ویدیو + +{% include embed/youtube.html id='Balreaj8Yqs' %} + +## پاورقی برگشتی + +[^footnote]: منبع پاورقی +[^fn-nth-2]: منبع پاورقی دوم diff --git a/_sass/main.scss b/_sass/main.scss index 3bbb70d6515..f0e869bdffc 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -2,3 +2,4 @@ @forward 'components'; @forward 'layout'; @forward 'pages'; +@forward 'rtl'; diff --git a/_sass/rtl-fonts.scss b/_sass/rtl-fonts.scss new file mode 100644 index 00000000000..83432f2799c --- /dev/null +++ b/_sass/rtl-fonts.scss @@ -0,0 +1,139 @@ +/* RTL Fonts for Jekyll-Theme-Chirpy */ + +@use './abstracts/variables' as v; + +/* Arabic, Kurdish and other rtl languages Font */ +@font-face { + font-family: 'Noto Sans Arabic'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('https://fonts.gstatic.com/s/notosansarabic/v18/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4o.woff2') + format('woff2'); + unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, + U+FB50-FDFF, U+FE80-FEFC; +} + +@font-face { + font-family: 'Noto Sans Arabic'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('https://fonts.gstatic.com/s/notosansarabic/v18/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4o.woff2') + format('woff2'); + unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, + U+FB50-FDFF, U+FE80-FEFC; +} + +/* Persian (Farsi) Font */ +@font-face { + font-family: 'Vazirmatn'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('https://fonts.gstatic.com/s/vazirmatn/v13/Dxx78j6PP2D_kU2muijlEcI_MZP9UkS9x6EgRoIqYbU.woff2') + format('woff2'); + unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, + U+FB50-FDFF, U+FE80-FEFC; +} + +@font-face { + font-family: 'Vazirmatn'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('https://fonts.gstatic.com/s/vazirmatn/v13/Dxx78j6PP2D_kU2muijlEcI_MZP9UkS9x6EgRoIqYbU.woff2') + format('woff2'); + unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, + U+FB50-FDFF, U+FE80-FEFC; +} + +/* Urdu Font */ +@font-face { + font-family: 'Noto Nastaliq Urdu'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('https://fonts.gstatic.com/s/notonastaliqurdu/v14/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pudQ9L940.woff2') + format('woff2'); + unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, + U+FB50-FDFF, U+FE80-FEFC, U+0660-0669, U+0951-0952, U+1EE00-1EEF9, + U+0900-097F; +} + +/* RTL font-family mapping based on lang attribute */ +html[lang='ar'], +html[lang^='ar-'] { + &, + body { + font-family: 'Noto Sans Arabic', v.$font-family-base; + } + + h1, + h2, + h3, + h4, + h5, + h6, + .post-desc, + %heading { + font-family: 'Noto Sans Arabic', v.$font-family-heading; + } +} + +html[lang='fa-IR'] { + &, + body { + font-family: 'Vazirmatn', v.$font-family-base; + } + + h1, + h2, + h3, + h4, + h5, + h6, + .post-desc, + %heading { + font-family: 'Vazirmatn', v.$font-family-heading; + } +} + +html[lang='ur-PK'] { + &, + body { + font-family: 'Noto Nastaliq Urdu', v.$font-family-base; + } + + h1, + h2, + h3, + h4, + h5, + h6, + .post-desc, + %heading { + font-family: 'Noto Nastaliq Urdu', v.$font-family-heading; + } +} + +/* Default RTL font for other RTL languages */ +html[dir='rtl']:not([lang='ar']):not([lang^='ar-']):not([lang='fa-IR']):not( + [lang='ur-PK'] + ) { + &, + body { + font-family: 'Noto Sans Arabic', v.$font-family-base; + } + + h1, + h2, + h3, + h4, + h5, + h6, + .post-desc, + %heading { + font-family: 'Noto Sans Arabic', v.$font-family-heading; + } +} diff --git a/_sass/rtl.scss b/_sass/rtl.scss new file mode 100644 index 00000000000..1bf88ff36af --- /dev/null +++ b/_sass/rtl.scss @@ -0,0 +1,542 @@ +/* RTL Styles for Jekyll-Theme-Chirpy + * This file provides RTL overrides for the theme + */ +@use './abstracts/variables' as v; +@use './abstracts/breakpoints' as bp; +@use './abstracts/mixins' as mx; + +/* Import RTL fonts if needed */ +@use 'rtl-fonts'; + +html[dir='rtl'] { + /* Basic text direction */ + direction: rtl; + text-align: right; + + /* Sidebar */ + #sidebar { + left: auto; + right: 0; + border-right: none; + border-left: 1px solid var(--sidebar-border-color); + + .profile-wrapper { + padding-left: 1.25rem; + padding-right: 2.5rem; + + @include bp.xxxl { + padding-left: 1.25rem; + padding-right: 3.5rem; + } + } + + .site-title { + text-align: right; + } + + ul li.nav-item { + @include mx.pl-pr(1.5rem); + + @include bp.xxxl { + @include mx.pl-pr(2.75rem); + } + + a.nav-link i { + margin-right: 0; + margin-left: 1.5rem; + } + } + + .sidebar-bottom { + padding-left: 1rem; + padding-right: 2rem; + + @include bp.xxxl { + padding-left: 1rem; + padding-right: 2.75rem; + } + + a:not(:last-child) { + margin-right: 0; + margin-left: v.$sb-btn-gap; + + @include bp.xxxl { + margin-right: 0; + margin-left: v.$sb-btn-gap-lg; + } + } + } + } + + /* Main wrapper */ + #main-wrapper { + @include bp.lg { + margin-left: 0; + margin-right: v.$sidebar-width; + } + + @include bp.xxxl { + margin-left: 0; + margin-right: v.$sidebar-width-large; + } + + > .container { + @include bp.xxxl { + @include mx.pl-pr(1.75rem, true); + } + } + } + + /* Topbar */ + #topbar-wrapper { + @include bp.lt(bp.get(lg)) { + left: auto; + right: 0; + } + } + + #topbar { + #breadcrumb { + padding-left: 0; + padding-right: 0.5rem; + + span:not(:last-child) { + &::after { + content: '‹'; + padding: 0 0.3rem; + } + } + } + } + + #search-cancel { + right: auto; + left: 0.6rem; + } + + /* Home page */ + #post-list .card-body { + .card-text.content p { + margin-left: 0; + margin-right: 0; + } + + .post-meta i { + &:not(:first-child) { + margin-left: 0; + margin-right: 1.5rem; + + @include bp.md { + margin-left: 0; + margin-right: 1.75rem; + } + } + } + } + + /* Posts */ + h1, + h2, + h3, + h4, + h5, + h6 { + .anchor { + float: left; + margin-left: 0; + margin-right: 0.35em; + } + } + + .post-meta { + span + span::before { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + } + + .post-tail-wrapper { + .share-wrapper { + .share-icons { + > * { + margin-left: 0; + margin-right: 0.5rem; + } + } + } + } + + .post-navigation { + .btn { + &:first-child { + border-radius: 0 v.$radius-lg v.$radius-lg 0; + left: 0; + right: 0.5px; + } + + &:last-child { + border-radius: v.$radius-lg 0 0 v.$radius-lg; + left: 0.5px; + right: 0; + } + } + } + + /* Archives */ + #archives { + .year { + margin-left: 0; + margin-right: -4px; + + &::before { + left: auto; + right: 79px; + } + + &::after { + left: auto; + right: 21.5px; + } + } + + ul li { + &::before { + left: auto; + right: 77px; + } + } + + .date { + right: auto; + left: 0.5rem; + } + + a { + margin-left: 0; + margin-right: 2.5rem; + + &::before { + left: auto; + right: 71px; + float: right; + } + } + } + + /* Categories */ + .category-trigger { + i { + transform: rotate(180deg); + } + } + + .rotate { + transform: rotate(90deg); + } + + /* Tables */ + .table-wrapper { + th, + td { + text-align: right; + } + } + + /* Blockquotes */ + blockquote { + border-left: none; + border-right: 0.125rem solid var(--blockquote-border-color); + padding-left: 0; + padding-right: 1rem; + + &[class^='prompt-'] { + border-right: 0; + padding: 1rem 3rem 1rem 1rem; + + &::before { + left: auto; + right: 0.25rem; + } + } + } + + /* Lists */ + .content { + ol, + ul { + &:not([class]), + &.task-list { + padding-inline-end: 2.5rem; /* Increased padding for better marker alignment */ + margin-right: 0; + + li { + padding-left: 0; + padding-right: 0; + position: relative; + + &::marker { + text-align: right; + } + } + + ol, + ul { + padding-inline-end: 1.5rem; /* Adjusted for nested lists */ + } + } + } + + ul.task-list { + padding-inline-start: 0; + padding-inline-end: 1.5rem; + + li { + padding-left: 0; + padding-right: 0; + + /* checkbox icon */ + > i { + margin-left: 0; + margin-right: 0.25rem; + } + + ul { + padding-inline-start: 0; + padding-inline-end: 1.75rem; + } + } + + input[type='checkbox'] { + margin: 0 0.5rem 0.2rem -1.3rem; + vertical-align: middle; + } + } + + dl > dd { + margin-left: 0; + margin-right: 1rem; + } + } + + /* Code snippets */ + .highlighter-rouge { + direction: ltr; + text-align: left; + } + + div[class^='language-'] { + .code-header { + text-align: left; + margin-left: 0.25rem; + margin-right: 0.75rem; + } + } + + td.rouge-code { + text-align: left; + } + + /* TOC */ + #toc-wrapper { + ul { + padding-left: 0; + padding-right: 0; + + li a { + padding: 0.4rem 1.25rem 0.4rem 0; + } + + ul { + padding-left: 0; + padding-right: 0.75rem; + } + } + } + + #toc-bar { + margin: 0 -1rem; + + .label { + margin-left: 0; + margin-right: 0.375rem; + } + } + + #toc-popup { + @include bp.lg { + left: auto; + right: v.$sidebar-width; + } + + ul li { + a { + padding-right: 0; + padding-left: 1.125rem; + } + } + + @for $i from 2 through 4 { + .node-name--H#{$i} { + padding-right: 1.125rem * ($i - 1); + padding-left: 0; + } + } + } + + /* Related posts */ + #related-posts { + > h3 { + text-align: right; + } + } + + /* Tags */ + .post-tag:not(:last-child) { + margin-right: 0; + margin-left: 0.2rem; + } + + /* Footer */ + footer { + text-align: right; + } + + /* Keyboard */ + kbd { + margin: 0 0.3rem; + } + + /* Back to top button */ + #back-to-top { + right: auto; + left: 1rem; + + @include bp.lg { + right: auto; + left: 5%; + } + + @include bp.xxl { + right: auto; + left: calc((100vw - v.$sidebar-width - 1140px) / 2 + 3rem); + } + + @include bp.xxxl { + right: auto; + left: calc( + (100vw - v.$sidebar-width-large - v.$main-content-max-width) / 2 + 2rem + ); + } + } + + /* Fix for Bootstrap components */ + .me-auto { + margin-right: 0 !important; + margin-left: auto !important; + } + + .me-sm-4 { + @include bp.sm { + margin-right: 0 !important; + margin-left: 1.5rem !important; + } + } + + .ms-1 { + margin-left: 0 !important; + margin-right: 0.25rem !important; + } + + .ms-2 { + margin-left: 0 !important; + margin-right: 0.5rem !important; + } + + .ms-3 { + margin-left: 0 !important; + margin-right: 1rem !important; + } + + .ms-4 { + margin-left: 0 !important; + margin-right: 1.5rem !important; + } + + .ms-lg-0 { + @include bp.lg { + margin-left: 0 !important; + margin-right: 0 !important; + } + } + + .me-1 { + margin-right: 0 !important; + margin-left: 0.25rem !important; + } + + .me-2 { + margin-right: 0 !important; + margin-left: 0.5rem !important; + } + + .me-3 { + margin-right: 0 !important; + margin-left: 1rem !important; + } + + .pe-1 { + padding-right: 0 !important; + padding-left: 0.25rem !important; + } + + .pe-2 { + padding-right: 0 !important; + padding-left: 0.5rem !important; + } + + .pe-4 { + padding-right: 0 !important; + padding-left: 1.5rem !important; + } + + .ps-0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .ps-2 { + padding-left: 0 !important; + padding-right: 0.5rem !important; + } + + .ps-3 { + padding-left: 0 !important; + padding-right: 1rem !important; + } + + .ps-4 { + padding-left: 0 !important; + padding-right: 1.5rem !important; + } + + .ms-auto { + margin-left: 0 !important; + margin-right: auto !important; + } + + .px-md-3 { + @include bp.md { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + } + + /* Text alignment in RTL */ + .text-start { + text-align: right !important; + } + + .text-end { + text-align: left !important; + } +}