Sprachumschalter: Flaggen-Emojis durch Globus-Symbol + Klarnamen ersetzt

Windows rendert Flaggen-Emojis nicht als Bild, sondern zeigt den nackten
Regions-Code an (z.B. "DE") — zusammen mit dem eigenen Kürzel ergab das
eine unschöne Dopplung ("DE DE") bzw. bei Englisch sogar einen falschen
Ländercode (🇬🇧 = GB, nicht EN). Jetzt: einzelnes 🌐-Symbol im Knopf,
volle Sprachnamen im Dropdown (Deutsch, Deutsch (Schweiz), English,
Français, Português) - eindeutig auf jedem Betriebssystem.
This commit is contained in:
2026-08-02 00:35:23 +02:00
parent 3acb920541
commit dae0537e1e
2 changed files with 14 additions and 8 deletions
+1 -1
View File
@@ -195,7 +195,7 @@ header.site-header {
Kürzel pro Zeile), rechtsbündig statt zentriert, damit er nicht über
den Seitenrand hinausragt. */
.sprach-schalter > button { font-size: 1.02rem; }
.sprach-schalter .nav-dropdown { min-width: 130px; left: auto; right: 0; transform: none; }
.sprach-schalter .nav-dropdown { min-width: 175px; left: auto; right: 0; transform: none; }
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .5rem; }
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
+13 -7
View File
@@ -27,12 +27,18 @@
die Seite erhalten. Ein komplett neuer Besuch (keine Speicherung)
startet immer auf Deutsch — nie automatische Browsersprache-Erkennung.
=================================================================== */
/* Bewusst KEINE Flaggen-Emojis: Windows rendert Flaggen-Emojis
grundsätzlich nicht als Bild, sondern als nackten Buchstaben-Code
(z.B. "DE") — zusammen mit dem eigenen Kürzel wäre das "DE DE",
"GB EN" (Flagge≠Sprachcode bei Englisch) usw. Ein einzelnes
Globus-Symbol im Knopf plus volle Sprachnamen im Dropdown ist
eindeutig und funktioniert auf jedem Betriebssystem gleich. */
const SPRACHEN = [
{ code: "de", flagge: "🇩🇪", kurz: "DE" },
{ code: "de-CH", flagge: "🇨🇭", kurz: "CH" },
{ code: "en", flagge: "🇬🇧", kurz: "EN" },
{ code: "fr", flagge: "🇫🇷", kurz: "FR" },
{ code: "pt", flagge: "🇵🇹", kurz: "PT" },
{ code: "de", kurz: "DE", name: "Deutsch" },
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)" },
{ code: "en", kurz: "EN", name: "English" },
{ code: "fr", kurz: "FR", name: "Français" },
{ code: "pt", kurz: "PT", name: "Português" },
];
const SPRACHE_SCHLUESSEL = "dogi-sprache";
@@ -246,11 +252,11 @@
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
return `
<div class="nav-group sprach-schalter">
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">${aktiv.flagge} ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">🌐 ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
<div class="nav-dropdown">
${SPRACHEN.map(
(s) =>
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.flagge} ${s.kurz}</a>`
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.name}</a>`
).join("")}
</div>
</div>`;