diff --git a/share/al-quran.reflectslight.io/CHANGELOG b/share/al-quran.reflectslight.io/CHANGELOG index ea76e61eb..f11ba3382 100644 --- a/share/al-quran.reflectslight.io/CHANGELOG +++ b/share/al-quran.reflectslight.io/CHANGELOG @@ -2,6 +2,10 @@ ** vNEXT +**** Add "Amiri Quran Regular" font +This new font is used specifically for the contents of a surah +in the Arabic locale / language + **** Replace custom z-index rule Replace custom z-index rule with the CSS class ~.z-10~ diff --git a/src/css/main/SurahStream.scss b/src/css/main/SurahStream.scss index c04db0009..ef1b68a39 100644 --- a/src/css/main/SurahStream.scss +++ b/src/css/main/SurahStream.scss @@ -19,6 +19,11 @@ body .root .content.theme { } body .root .content.theme.rtl { + ul.body.stream[lang="ar"] { + li.ayah p { + font-family: "Amiri Quran Regular"; + } + } ul.body.stream { li.ayah p { max-width: 470px; diff --git a/src/fonts/amiri-quran-regular.ttf b/src/fonts/amiri-quran-regular.ttf new file mode 100644 index 000000000..2efa8fa49 Binary files /dev/null and b/src/fonts/amiri-quran-regular.ttf differ diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx index 9a0f6568f..5f755c2f5 100644 --- a/src/js/components/SurahStream/Stream.tsx +++ b/src/js/components/SurahStream/Stream.tsx @@ -21,6 +21,7 @@ export function Stream({ t, }: Props) { const className = endOfStream || isPaused ? ["scroll-y"] : []; + const isArabic = locale.name === "ar"; const ref = useRef(null); const ul = useMemo(() => { const ltr = locale.direction === "ltr"; @@ -37,7 +38,13 @@ export function Stream({ > {stream.map((ayah: Ayah) => { return ( -
  • +
  • @@ -59,7 +66,9 @@ export function Stream({ {formatNumber(locale, surah.ayat.length)} -

    {ayah.body}

    +

    + {ayah.body} +

  • ); })} diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts index 335d2bc2c..0455cb8e0 100644 --- a/src/js/loaders/SurahStreamLoader.ts +++ b/src/js/loaders/SurahStreamLoader.ts @@ -22,6 +22,7 @@ import { formatNumber } from "~/lib/t"; item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }), item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }), item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"), + item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"), /* eslint-disable */ item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }), item.json(`/json/${doc.lang}/${surahId}/surah.json?v=${rev}`, { className: "json surah" }),