1353135 - Incorrect cursive for Serbian and Macedonian Cyrillic when font-style:italic in translation-string <span>

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, defect)

Description

[Марко М. Костић (Marko M. Kostić) [:Kostic]]

Attachment: correct_and_incorrect_serbian_cyrillic_cursive.png

User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170327113357

Steps to reproduce:

Pontoon uses italic Open Sans font for "translation-string" <span> element, in the translate.html template. This font displays properly cyrillic cursive (italic) letters for Russian and Bulgarian but not for Serbian and Macedonian.

Difference in cursive letters betwen these cyrillic scripts can be easily seen on this Wikipedia picture: https://en.wikipedia.org/wiki/Serbian_Cyrillic_alphabet#/media/File:Cyrillic_cursive.png

Notice how letters г (g), д (d), п (p) and т (t) look different in Serbian and Macedonian cyrillic scripts.

Easiest solution for this is to change font-style to 'normal', in translate.css.

diff --git a/pontoon/base/static/css/translate.css b/pontoon/base/static/css/translate.css
index 695a5d9..08e25e3 100644
--- a/pontoon/base/static/css/translate.css
+++ b/pontoon/base/static/css/translate.css
@@ -1083,7 +1083,7 @@ body > header aside p {
 #entitylist > .wrapper > ul > li p span.translation-string {
   color: #AAAAAA;
   display: none;
-  font-style: italic;
+  font-style: normal;
   padding-left: 2%;
 }


Actual results:

Translations shown in italic, in 'translation-string' <span>, use font which doesn't display correct cursive for Serbian and Macedonian cyrillic scripts.


Expected results:

Translations shown in the italic, in 'translation-string' <span>, should use font which displays correct cursive for Serbian and Macedonian cyrillic scripts (for example, Ubuntu) or it shouldn't be using italic for font-family but 'normal' value.

Comment 1

[Matjaz Horvat [:mathjazz]]

We should make sure that we use a version of Open Sans with all available languages:
https://fonts.google.com/specimen/Open+Sans

If we already do, this is likely a bug in the Open Sans font.

Please note that we use a custom version of Open Sans that fixes issues for Romanian:
https://github.com/mozilla/pontoon/commit/1d68790cf397c2c3cad7ddb451f14df07af0f513

A possible fix is to use a dedicated CSS rule for Serbian and Macedonian (we can hook to the "lang" attribute on .translation-string) that applies font-style: normal; (or a different font).

Comment 2

[Марко М. Костић (Marko M. Kostić) [:Kostic]]

A dedicated CSS rule seems like a good solution. I will first try to use a font which has the correct cursive letters (so we continue using the same design) and leave changing font-style to normal only as a last solution.

Comment 3

[Марко М. Костић (Marko M. Kostić) [:Kostic]]

Created a PR at GitHub. https://github.com/mozilla/pontoon/pull/571

Will attach a "before and after" image.

Comment 4

[Марко М. Костић (Marko M. Kostić) [:Kostic]]

Attachment: font change, before and after

Comment 5

[Марко М. Костић (Marko M. Kostić) [:Kostic]]

There is also a possibility of using Open Sans but then Open Sans must be patched to contain variant forms for cursive letters b, g, d, p and t which would then automatically be used when lang is 'sr' or 'mk' (as it is the case currently with Ubuntu font).

Comment 6

[[github robot]]

Commit pushed to master at https://github.com/mozilla/pontoon

https://github.com/mozilla/pontoon/commit/b48239dfa4853b1653d3f63bcf40d45b0430a876
Fix bug 1353135: Use different font for Serbian and Macedonian cursive (#571)

Use Ubuntu Regular font for Serbian and Macedonian Cyrillic cursive in
translation-string `span` elements because Open Sans doesn't support
Serbian and Macedonian variant forms for lower case cursive letters
b, g, d, p and t.