Hi,

I am trying to write a HTML page that displays the Islamic holy book, the Quran, in Arabic.

When I create such a document in Microsoft Word using a particular font, the text is displayed in a particular format.

However, when I try to recreate this same display in a HTML page, using the same font, the text is displayed differently, in a more compacted fashion.

How do I get the Arabic text to display in HTML exactly the same way it displays in Word?

Relevant files attached.

Many thanks in advance.

_Word Test.html HafsNastaleeqVer10.otf Test.docx

I can’t read/judge it at all, but are we sure the Word display is better or the right way to display this? I would usually trust the browser display more than Word (which has usually font features like OpenType layout features and kerning disabled).

> On 1/25/2026 at 8:04 PM, Imran Khan said:

I am trying to write a HTML page that displays the Islamic holy book, the Quran, in Arabic.

How do I get the Arabic text to display in HTML exactly the same way it displays in Word?

> On 1/25/2026 at 10:33 PM, Ralf Herrmann replied:

I would usually trust the browser display more than Word (which has usually font features like OpenType layout features and kerning disabled).

___________________________________________________________________________________________

@ Trying to fly high the Glorious Quran eye-catching text and marks?!

1. Exactly as https://Mushafmuscat.om/ .

Go explore it starting with verse 48:29 on page 515 to compare it with the image below.

2. Alternatively as http://Maryamsoft.com/hoda/ that makes use of one of our unique & dynamic typefaces https://Maryamsoft.com/FontShop/font.aspx?name=Naskh%20Qurani%2093 by:

A. Selecting the Chapter and Verse to start with and to stop at.

B. Selecting the moving text speed (x1 Normal, Fast, Slow, Faster)

C. Enlarging (+) and reducing (-) the font size.

D. Selecting Black or White backgrounds.

3. Precisely with marks recommended by Ten (10) Commandments of Arabic Fonts:

1. Longer Fatha on wide letters.

2. Longer Madda on Alif after wide letters.

3. Higher Madda on Alif after tall letters.

4. Longer + higher Madda on Alif after Wide+Tall letters.

5. Open loop sukun in place of the closed loop.

6. 69 Tanween instead of z9.

7. Standing Kasra similar to the Standing Fatha.

8. Isolated Kasra + (Tanween Kasr) from Shadda.

9. Closer Kasra + (Tanween Kasr) enveloped by final letters.

10. Marks on ط positioned slightly above where the dot of its sister ظ appears.

Hope the links, attached image and PDF files help.

Happy exploring and All the Best with Flowers https://T.me/flowerCrosswords/66

Muhammad Rasullah.48-29 - wm_NaskhAziz.pdf @Tipokaki - JawiWare PegonWare - English.pdf

If your goal just to display the text accurately and not browser accessibility (copy text, translation, tts), then your best way is to make use of SVG.

Tho the font you provided seems to not work well in my side as well (Inkscape, LibreOffice), as I don't have MS Word to confirm, it just displayed the same way as browser display. So please note that I've made manual adjustment myself.