enhance(l10n): localize "(en-US)" indicator #10996

caugner · 2024-04-25T09:30:35Z

Summary

(MP-1091)

Problem

Links in other locales that point to the English locale often have a trailing indicator "(en-US)", but this is rather technical and not ideal from a user experience point of view.
Not all links to the English locale have this indicator.

Solution

Replace the hardcoded "(en-US)" indicator by a localized one (e.g. "(angl.)" in French), via CSS.
Use a CSS attribute selector targeting links that start with /en-US/ to catch all (?) occurrences.

(Note: I will add the hreflang attribute in a subsequent PR.)

Screenshots

Locale	Before	After
es
fr
ja
ko
pt-BR
ru
zh-CN
zh-TW

How did you test this change?

Ran yarn dev locally and looked at http://localhost:3000/en-US/docs/Web/API in different locales.

## Approvals

Links in other locales that point to the English locale often have a suffix "(en-US)", but this is rather technical and not ideal from a user experience point of view. This PR replaces the suffix by a localized suffix, added via CSS.

caugner · 2024-04-25T14:25:37Z

@cw118 @mfuji09 @t7yang @lex111 @wisedog @josielrocha @Jalkhov Can you please review the localized suffix in your language (by approving or suggesting a change), and let me know what you think about this change (by giving the PR a 👍 or 👎)? Thank you. 🙌

PS: On a related note, are you all in our Discord in the #localization channel? 👀

leon-win · 2024-04-25T14:43:22Z

OK for ru 👌
But it looks unusual))

caugner · 2024-04-25T14:46:10Z

But it looks unusual

@leon-win Is this because you're used to the (en-US) suffix, or because this is not usual in Russian? The idea behind the change is that not every user is necessarily familiar with ISO language codes, and having "(English)" in the locale instead ensures that every user understands that the link points to English content.

leon-win · 2024-04-25T14:50:43Z

But it looks unusual

@leon-win Is this because you're used to the (en-US) suffix, or because this is not usual in Russian? The idea behind the change is that not every user is necessarily familiar with ISO language codes, and having "(English)" in the locale instead ensures that ever user understands that the link points to English content.

I think because of my subjective habit.
From the point of view of the Russian language, the new version is more correct 👍

cw118

This looks great, thanks very much @caugner! (Pinging @mdn/yari-content-fr for more opinions)

JuanVqz · 2024-04-25T18:07:35Z

client/src/document/index.scss

