Closed Bug 1150449 Opened 5 years ago Closed 5 years ago

use Droid Naskh UI Arabic font for Arabic script instead of Droid Arabic Naskh

Categories

(Firefox OS Graveyard :: General, defect)

All
Gonk (Firefox OS)
defect
Not set

Tracking

(blocking-b2g:2.2+, b2g-v2.2 verified, b2g-master verified)

VERIFIED FIXED
2.2 S12 (15may)
blocking-b2g 2.2+
Tracking Status
b2g-v2.2 --- verified
b2g-master --- verified

People

(Reporter: jfkthame, Assigned: pivanov)

References

Details

Attachments

(8 files, 2 obsolete files)

Droid Arabic Naskh is problematic because its tall/deep glyphs tend to exceed the available line height, leading to overflow or clipping; see bug 1150394 and its dependencies.

It looks like Noto Naskh Arabic is a somewhat more vertically compact design, and so adopting this as a replacement Arabic font may mitigate these issues. I'm not sure exactly how much difference it will make, but we should at least take a look.
NI Delphine for feedback.
Flags: needinfo?(lebedel.delphine)
Hi. I'm not the right person for this, sorry :) Ni on Ahmed and Stephany so they might clarify, or plug in the right people
Flags: needinfo?(swilkes)
Flags: needinfo?(nefzaoui)
Flags: needinfo?(lebedel.delphine)
FWIW Droid Arabic Naskh has been irritating me for quite a while now and raised the same concerns for me.
So I'd love to have it replaced with something better.
Though Bug 1150394 is not specific to the font Arabic Droid Naskh, AFAIK this is because we dn't ship those fonts in Firefox Desktop (except for Mulet which has this as one of the main purposes).

I find Noto Naskh Arabic beautiful for the eye as I'm reading Arabic text with it, though i'd love to hear what Rami thinks about this (1).
Otherwise if someone could make a build with this font shipped so I can see what it's like to have it in B2G?

(1) https://www.google.com/get/noto/#/family/noto-naskh-arab
Flags: needinfo?(nefzaoui) → needinfo?(rami223)
Attached file [PR] replace Droid Naskh with Noto (obsolete) —
Attachment #8588033 - Flags: review?(mwu)
Screenshot showing a comparison of the current Droid Naskh font (left) and Noto Naskh Arabic (right). It's clear that the Noto font is significantly smaller visually, for the same nominal point size; this will clearly help it fit within the available space, but could also have a (negative?) impact on readability on devices.
Comment on attachment 8588033 [details] [review]
[PR] replace Droid Naskh with Noto

Mechanics look fine. Just need to figure out if we want this..
Attachment #8588033 - Flags: review?(mwu) → review+
We'll need to wait on this until Patryk is back next week. He's in charge of typefaces. Please do not change anything in the meantime. NI? to Przemek in case he can help in the meantime.
Flags: needinfo?(swilkes) → needinfo?(pabratowski)
I'll bring it up with Patryk when he gets back.
Flags: needinfo?(pabratowski) → needinfo?(padamczyk)
Adding comparison screenshot for main Comms apps on Flame as well.
No longer blocks: 1150394
See Also: → 1150394
I prefer Noto, as its closer to the actual font size of the roman glyphs, Droid appears larger in size compared to the roman fonts hence the clipping. Both fonts look OKAY on the flame but our target audience in Africa / Middle East will likely be on smaller screened devices (320x480) where the clipping is going to be a huge problem.

I would recommend some fine tuning with an arabic speaker on the lower end devices to see if the sizing is legible.

But Noto is the right path forward for sure.
Flags: needinfo?(padamczyk)
Note that we found out in bug 1133137 that we didn't have the right fonts in full flash pvtbuilds images and that this was the main cause of having a larger size.

It would make sense to have new comparison images with the right fonts (flash v18D base build then shallow flash gecko/gaia on top of it) so that Patryk can do a better educated guess.
Flags: needinfo?(jfkthame)
Flags: needinfo?(azasypkin)
Here's a comparison of Droid Arabic Naskh UI vs Noto Naskh Arabic.

Contrasting this with attachment 8588041 [details], we can see how the "UI" variant of the font has reduced the vertical space it requires -- perhaps the most striking example is the final ي character in the translation of "Geolocation" (above "Wi-Fi"). In the UI font, the connection from the preceding letter first rises up above the baseline, so that the ي does not push down as far below as it would in the non-UI version of the font.

I suppose this might be considered a "distortion" of the script in order to fit within the vertical space, but my impression is that it's a fairly common design pattern in modern typefaces that are intended to fit into a tighter, more Latin-centric line spacing.

