Incorrect layout/spacing

[yayashn]

The lines are accurate but either the spacing of the words is incorrect or perhaps the font size. If you compare any page in a real mushaf (especially apparent in Fatiha & first page of Baqara) you can see a clear deformation in the shape.

[6km]

Assalamualaikum @yayashn,

Apologies for the delay. I’ve been busy over the past couple of months, but I’ll start working on this issue soon, insha'Allah.

[6km]

Assalamualaikum @yayashn,

You're right. The font size wasn't accurate, some words had a different font size. I'm working on fixing that issue right now. A good way to make the layout 100% like the mushaf of King Fahd Complex is to use their V2 Font. The issue with that font is the size; the size of react-quran will be bigger because each page will have its own file of the font. The V2 fonts looks like this:

I can implement it, insha'Allah. But it will make the library bigger in size. What do you thing?

By the way, the aspect ratio of the page has been changed to a better one.

[yayashn]

Walikumasalam warahmatullah wabarakatu, yeah I think functionality is more important than size for a project like this.

[C0deXG]

Assalamualaikum @yayashn,

You're right. The font size wasn't accurate, some words had a different font size. I'm working on fixing that issue right now. A good way to make the layout 100% like the mushaf of King Fahd Complex is to use their V2 Font. The issue with that font is the size; the size of react-quran will be bigger because each page will have its own file of the font. The V2 fonts looks like this:

I can implement it, insha'Allah. But it will make the library bigger in size. What do you thing?

By the way, the aspect ratio of the page has been changed to a better one.

WOW where can i find the code for the quran UI or the website sheesh

[6km]

@C0deXG If you mean the react-quran library, just run npm install react-quran then use it in your application.

The final page UI I want to reach is Surah App:

I you need to see react-quran in use, here's a demo react app. The source code of the demo is also available.

[C0deXG]

@C0deXG If you mean the react-quran library, just run npm install react-quran then use it in your application.

The final page UI I want to reach is Surah App:

I you need to see react-quran in use, here's a demo react app. The source code of the demo is also available.

I have faced alot of issue with the react-quran i try everything i was wondering if the beutifuled website you made is open source or i can see it or you can add me i just want to see how it is bulid and i really like the style wow thanks tho anyway

every time i run npm install react-quran:
i get this which i have been facing for while:
ahmednadiir@Mac quran-app % npm install react-quran npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: hasanat-app@0.1.0 npm error Found: react@18.3.1 npm error node_modules/react npm error react@"^18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^17.0.0" from react-quran@1.2.5 npm error node_modules/react-quran npm error react-quran@"^1.2.5" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/ahmednadiir/.npm/_logs/2025-02-28T02_19_33_399Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/ahmednadiir/.npm/_logs/2025-02-28T02_19_33_399Z-debug-0.log

am using nextjs-15 and node version v20.18.3

[6km]

@C0deXG try installing with npm install react-quran --legacy-peer-deps.
By the way, the website in the image is not mine. It's a website of a Quran app called Surah.

The example made with react-quran is available at (https://react-quran-website.vercel.app/) and its source code is available at (https://github.com/6km/react-quran-website).

I will do some work on react-quran in the future to make it look alike Mushaf Al-Madinah, insha'Allah.
The biggest issue in react-quran is that there's a space between words and it will be fixed by changing the font, insha'Allah.