Apply Amiri font for Farsi

share/al-quran.reflectslight.io/CHANGELOG.txt

@@ -2,6 +2,12 @@
 
 * vNEXT
 
+** Apply Amiri font for Farsi
+Similar to Arabic - apply the Amiri Regular font for the content
+of a surah. With this change the distinction is more so between a
+RTL language vs a LTR language rather than between Arabic vs English
+vs Farsi
+
 ** Center-align ~ul.body.stream~
 For RTL languages we will show the content of a surah centered,
 and within a max width of 470px

src/css/main/SurahStream.scss

@@ -19,7 +19,7 @@ body .root .content.theme {
 }
 
 body .root .content.theme.rtl {
-  ul.body.stream[lang="ar"] {
+  ul.body.stream {
     li.ayah p {
       @extend .font-amiri;
     }

src/js/components/SurahStream/Stream.tsx

@@ -22,6 +22,7 @@ export function Stream({
 }: Props) {
   const className = endOfStream || isPaused ? ["scroll-y"] : [];
   const isArabic = locale.name === "ar";
+  const isRTL = locale.direction === "rtl";
   const ref = useRef<HTMLUListElement>(null);
   const ul = useMemo<JSX.Element>(() => {
     return (
@@ -38,8 +39,8 @@ export function Stream({
             <li
               key={ayah.id}
               className={classNames("ayah fade", {
-                "mb-8": isArabic,
+                "mb-8": isRTL,
-                "mb-5": !isArabic,
+                "mb-5": !isRTL,
               })}
             >
               <span className="flex h-8 items-center color-primary">
@@ -63,7 +64,7 @@ export function Stream({
               </span>
               <p
                 className={classNames("m-0 color-accent", {
-                  "text-2xl mt-5": isArabic,
+                  "text-2xl mt-5": isRTL,
                 })}
               >
                 {ayah.body}