Font Bottom Padding Issue

[SarahAziz20]

Issue Details

Affected operating system: iOS only. react-native version: 0.61.5 Tested the issue on: iPhone 11, iPhone X and iPhone Xs Tested the issue on iOS versions: 13.1 and 13.3

Steps to Add Font

1. add font to assets folder in react native project
2. add font to font folder in xcode project
3. run react-native link

Expected Results

The letters should show complete without any padding that affects it.

Actual Results

Some letters are cut off due to bottom padding

Attachments

On the left, the word should be كلمة , but the dots on letter ة are cut off. In comparison with the image on the right which uses a different font, we can see there is a bottom padding for tajwal.

This word should be شروط, but the dot in letter ش is cut off.

This word should be أنشئ, but the letter أ is cut off from the top.

This word should be مؤهلا, but the letter ؤ is cut off from top.

[omhoumz]

+1

[muhsin8055]

Dears,

I have an issue with the underline thickness it isn't clearly visible except regular and black weight, can you please find solution for this?

[fatheyabdelslam]

+1

[omarkhatibco]

I have the same problem also, by Mac OS

[Mood-al]

i have the same problem of font bottom padding and i tried to solve it in many ways but same thing nothing worked out so i hope if there anyone could fix this issue

[magedjisr]

same issue, hope get fixed soon

[moalamri]

Same

[mazayadigital]

This issue is happening on mobile devices in general. It's causing alignment issues for text in buttons as well as when text is set to align-center in a container - in both cases the text appears fine on desktop (even when simulating mobile view), but on mobile it's shifted upwards by few pixels. I tested this on Android and iOS - on Safari, Firefox and Chrome.

Please advise.

[Mood-al]

This issue is happening on mobile devices in general. It's causing alignment issues for text in buttons as well as when text is set to align-center in a container - in both cases the text appears fine on desktop (even when simulating mobile view), but on mobile it's shifted upwards by few pixels. I tested this on Android and iOS - on Safari, Firefox and Chrome.

Please advise.

I changed the font i tried to fix it but it didnt work to me so i changed it to Cairo font

[karimSalahx]

Any updates on this?

[amir-ibrahim]

+1

[LeoMacherla]

+1

[yhijji]

+1

[isa-sabbagh]

Same issue also.

[m2001said]

same issue also, i think i will change the font to any other fonts, as i search alot of time and when i change font to Cairo or other fonts, it works well

[davelab6]

An internal bug report (b/150860642) included this comment

We are having issues with tajawal font in Arabic where there is bottom padding for the font. So the letters are cut off from the top. This specifically happens on iOS. It has been reported on github but no one responded.

[blizbrain]

you can use transfonter.org. upload your files and turn On Fix vertical metrics.

[AlquserAbod]

+1

[iso-ivanv]

+1 Reproduced on iOS, Mac, android on both Chrome and Safari. Works well on Windows though. So at this point I'm wondering weather the issue is on Windows but the other OSes are the expected behavior. And does it have something to do with the high DPI screens for mobile devices ?