From 23a944524c8d1fc86d4705311776a299a570dbd9 Mon Sep 17 00:00:00 2001 From: mohammed Date: Fri, 15 May 2026 18:36:49 +0300 Subject: [PATCH 1/3] fixed writing direction when the language is set to arabic --- src/styles/custom.css | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 871592f506..e87a4b4aa2 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -10,11 +10,11 @@ Add styles or override variables from the theme here. --gin-blue: hsl(215, 69%, 52%); - --sl-hue-blue: 215; + --sl-hue-blue: 215; --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); - + --sl-color-accent-low: hsl(204, 54%, 20%); --sl-color-accent: hsl(204, 100%, 60%); --sl-color-accent-high: hsl(204, 100%, 85%); @@ -26,7 +26,7 @@ Add styles or override variables from the theme here. :root[data-theme='light'], [data-theme='light'] ::backdrop { /* Colours (light mode) */ - + --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%); --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%); --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%); @@ -34,4 +34,26 @@ Add styles or override variables from the theme here. --sl-color-accent-high: hsl(215, 80%, 30%); --sl-color-accent: hsl(215, 90%, 60%); --sl-color-accent-low: hsl(215, 88%, 90%); -} \ No newline at end of file +} + +/* Fix writing direction when the language is set to arabic */ +html[lang='ar'] * { + direction: rtl; + + pre, + .code, + .expressive-code, + .expressive-code *, + code span { + direction: ltr; + text-align: left; + } + + a[rel="next"] svg { + rotate: 180deg; + } + + a[rel="prev"] svg { + rotate: 180deg; + } +} From 1dce244b807739f7f58979406bbeccf905a1e42e Mon Sep 17 00:00:00 2001 From: mohammed Date: Fri, 15 May 2026 18:48:23 +0300 Subject: [PATCH 2/3] fixed kdb being reversed when language is set to arabic --- src/styles/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/custom.css b/src/styles/custom.css index e87a4b4aa2..6ffedddeed 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -49,6 +49,10 @@ html[lang='ar'] * { text-align: left; } + kbd { + flex-direction: row-reverse; + } + a[rel="next"] svg { rotate: 180deg; } From 4813b6af25e751c46ec28f3cf48a274040d7051b Mon Sep 17 00:00:00 2001 From: mohammed Date: Fri, 15 May 2026 18:57:52 +0300 Subject: [PATCH 3/3] applied the writing direction bug fix to persian --- src/styles/custom.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 6ffedddeed..84b9b4b8dd 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -36,8 +36,10 @@ Add styles or override variables from the theme here. --sl-color-accent-low: hsl(215, 88%, 90%); } -/* Fix writing direction when the language is set to arabic */ -html[lang='ar'] * { +/* Fix writing direction when the language is set to arabic and persian */ +/* The fix should be applied to all RTL languages, if more to be added in the future */ +html[lang='ar'] *, +html[lang='fa'] * { direction: rtl; pre,