+}
+
+html[lang="es"] a.only-in-en-us:after {
+  content: "(inglés)";


@Graywolf9 what do you think on this one? I'd like to say the following:

Suggested change

content: "(inglés)";

content: "(Inglés)";

Do you agree? or do you think it is better without the uppercase?

I already checked it, according this resource it shouldn't use uppercase for the first letter. so this is good!

yin1999

According to Chinese grammar (both zh-CN and zh-TW), we will use full-width brackets instead of half-width brackets (we have placed this as a note in zh-tw translation guide and zh-cn translation guide).

Another point I noticed is that the current font size of the Chinese note text does not seem to have enough contrast with the main content text's.

I've opened a discuession in discord, and @Josh-Cena pointed this problem. So I tried comparing three different CSS styles (aligned with baseline, using <percentage> font-size: 80%, and with the current CSS style). The result is shown below:

It seems that the one with font-size: 80% would be better than the default one (rightmost). @jasonren0403 has the same opinion as me.

client/src/document/index.scss

wisedog

LGTM.

@mdn/yari-content-ko Please any suggestions if you have an idea.

JuanVqz

For the ES team looks good! @Graywolf9

Co-authored-by: A1lo <[email protected]>

LeoMcA

Very elegant code, love the use of the attribute selector. Approved from an engineering perspective 👍

caugner · 2024-04-30T11:57:52Z

@mfuji09 (cc @mdn/yari-content-ja) @josielrocha (cc @mdn/yari-content-pt-br) Can you please take a look if these changes look good to you in ja and pt-BR? 🙏

client/src/document/index.scss

Co-authored-by: A1lo <[email protected]>

yin1999

Approving this from l10n-zh team. Thank you @caugner

caugner · 2024-05-02T08:57:08Z

@mfuji09 (cc @mdn/yari-content-ja) @josielrocha (cc @mdn/yari-content-pt-br) Can you please take a look if these changes look good to you in ja and pt-BR? 🙏

Heads-up @mdn/yari-content-ja and @mdn/yari-content-pt-br that this change will land tomorrow, so if you can review the changes before, that would be great.

mfuji09

The indicator for ja looks good!
Sorry too late!

enhance(l10n): localize "(en-US)" suffix

b049b29

Links in other locales that point to the English locale often have a suffix "(en-US)", but this is rather technical and not ideal from a user experience point of view. This PR replaces the suffix by a localized suffix, added via CSS.

github-actions bot added flaw-system issues and feature requests related to the flaws system macros tracking issues related to kumascript macros labels Apr 25, 2024

caugner marked this pull request as ready for review April 25, 2024 14:20

caugner requested a review from a team as a code owner April 25, 2024 14:20

caugner requested review from a team, cw118, mfuji09, t7yang, lex111, wisedog, josielrocha and Jalkhov and removed request for a team April 25, 2024 14:22

leon-win approved these changes Apr 25, 2024

View reviewed changes

cw118 approved these changes Apr 25, 2024

View reviewed changes

JuanVqz reviewed Apr 25, 2024

View reviewed changes

caugner changed the title ~~enhance(l10n): localize "(en-US)" suffix~~ enhance(l10n): localize "(en-US)" indicator Apr 25, 2024

yin1999 reviewed Apr 26, 2024

View reviewed changes

client/src/document/index.scss Outdated Show resolved Hide resolved

client/src/document/index.scss Outdated Show resolved Hide resolved

wisedog approved these changes Apr 26, 2024

View reviewed changes

JuanVqz approved these changes Apr 26, 2024

View reviewed changes

Apply suggestions from code review

3d09bed

Co-authored-by: A1lo <[email protected]>

LeoMcA approved these changes Apr 26, 2024

View reviewed changes

caugner commented Apr 30, 2024

View reviewed changes

client/src/document/index.scss Outdated Show resolved Hide resolved

Update client/src/document/index.scss

d4fc61e

Co-authored-by: A1lo <[email protected]>

yin1999 approved these changes May 1, 2024

View reviewed changes

mfuji09 approved these changes May 2, 2024

View reviewed changes

caugner merged commit be8852c into main May 2, 2024
16 checks passed

caugner deleted the localize-en-us-link-suffix branch May 2, 2024 21:56

github-actions bot mentioned this pull request May 2, 2024

chore(main): release 2.51.0 #11047

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enhance(l10n): localize "(en-US)" indicator #10996

enhance(l10n): localize "(en-US)" indicator #10996

caugner commented Apr 25, 2024 •

edited

Loading

caugner commented Apr 25, 2024

leon-win commented Apr 25, 2024

caugner commented Apr 25, 2024 •

edited

Loading

leon-win commented Apr 25, 2024

cw118 left a comment

JuanVqz Apr 25, 2024

JuanVqz Apr 26, 2024

yin1999 left a comment

wisedog left a comment

JuanVqz left a comment

LeoMcA left a comment

caugner commented Apr 30, 2024

yin1999 left a comment •

edited

Loading

caugner commented May 2, 2024

mfuji09 left a comment

enhance(l10n): localize "(en-US)" indicator #10996

enhance(l10n): localize "(en-US)" indicator #10996

Conversation

caugner commented Apr 25, 2024 • edited Loading

Summary

Problem

Solution

Screenshots

How did you test this change?

caugner commented Apr 25, 2024

leon-win commented Apr 25, 2024

caugner commented Apr 25, 2024 • edited Loading

leon-win commented Apr 25, 2024

cw118 left a comment

Choose a reason for hiding this comment

JuanVqz Apr 25, 2024

Choose a reason for hiding this comment

JuanVqz Apr 26, 2024

Choose a reason for hiding this comment

yin1999 left a comment

Choose a reason for hiding this comment

wisedog left a comment

Choose a reason for hiding this comment

JuanVqz left a comment

Choose a reason for hiding this comment

LeoMcA left a comment

Choose a reason for hiding this comment

caugner commented Apr 30, 2024

yin1999 left a comment • edited Loading

Choose a reason for hiding this comment

caugner commented May 2, 2024

mfuji09 left a comment

Choose a reason for hiding this comment

caugner commented Apr 25, 2024 •

edited

Loading

caugner commented Apr 25, 2024 •

edited

Loading

yin1999 left a comment •

edited

Loading