The reduced default line spacing is also very apparent in the "Bluetooth" item, where the gap between the two lines of text is greatly reduced compared to the non-UI variant of the font.
Flags: needinfo?(jfkthame)
Here's a further comparison, in this case with several English items also present on the screen to give a better sense of how the Latin and Arabic fonts compare.

(In both this and the previous image, Droid Arabic Naskh UI is on the left, and Noto Naskh Arabic on the right.)

IMO, the relationship between Arabic and Latin text is much better with the Droid font; if we switch to Noto, the Arabic becomes visually very small and weak, and the couple of English items in the list seem quite overpowering in comparison. This is largely because the Latin glyphs consistently fill at least the ex-height, so that the body of the text line is very clear and solid, whereas Arabic is based on a single horizontal line from which glyph features project up and/or down. It does not have the same kind of "body" for the line as a whole, and the distinguishing features that readers need to recognize -- in particular, the patterns of one, two or three dots -- are very small compared to the distinctive features of Latin glyphs.

Therefore, if the Droid Arabic Naskh UI font fits acceptably within the design of the Gaia widgets and UI, I think we should probably prefer it. It will be much more readable for users with small, limited-resolution screens. The visually smaller glyphs of Noto will be significantly harder to distinguish on the device.
Here is comparison of "Droid Arabic Naskh + Droid Arabic Naskh UI" (left), "Noto Naskh Arabic" (middle) and "Noto Naskh Arabic + Noto Naskh Arabic UI" (right, taken from [1]).

With "Noto Naskh Arabic" we still see bug 1133137 and various issues in Dialer, with either "Droid Arabic Naskh UI" or "Noto Naskh Arabic UI" I haven't noticed any issues so far. 

[1] https://code.google.com/p/noto/source/browse/fonts/individual/unhinted/NotoNaskhArabicUI-Regular.ttf?name=master
Attachment #8589041 - Attachment is obsolete: true
Flags: needinfo?(azasypkin)
Given what Oleg and Jonathan showed, I definitely agree with Jonathan here.

This is especially visible in the various screenshots that Oleg shared: when Latin and Arabic text is mixed, the Droid arabic font looks better. And with the UI variant there seems to be no fallout from a too high height.

Patryk, what do you think with these new screenshots? If you agree with this, we could dupe to bug 1152420, which is the bug to add the Droid UI font to our pvt builds.
Flags: needinfo?(padamczyk)
From My side I preferred noto over Andriod but It is good idea to see an example where both Latin and Arabic is mixed in one sentence.
Flags: needinfo?(rami223)
Droid looks more legible cause its bigger, but Noto feels cleaner. In the end we need to let someone who is well versed in Arabic to make the cool, if Noto is legible enough I'd go with Noto. 

Oleg's screenshots are great, do we know anyone who can read arabic well to make a recommendation? My main concern here is legibility.
Flags: needinfo?(padamczyk)
Just to be clear: we'll need the "UI" counterpart of Noto, because the "normal" Noto do not have the right measurements either. See for example in the 2 last screenshots, we can clearly see that in the middle (where we use "normal" Noto) the contact name miss some "points" at the bottom.

That's why we need the UI flavor of the fonts. And that's why I prefer Droid over Noto, when only looking the left vs right screenshots.
Flags: needinfo?(padamczyk)
Can we add the UI counterpart? If we can't, then Droid will be a better choice in this instance.
Flags: needinfo?(padamczyk)
Patryk, left screenshot is Droid UI, right screenshot is Noto UI. I think we can add the fonts we want.

Can you explain why you prefer Noto UI over Droid UI? I still don't understand given how IMO Droid UI fits better when there is Latin text as well.
Flags: needinfo?(padamczyk)
From an theoretical stand point, Noto's aim is to replace Droid. Its a more balanced and complete typeface. 
Visually it's not as strong as Droid, its smaller, more balanced, which is why Jonathan initially filed this bug due to line height issues.

Jonathan is the Mozilla type expert so, perhaps he should make the call here. I trust his opinion.
Flags: needinfo?(padamczyk) → needinfo?(jfkthame)
Yes, we filed the bug initially before we found out about the UI flavor of the fonts. FWIW Jonathan already gave an advice in comment 13.
My opinion is still what's expressed in comment 13: I think the Droid UI font will be more readable on small device screens, and is a more balanced match for Fira Sans. (Note that we're not using Noto as our Latin font, so even if Noto Arabic harmonizes better with Noto Sans, that's not particularly relevant to FxOS.)

Still, it's not my language or my writing system! I think it should be the Arabic-using community that makes this call, not me.
Flags: needinfo?(jfkthame)
NI Delphine to help finding someone from the arabic-using community (I think Ahmed is quite busy these days).
Flags: needinfo?(lebedel.delphine)
Comment on attachment 8590225 [details]
Comparison of Droid and Noto fonts for Arabic on Flame (Comms).png

