quran.com-frontend icon indicating copy to clipboard operation
quran.com-frontend copied to clipboard

Published 20 hours ago • verified publisher icon quran

Text based fonts (staging)

Open ysofi opened this issue 7 years ago • 4 comments

Alhamdulillah, the new text based fonts are looking good.

Below are a few issues and tests.

Firstly they seem to have fixed an issue in firefox with the pause signs were being cut off, along with parts of the letter alif in some verses. If someone can test this on Firefox on other platforms (Mac, Linux) and earlier versions of Windows that would be great insha'Allah.

Example of old fonts on FF (current production)

old_firefox_19_26

New working fonts (again, if anyone can test on FF on another platform please add your results, JazakAllahu khayran)

ligga_firefox_19_26

In Microsoft Edge and IE all the end of ayah markers are missing.

Edge reading mode (40.15)

markers_reading_edge

Edge line by line (40.15)

markers_line_edge

In Chrome the end of ayah markers do show but are cut off. This one is a little strange as it depends on the window width. Observe below.

cut_marker_chrome

Now watch as I change the browser width, you can see the full marker being revealed and then again being concealed the more you move it to either direction.

moving_cut_marker_chrome

All browsers This is something I've seen in all the browsers I've tested on. Some pause marks overlap with the vowels.

overlap_pause

overlap_pause_2

Ligature tests from https://ligga.herokuapp.com

All these tests were run on Windows 10 (1607 and 1703)

Firefox 52 ligga_ff

Chrome

ligga_chrome

Edge

ligga_edge

IE 11 If someone can confirm if this is the case also on W7 that would be great.

ligga_ie

@naveed-ahmad

ysofi avatar Apr 10 '17 14:04 ysofi

Jazak Allah khairan @ysofi thanks detailed report. The real problem here is to confirm if all glyph are working as expected. While debugging issues you reported on PR I noticed glyph for يَا أَيُّهَا was't working on almost all pages(Chrome/Mac), but works fine on Window(Edge and Chrome). Working on a tool to compare rendering text with different font types. Will fix the font next week inshAllah after completing the tool, wip demo here:

2017-04-10_2017

Rendered same verse using three different fonts( the new text based font are not showing يَا أَيُّهَا )

naveed-ahmad avatar Apr 10 '17 15:04 naveed-ahmad

Update on this?

mmahalwy avatar Apr 18 '17 05:04 mmahalwy

note for myself: Need to fix/merge glyph for some words in these ayahs: https://github.com/quran/quran.com-frontend/issues/802

naveed-ahmad avatar Jun 20 '17 21:06 naveed-ahmad

@mmahalwy sorry fonts are complex, one day inshAllah :)

naveed-ahmad avatar Jun 20 '17 21:06 naveed-ahmad