<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/1231218?s=20&v=4" /><strong>1ec5</strong> created an issue <a href="https://github.com/openstreetmap/openstreetmap-website/issues/6319">(openstreetmap/openstreetmap-website#6319)</a></div>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3307863930" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/6313" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/6313/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/6313">#6313</a> modified the language picker so that every language option has the English name below the native name. It’s always in English regardless of the user’s preferred language. This can be a very useful feature: you can easily see what the map looks like in another language like Greek, even if you don’t know that “Ελληνικά” means Greek in Greek. Unfortunately, this feature mostly only benefits users who speak some English. Speakers of other languages will only recognize the words if it’s similar to their own language.</p>
<p dir="auto">Similar to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3168559449" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/6127" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/6127/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/6127">#6127</a>, we could instead display each language’s name in both the native name and the current locale using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames" rel="nofollow"><code class="notranslate">Intl.DisplayNames</code></a>. Different browsers have translations of different language names into different languages, so we’d need to fall back to either the English name or the raw language code:</p>
<div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">displayNames</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Intl</span><span class="pl-kos">.</span><span class="pl-c1">DisplayNames</span><span class="pl-kos">(</span><span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">preferred_languages</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">"language"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s1">displayNames</span><span class="pl-kos">.</span><span class="pl-en">of</span><span class="pl-kos">(</span>:<span class="pl-s1">code</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">displayName</span> <span class="pl-c1">===</span> :<span class="pl-s1">code</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s1">language</span><span class="pl-kos">[</span>:<span class="pl-s1">english_name</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">As discussed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3307863930" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/6313" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/6313/hovercard?comment_id=2268803424&comment_type=review_comment" href="https://github.com/openstreetmap/openstreetmap-website/pull/6313#discussion_r2268803424">#6313 (comment)</a>, in the case where the user lacks a font for the current interface language, they probably will have a font for the language they speak. The dialog would continue to label that language with the native name, which they can still read.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/6319">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPTKHCA6WAVES6BOSL3NKKVVAVCNFSM6AAAAACDYEZ2LWVHI2DSMVQWIX3LMV43ASLTON2WKOZTGMYTMNRUGI3TENY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/6319</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>

<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/6319",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/6319",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>