That's how I'd like Arabic to be rendered

Leaving aside the religious content (for the sake of this discussion), check out the Arabic text on this page. You'll have noticed it is an embedded image, but see how clearly the writing and diacritics are displayed. One would wish that Arabic text were rendered this way on a browser.

What does it take to do that, I wonder.

First, is Unicode enough to capture all the combinations of diacritics and letter shapes? The Unicode does have isolated forms for diacritics, from U+FC5E to U+FE7F. But notice that on the example page, upper diacritics are placed at 2 different height levels. I don't know if that's supported. There seems to be a logic to the placement of the diacritic at a certain fixed height above
the underlying letter, so this part could be calculated by the rendering engine.

There are several HTML rendering engines used in today's browsers, they need to be enhanced to properly render Arabic as in the example page. Here's how your browser renders an Arabic text:

باسم الشعب
رئيس الجمهورية
قرر مجلس الشعب القانون الاتي نصه، وقد اصدرنا:
المادة الاولى
يعمل بالقانون المرفق في شان حماية القيم من العيب.
المادة الثانية
يلغى كل نص يتعارض مع احكام هذا القانون.
المادة الثالثة
ينشر هذا القانون في الجريدة الرسمية.
يبصم هذا القانون بخاتم الدولة، وينفذ بقانون من قوانينها
صدر برئاسة الجمهورية في 30 جمادى الاخرة سنة 1400(15 مايو سنة 1980)

(from the UNDP Programme on Governance in the Arab Region).

The immediately apparent issue is that the same font size applied to Arabic script is much too small relatively to the Latin. Try to increase the page font on your browser: the perceived increase in the Arabic size is slower than the increase in the Latin.

Arabic fonts must be released in the open domain to encourage good typesetting.