So reading the whole bug... it looks like we are going in circles.
Ahmed and Rami who read arabic prefer Noto, but commented before seeing screenshots.

I believe the UI versions of Droid and Noto fix the height issues, so either way we will use one of them.

So to finally make a decision Ahmed and Rami, do you approve the use of Noto in the UI or do you prefer to stick with Droid based on these screenshots?
Flags: needinfo?(lebedel.delphine)
Attachment #8590225 - Flags: review?(rami223)
Attachment #8590225 - Flags: review?(nefzaoui)
Comment on attachment 8590225 [details]
Comparison of Droid and Noto fonts for Arabic on Flame (Comms).png

My apologies for the huge delay. /me having hard times catching up with bugzilla these days.
OK, so I posted(1) attachment 8590225 [details] to our Arabic community Facebook group to gather feedback, and see how our Arabic-speaking members see the fonts in terms of their readability, size, etc.
And *all* the comments were in favor of "the font to the left", AKA Droid UI.

Thus, I am in favor of that font too.

Sorry for the delay!!

(1); https://www.facebook.com/groups/603636196365533/permalink/869658956429921/
Attachment #8590225 - Flags: review?(nefzaoui) → review+
Summary: use Noto Naskh Arabic font for Arabic script to replace Droid Arabic Naskh → use Droid Naskh UI Arabic font for Arabic script to replace Droid Arabic Naskh
Ok then its settled (comment 26th) Droud UI it is.
(it's 2.2+ because this breaks a lot of different UIs).

Pavel, I was told that you can do the change?
blocking-b2g: --- → 2.2?
Flags: needinfo?(pivanov)
Sure, I need the fonts and license of the fonts and then I can create a PR.
Flags: needinfo?(pivanov)
Pavel:

We can find it in Android source:

https://github.com/android/platform_frameworks_base/tree/kitkat-release/data/fonts
(direct link to file is https://github.com/android/platform_frameworks_base/raw/kitkat-release/data/fonts/DroidNaskhUI-Regular.ttf)
(Android source repository is less useful as you can't download the file directly: https://android.googlesource.com/platform/frameworks/base/+/kitkat-release/data/fonts/)

License is Apache 2.0 (see README.txt and NOTICE)
Flags: needinfo?(pivanov)
Attached file patch for master
Hey Michael,
I'm just not sure about the LICENSE. Do we need to put this one
https://github.com/android/platform_frameworks_base/blob/kitkat-release/data/fonts/NOTICE

in to:
https://github.com/mozilla-b2g/moztt/tree/master/AndroidFonts
Flags: needinfo?(pivanov)
Attachment #8595812 - Flags: review?(mwu)
That directory already has the license from NOTICE, so you shouldn't need to do anything.
Comment on attachment 8595812 [details] [review]
patch for master

I think you need to also remove Droid Arabic Naskh, per the bug title.
Attachment #8595812 - Flags: review?(mwu)
Assignee: nobody → pivanov
blocking-b2g: 2.2? → 2.2+
I talked with Julien and I ask him about this and as I understand he and Oleg wants to have both fonts. Oleg, Julien?
Flags: needinfo?(felash)
Flags: needinfo?(azasypkin)
As far as I remember we need both, but let me double check this.
Changing bug title, but let's wait for Oleg's check first.
Flags: needinfo?(felash)
Summary: use Droid Naskh UI Arabic font for Arabic script to replace Droid Arabic Naskh → use Droid Naskh UI Arabic font for Arabic script in addition to Droid Arabic Naskh
Okay, seems I was wrong and everything (in Comms apps at least) looks the same with UI font only, but at the same time additional non UI font doesn't make thing worse.

Sorry for the confusion!
Flags: needinfo?(azasypkin)
Unless we're absolutely sure the UI font has the same glyphs than the non-UI font, I'd keep the non-UI font with the UI font in v2.2, and remove it on master.

Patryk, do you know if the 2 fonts have the same set of glyphs?
Flags: needinfo?(padamczyk)
It appears that the UI fonts contain special glyphs like the Android Logos. So it appears that they are both the same for the language coverage. If they both look the same, best stick with what we used before to minimize regressions.
Flags: needinfo?(padamczyk)
No they don't look the same, that's the main point of the bug.

Thanks, so it really looks like that the UI font has the same glyphs than non-UI font and more. So let's use the UI font only !

Thanks all :)
Attachment #8590225 - Flags: review?(rami223) → review+
Hi Pavel,
Could you help to provide an update patch with removed Naskh-Regular font as everyone agreed? 
Thank you!
Status: NEW → ASSIGNED
Flags: needinfo?(pivanov)
Flags: needinfo?(pivanov)
Attachment #8595812 - Flags: review?(mwu)
:josh

sorry for the delay. PR is updated
Comment on attachment 8595812 [details] [review]
patch for master

Sorry - you're almost there, but there's no WOFF version of this font. You can either provide a WOFF version of the font or don't use the TTF_EXT variable. See https://bugzilla.mozilla.org/show_bug.cgi?id=1111950#c7 for jfkthame's comments on WOFF conversion.
Attachment #8595812 - Flags: review?(mwu)
Comment on attachment 8595812 [details] [review]
patch for master

Gotcha!
Thanks Michael :)

Now we have WOFF version. PR updated.
Attachment #8595812 - Flags: review?(mwu)
Attachment #8595812 - Flags: review?(mwu) → review+
Thanks :)

