Support rosetta sites in footer - Translate Code Is Poetry

[dd32]

Similar to #17 the Rosetta footer contains some rosetta specifics, specifically around the Code Is Poetry image where use a non-image fallback for languages where it's localised - for example on https://de.wordpress.org/ CODE IST POESIE..

[iandunn]

#46 should cover this and all the other i18n needs

cb8f1b8 internationalized the footer strings, but there are some other tasks on that ticket to do

[dd32]

re-opening as this was never actually done, displaying the text in English, as the SVG does, is the part that's not translated.

[iandunn]

@beafialho , do you know what font the existing image uses? Or which font you'd like the translated text to use?

[beafialho]

The font used in it is Mrs Eaves Small Caps (context). I think this font doesn't support many languages, and I wonder if it's better not to translate it at all.

[dd32]

I wonder if it's better not to translate it at all.

From a branding perspective, probably (Not that this is a unique brand logo)

From an accessibility to non-english speakers, definitely not.

For the last ~10 years, we've translated it, and seemingly displayed it using font-family: sans-serif;. Out of the 140 locales (Some of which are english variants) only 26 did not translate it.

Here's the full range of translations we currently have, showing the range of meaning conveyed to visitors, in the style used for those years. Note that the first two, the image, followed by the English text, the english text was never shown, only the image when the translation matched the english text.

(edit: Some locales show twice with multiple strings. We accidentally had two different places where it could be translated )

[beafialho]

For the last ~10 years, we've translated it

I definitely agree it is better for non-english speaking users, I wasn't aware those were translated already. Let's keep the translations. Is it possible to use MrsEaves Small Caps in languages with Latin characters and for all others use font-family: serif;?

[iandunn]

MrsEaves Small Caps

What kind of licensing restrictions are there? Have we already purchased it and have a copy somewhere? I see some sites that sell it and others that offer it for free. One of those groups is probably doing something sketchy, but I'm not sure which :)

use MrsEaves Small Caps in languages with Latin characters and for all others use font-family: serif;

I think something like font-family: "MrsEaves Small Caps", serif will do that in modern browsers, but I can test it out. If not, the other solutions I've looked into are kind of hacky/fragile.

[ryelle]

I think something like font-family: "MrsEaves Small Caps", serif will do that in modern browsers

That would only work for the individual characters that exist, if the font is missing some accented characters you'll get a mix of both fonts, which could look awkward. For example, this is font-family: PT Mono, serif;, and PT Mono doesn't support some of the accented vowels, so those letters fall back to serif.

You should be able to use a selector like html[lang="ar"] .global-footer__code_is_poetry {…} to set different fonts, it would just require listing out each different language code.

[iandunn]

use a selector like html[lang="ar"] ... require listing out each different language code

Yeah, that was one of the things that felt hacky to me.

[iandunn]

The font-family: foo, serif seems to work fine for Inter/EB Garamond. Would one of those work for this, or a 3rd font that has better support than MrsEaves?

Another option would be to continue what we did in the past, with font-family: sans-serif;

[beafialho]

The font-family: foo, serif seems to work fine for Inter/EB Garamond. Would one of those work for this, or a 3rd font that has better support than MrsEaves?

I'm not sure if "foo" was a typo or if you meant this font? 😅

It might be ok then to keep the SVG for English and use font-family: serif; as fallback for all others. That way we avoid the hacky workarounds and it should work similarly to the sans-serif, right?

[beafialho]

use font-family: serif; as fallback for all others

I forgot to ask if the solution suggested above would call for the system serif and let the OS provide the right typeface for non-latin faces?

[iandunn]

Er, sorry, foo is just a generic placeholder term programmers use; it could be any font we want.

keep the SVG for English and use font-family: serif; as fallback for all others

👍🏻

it should work similarly to the sans-serif, right?
if the solution suggested above would call for the system serif and let the OS provide the right typeface for non-latin faces?

I think that's correct in both cases, yeah

[iandunn]

This is deployed now