Language-Mapping / language-map

Front-end codebase for Language Mapping web map
https://languagemap.nyc
MIT License
6 stars 4 forks source link

Correctly show IPA characters in UI #84

Closed rperlin-ela closed 3 years ago

rperlin-ela commented 4 years ago

Description

14 endonyms that contain IPA characters are displaying awkwardly in Gentium. We want to use Google Noto Sans Regular for those 14 to get a better display. Fonts are listed in the UI_Fonts tab on this sheet: https://docs.google.com/spreadsheets/d/1QfySFNpD2VnLand3-lTNAPAlrm0Cmv9As01LAXgXC0E/edit#gid=2111360179

We want a setup, as we have endonyms, where this list can be maintained and changed by ELA, automatically updating the UI with Noto font instead of Gentium for relevant items.

abettermap commented 3 years ago

Just going to walk myself through some of the thought process on troubleshooting this one:

Is font size to blame?

No. I pasted Molisan into Google Fonts and it just can't hang with that char:

image

Is it fine in Noto Sans?

Yep:

image

Are you sure?

Nope:

image

It's actually falling back to Lucida Grande:

image

What is this character?

What's the difference between these two?

image

image

If I use the latter instead of the former, Noto Sans shows it fine:

image

Here are the actual chars:

Oh, it's a combo

image

Right? We can't just pull the ol' switcheroo and use the one that works?

Now what?

Continue this after "what is this character?" is answered.

Ideally we don't want to give up Gentium Basic, so it's either:

  1. Find a different heading font to use across the board
  2. If checkable by character, set just those ones to Noto Sans doesn't actually work, there are system fallbacks that make it look like it's working. So, need another font.

Are there patterns?

Does it occur with a handful of the same chars? If so, we could get away with checking for those characters instead of loading config.

Answer: YES. I narrowed it down to just 5 chars:

ɑ: Cilendɑno
U+0251 : LATIN SMALL LETTER ALPHA

ɑ̀: Bənəvientɑ̀nə, Marchizɑ̀n, Mulisɑ̀nə
U+0251 : LATIN SMALL LETTER ALPHA
U+0300 : COMBINING GRAVE ACCENT {Greek varia}

ɛ: Gurenɛ, Kpɛlɛwoo, KʌThemnɛ
U+025B : LATIN SMALL LETTER OPEN E {epsilon}

ʋ: Èʋegbe
U+028B : LATIN SMALL LETTER V WITH HOOK

ɔ: Mandɔyí, Mɔjukru, Thuɔŋjäŋ
U+0254 : LATIN SMALL LETTER OPEN O

...which are problematic because those glyphs are not included in any Google Fonts option.

Then there are these, which are only missing from some fonts (e.g. Gentium Basic):

ụ: Asụsụ Igbo
U+1EE5 : LATIN SMALL LETTER U WITH DOT BELOW

ẽ: Avañe'ẽ
U+1EBD : LATIN SMALL LETTER E WITH TILDE

ế: Tiếng Việt
U+1EBF : LATIN SMALL LETTER E WITH CIRCUMFLEX AND ACUTE

So, conceivably we could find a decent heading font to use instead of Gentium Basic, then we'd be left with just 5 characters to deal with. "Just" 😆

abettermap commented 3 years ago

@rperlin-ela this is making more sense now, and I'm leaning towards checking for the problematic characters and forcing a different font stack on them (more info below) instead of switching to a heading font across the board or relying on a mix of fallbacks like we are now.

For the other 5, let's first focus on the ones with multiple languages using the char:

ɑ̀: Bənəvientɑ̀nə, Marchizɑ̀n, Mulisɑ̀nə
ɛ: Gurenɛ, Kpɛlɛwoo, KʌThemnɛ
ɔ: Mandɔyí, Mɔjukru, Thuɔŋjäŋ

Molisan and friends

Is it possible to just pull a switcheroo like I suggested above? Or is that totally not the same character/s? They look reeeeeally similar to me (says the guy with zero expertise in the matter). If not, no worries, but that would take care of one character anyway.

Why there's an issue in the first place

The way it evidently works is that the browser will try to load all the characters using glyphs from the specified font stack. The font stack is typically ordered most-to-least generic, with "ugh, I GUESS SO" at the end, in our case serif:

Gentium Basic
All the custom ones we're loading from Google Fonts
Times
serif

In my case it settled on Lucida Console but it seems like it would vary between OS. Either way, it tries to use the same font throughout but if the font is missing any glyphs then it and keeps trying the remaining ones (top to bottom) until it hits one containing the glyph.

If it doesn't find any, then tofu. If it finds one, it renders just the missing glyph/s from the font it found, which is why it looks weird is due to the mix of fonts being used. Even if I set regular Gentium as the fallback (which contains the glyph we want) and Gentium Basic (which does not) as the first font, it still looks a little weird:

image

Plan of action

  1. Keep using Gentium Basic unless the text contains one of the trouble chars. To my knowledge there is no nice-looking catch-all font with those extra char
  2. ~~...but I'll need to check via JavaScript to see if the phrase (in Details, Popups, etc.) So I'll need to make sure the whole word or phrase uses the same font.~~ I could set them all to regular Gentium and that should cover our tricky glyphs, but I don't think it compares to Gentium Basic it's not bad if I don't use bold :

image

image

If no one is opposed to regular Gentium (technically Gentium Alt), this fixes all the outstanding IPA issues AFAIK. I need to fix the deploy but it will be here when I do: http://deploy-preview-126--languagemapping.netlify.app/

abettermap commented 3 years ago

in the meantime here is regular Gentium, looks a bit cleaner IMO than bold:

image

abettermap commented 3 years ago

ok fixed: https://deploy-preview-126--languagemapping.netlify.app/

rperlin-ela commented 3 years ago

Gentium (Alt) to the rescue, this looks great to me and all good to go. And thank you for working through everything, valuable process in itself

On Oct 23, 2020, at 10:29 PM, Jason Lampel notifications@github.com wrote:

ok fixed: https://deploy-preview-126--languagemapping.netlify.app/ https://deploy-preview-126--languagemapping.netlify.app/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/84#issuecomment-715659189, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5EYTVVHDKYHCILPX33SMI3ZVANCNFSM4RPGOCMQ.