Set the direction to rtl because Arabic is written from right to left.

src/components/Breadcrumbs.tsx

@@ -20,7 +20,7 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
                     {crumb.title}
                   </a>
                 </Link>
-                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                <span className="inline-block ml-1 rotate-180 text-link dark:text-link-dark text-lg">
                   <svg
                     width="20"
                     height="20"

src/components/DocsFooter.tsx

@@ -76,7 +76,7 @@ function FooterLink({
         )}>
         <IconNavArrow
           className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-          displayDirection={type === 'Previous' ? 'left' : 'right'}
+          displayDirection={type === 'Previous' ? 'right' : 'left'}
         />
         <span>
           <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">

src/components/Layout/Feedback.tsx

@@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
+      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg ml-4">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>
       {!isSubmitted && (
         <button
           aria-label="Yes"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
+          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 ml-2"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();

src/components/Layout/Page.tsx

@@ -164,7 +164,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
                             target="_blank">
                             Take our survey!
                             <IconNavArrow
-                              displayDirection="right"
+                              displayDirection="left"
                               className="inline ml-1"
                             />
                           </ButtonLink>

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -56,10 +56,10 @@ export function SidebarLink({
         target={target}
         aria-current={selected ? 'page' : undefined}
         className={cn(
-          'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pl-2 w-full rounded-none lg:rounded-l-2xl text-right hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
-            'text-sm pl-6': level > 0,
-            'pl-5': level < 2,
+            'text-sm pr-6': level > 0,
+            'pr-5': level < 2,
             'text-base font-bold': level === 0,
             'text-primary dark:text-primary-dark': level === 0 && !selected,
             'text-base text-secondary dark:text-secondary-dark':
@@ -83,7 +83,7 @@ export function SidebarLink({
               'text-link dark:text-link-dark': isExpanded,
               'text-tertiary dark:text-tertiary-dark': !isExpanded,
             })}>
-            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
+            <IconNavArrow displayDirection={isExpanded ? 'down' : 'left'} />
           </span>
         )}
       </a>

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -152,7 +152,7 @@ export function SidebarRouteTree({
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold mr-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -46,7 +46,7 @@ export default function SidebarNav({
           <nav
             role="navigation"
             style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-            className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+            className="w-full lg:h-auto grow pr-0 lg:pl-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
             {/* No fallback UI so need to be careful not to suspend directly inside. */}
             <Suspense fallback={null}>
               <SidebarRouteTree

src/components/Layout/TopNav/TopNav.tsx

@@ -264,10 +264,10 @@ export default function TopNav({
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative pl-4 pr-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-left w-full text-gray-30 rounded-full align-middle text-base'
+                  'flex 3xl:w-[56rem] 3xl:mx-0 relative pr-4 pl-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-right w-full text-gray-30 rounded-full align-middle text-base'
                 )}
                 onClick={onOpenSearch}>
-                <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="ml-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
                 Search
                 <span className="ml-auto hidden sm:flex item-center mr-1">
                   <Kbd data-platform="mac">⌘</Kbd>

src/components/MDX/ExpandableCallout.tsx

@@ -65,7 +65,7 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
       )}>
       <h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
         <variant.Icon
-          className={cn('inline mr-3 mb-1 text-lg', variant.textColor)}
+          className={cn('inline ml-3 mb-1 text-lg', variant.textColor)}
         />
         {variant.title}
       </h3>

src/components/MDX/InlineCode.tsx

@@ -14,7 +14,7 @@ function InlineCode({
   return (
     <code
       className={cn(
-        'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
+        'inline-block text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
         {
           'bg-gray-30 bg-opacity-10 py-px': !isLink,
           'bg-highlight dark:bg-highlight-dark py-0': isLink,

src/components/MDX/MDXComponents.module.css

@@ -8,11 +8,11 @@
 }
 
 .markdown ol {
-  @apply mb-4 ml-8 list-decimal;
+  @apply mb-4 mr-8 list-decimal;
 }
 
 .markdown ul {
-  @apply mb-4 ml-8 list-disc;
+  @apply mb-4 mr-8 list-disc;
 }
 
 .markdown h1 {
@@ -30,7 +30,7 @@
 }
 
 .markdown code {
-  @apply text-gray-70 bg-card dark:bg-card-dark   p-1 rounded-lg no-underline;
+  @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline;
   font-size: 90%;
 }
 

src/components/MDX/MDXComponents.tsx

@@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => (
 );
 
 const OL = (p: JSX.IntrinsicElements['ol']) => (
-  <ol className="ml-6 my-3 list-decimal" {...p} />
+  <ol className="mr-6 my-3 list-decimal" {...p} />
 );
 const LI = (p: JSX.IntrinsicElements['li']) => (
   <li className="leading-relaxed mb-1" {...p} />
 );
 const UL = (p: JSX.IntrinsicElements['ul']) => (
-  <ul className="ml-6 my-3 list-disc" {...p} />
+  <ul className="mr-6 my-3 list-disc" {...p} />
 );
 
 const Divider = () => (
@@ -191,7 +191,7 @@ function AuthorCredit({
 }) {
   return (
     <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
-      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
         <cite>
           Illustrated by{' '}
           {authorLink ? (

src/components/SocialBanner.tsx

@@ -37,7 +37,7 @@ export default function SocialBanner() {
       )}>
       <div className="hidden sm:block">{bannerText}</div>
       <ExternalLink
-        className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"
+        className="mr-0 sm:mr-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
         <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}

src/styles/index.css

@@ -6,6 +6,16 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 
+  Arabic is a right-to-left language, so we need to set the direction of the page to rtl.
+*/
+[lang='ar'] {
+  direction: rtl;
+}
+.sp-layout, .sp-wrapper, .sp-stack, [translate="no"], code, pre {
+  direction: ltr; /* reset direction for code blocks */
+}
+
 @layer base {
   @font-face {
     font-family: 'Source Code Pro';
@@ -560,7 +570,7 @@ html.dark .code-step * {
 .mdx-heading {
   scroll-margin-top: calc(4rem + 20px);
   /* Space for the anchor */
-  padding-right: 1em;
+  padding-inline-end: 1em;
 }
 
 .mdx-heading:before {
@@ -629,7 +639,7 @@ ol.mdx-illustration-block {
   display: block;
   position: absolute;
   top: 50%;
-  right: 100%;
+  left: 100%;
   transform: translateY(-50%);
   width: 60px;
   height: 49px;
@@ -653,8 +663,8 @@ ol.mdx-illustration-block {
   }
   .mdx-illustration-block li:after {
     top: 0;
-    left: 50%;
-    right: auto;
+    right: 50%;
+    left: auto;
     transform: translateX(-50%) translateY(-100%) rotate(90deg);
   }
 }