Landed in master:
https://github.com/mozilla-b2g/moztt/commit/46da1a05ac04157669685246d70ac59d48699c9e
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Rewriting bug's title again so that it covers what you did.
Summary: use Droid Naskh UI Arabic font for Arabic script in addition to Droid Arabic Naskh → use Droid Naskh UI Arabic font for Arabic script instead of Droid Arabic Naskh
Please request Gaia v2.2 approval on this patch when you get a chance.
Flags: needinfo?(pivanov)
Target Milestone: --- → 2.2 S12 (15may)
Flags: needinfo?(pivanov)
Not sure why Pavel removed the ni? without requesting approval, so can you please do it instead, Michael?
Flags: needinfo?(mwu)
I have no idea how much we want this, so I'm probably not the best person to request approval. Maybe Julien would like to?
Flags: needinfo?(mwu) → needinfo?(felash)
It was marked blocking-b2g:2.2+, so apparently somebody does.
Attachment #8588033 - Attachment is obsolete: true
Flags: needinfo?(felash)
Duplicate of this bug: 1150394
Duplicate of this bug: 1140977
Duplicate of this bug: 1133137
Comment on attachment 8595812 [details] [review]
patch for master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): -
[User impact] if declined: The arabic characters are cut vertically in some places.
[Testing completed]: Manually in the SMS application, in places where I know there used to be issues (see duplicates).
[Risk to taking this patch] (and alternatives if risky): risk is low, alternatives are manually patching all the places where the cut off happens (like bug 1148626)-- and even when doing this this could be visually wrong.
[String changes made]: none
Attachment #8595812 - Flags: approval-gaia-v2.2?
Hey guys,

something was wrong and my message disappear somehow ... sorry about this.
Hi Norry,
Please verify on master first.
Thanks
Flags: needinfo?(fan.luo)
Hi Josh,

    After comparing the above screenshots in Comment 12&13&14, the fonts of menu/button/content show completely and clearly on Flame v3.0. The bug should be verified to success, and I upload the screenshots for your double checking. thanks. 


-------------------------------------------------------------------
See attachment: verify_compare_v3.0.png and v3.0.png
Reproduce rate: 0/5

STR:
1. Change to Arabric as system language.
2. Check all Arabic fonts on Flame v3.0 (such as Settings/Phone/Message/Notification bar, etc.).
**The fonts of menu/button/content show completely and clearly.


Device: Flame v3.0 build(Pass)
Build ID               20150611160204
Gaia Revision          68269e7b6510930eb2f644f69d27d456c1bdec75
Gaia Date              2015-06-10 23:36:01
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/9ebd530c5843
Gecko Version          41.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150611.193436
Firmware Date          Thu Jun 11 19:34:48 EDT 2015
Bootloader             L1TC000118D0
Flags: needinfo?(fan.luo) → needinfo?(jocheng)
QA Whiteboard: [MGSEI-Triage+]
Flags: needinfo?(jocheng)
Attachment #8595812 - Flags: approval-gaia-v2.2? → approval-gaia-v2.2+
Approving and requesting QA verify when patch landed on 2.2
Keywords: verifyme
This bug has been verified as "pass" on latest Nightly build of Flame v2.2 by the STR in Comment 57.

Actual results: The arabic fonts of menu/button/content show completely and clearly.
See attachment: verified_v2.2.png
Reproduce rate: 0/6


Device: Flame v2.2 build(Verified)
Build ID               20150616162504
Gaia Revision          3414b07dc489976bf510fd8042c0af3b1192c160
Gaia Date              2015-06-16 22:04:56
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/a2db74491088
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150616.195829
Firmware Date          Tue Jun 16 19:58:41 EDT 2015
Bootloader             L1TC000118D0
Status: RESOLVED → VERIFIED
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.