iosswiftuikituilabel

Arabic Diacritics (Harakat) Misaligned in UILabel with Justified Text Alignment

I'm encountering a visual glitch when displaying Arabic text in a UILabel with text alignment set to justified. Specifically, the Arabic diacritics (Harakat) are being misplaced, which disrupts the readability of the text. The issue seems to stem from the UILabel's attempt to justify the content, resulting in incorrect positioning of the Harakat. The issue can be seen in various font sizes, such as 34, 36, and probably more. Also the problem does not stem due to the code, as I have tried a fresh code with only a UILabel and the text.

Interestingly, when I switch the text alignment to right-to-left, the problem disappears, and the Harakat are correctly placed. However, my requirement is to have the text justified to ensure a clean and professional layout.

Has anyone faced a similar issue or can provide insight on how to maintain proper placement of Arabic diacritics in a justified UILabel? Any suggestions or workarounds to achieve a justified alignment without compromising the integrity of the Arabic script would be greatly appreciated. For Reference, here is the spesific text that you can see on the image:

وَلَنْ تَرْضَىٰ عَنْكَ الْيَهُودُ وَلَا النَّصَارَىٰ حَتَّىٰ تَتَّبِعَ مِلَّتَهُمْ ۗ قُلْ إِنَّ هُدَى اللَّهِ هُوَ الْهُدَىٰ ۗ وَلَئِنِ اتَّبَعْتَ أَهْوَاءَهُمْ بَعْدَ الَّذِي جَاءَكَ مِنَ الْعِلْمِ ۙ مَا لَكَ مِنَ اللَّهِ مِنْ وَلِيٍّ وَلَا نَصِيرٍ ‎﴿١٢٠﴾‏ الَّذِينَ آتَيْنَاهُمُ الْكِتَابَ يَتْلُونَهُ حَقَّ تِلَاوَتِهِ أُولَٰئِكَ يُؤْمِنُونَ بِهِ ۗ وَمَنْ يَكْفُرْ بِهِ فَأُولَٰئِكَ هُمُ الْخَاسِرُونَ ‎﴿١٢١﴾‏ يَا بَنِي إِسْرَائِيلَ اذْكُرُوا نِعْمَتِيَ الَّتِي أَنْعَمْتُ عَلَيْكُمْ وَأَنِّي فَضَّلْتُكُمْ عَلَى الْعَالَمِينَ ‎﴿١٢٢﴾‏ وَاتَّقُوا يَوْمًا لَا تَجْزِي نَفْسٌ عَنْ نَفْسٍ شَيْئًا وَلَا يُقْبَلُ مِنْهَا عَدْلٌ وَلَا تَنْفَعُهَا شَفَاعَةٌ وَلَا هُمْ يُنْصَرُونَ ‎﴿١٢٣﴾‏ ۞ وَإِذِ ابْتَلَىٰ إِبْرَاهِيمَ رَبُّهُ بِكَلِمَاتٍ فَأَتَمَّهُنَّ ۖ قَالَ إِنِّي جَاعِلُكَ لِلنَّاسِ إِمَامًا ۖ قَالَ وَمِنْ ذُرِّيَّتِي ۖ قَالَ لَا يَنَالُ عَهْدِي الظَّالِمِينَ ‎﴿١٢٤﴾‏ وَإِذْ جَعَلْنَا الْبَيْتَ مَثَابَةً لِلنَّاسِ وَأَمْنًا وَاتَّخِذُوا مِنْ مَقَامِ إِبْرَاهِيمَ مُصَلًّى ۖ وَعَهِدْنَا إِلَىٰ إِبْرَاهِيمَ وَإِسْمَاعِيلَ أَنْ طَهِّرَا بَيْتِيَ لِلطَّائِفِينَ وَالْعَاكِفِينَ وَالرُّكَّعِ السُّجُودِ ‎﴿١٢٥﴾‏ وَإِذْ قَالَ إِبْرَاهِيمُ رَبِّ اجْعَلْ هَٰذَا بَلَدًا آمِنًا وَارْزُقْ أَهْلَهُ مِنَ الثَّمَرَاتِ مَنْ آمَنَ مِنْهُمْ بِاللَّهِ وَالْيَوْمِ الْآخِرِ ۖ قَالَ وَمَنْ كَفَرَ فَأُمَتِّعُهُ قَلِيلًا ثُمَّ أَضْطَرُّهُ إِلَىٰ عَذَابِ النَّارِ ۖ وَبِئْسَ الْمَصِيرُ ‎

The Correct way:

The Correct way

The Wrong way: The Wrong way

I have tried anything and everything that I could think of, such as to change the font, tried to add additional spaces between the words, tried it in a fresh code, tried different sources to fetch the same text. None of them worked so far.

Solution

  • I can't reproduce this. I'm testing in a 17.2 Sim. I pasted your text into a UILabel in a default Storyboard and put autolayout constraints to make it almost the size of the screen. I set the Lines to 0, Line Break to Word Wrap, and Alignment to Justified. When I launch it, it appears justified and the harakat look correct to me (my Arabic is not great, but I can stumble through it and know how the typography works pretty well). In particular, the نْ lays out correctly. This is using the default system font. I also tried the default system font at size 34 as you suggest, and Geeza Pro Regular.

    I notice that your incorrect text seems to include tatweel/kashida in the first word (وَلَنْ). Have you inserted that yourself to create justification points? I'm suspecting if so, you may have placed the character in the wrong order. Your first mistaken layout I believe should be (please forgive me if I mess up my alphabet...):

    waw-fathah-lam-fathah-nun-sukun

    but maybe it is instead:

    was-fathah-lam-fathah-nun -tatweel- sukun

    I think this tatweel is your mistake. At the very least, I think it would go after lam-fathah, not between nun and sukun. But I don't believe UILabel needs it. Generally Arabic fonts will insert their own elongation.

    I suggest the following: