Skip to content

Make a language switcher for the site #428

@DeeDeeG

Description

@DeeDeeG

Hi all,

In discussions about how best to show users the various languages we will have available, now that we are getting translations merged in, it was mentioned that a language switcher has advantages over purely automatic system. [1]

Basically, a user may be automatically detected as needing one locale, but they may prefer or be better suited by using a different locale. The language switcher allows them to pick the best language (of the ones we have) that suits their needs.

Technical plan

Language Selection Logic

I think our current logic for determining the locale to use should be expanded upon.

It currently just does this: "Check the user's accept-language HTTP headers", then "If we have one of those languages, or even their exact lang-REG locale, serve it." -- "Otherwise, serve the en locale."

I propose we add a step, right at the beginning:

"Read the 'lang' parameter of the URL", then "If we have that locale, serve it", otherwise fall back to the previously described system.

(The other major option seems to be using different lang subdomains, e.g. es.refugerestrooms.org, zh.refugerestrooms.org.) [2]

The switcher itself -- Setting the "lang=" parameter of the URL

This means we have to add the switcher, in a way that can set the language parameter of the URL. We also need a way to persist or carry-over that language parameter of the URL when navigating to other sub-pages of the site.

Since the language switcher interface should always be visible, I propose we should add it in the footer. (We can make the switcher its own _partial.html.haml and render it in that way.)

I expect all the code for this would be either pure Ruby, or a mix of Ruby and JavaScript. JavaScript code can be embedded in Ruby code, so if it's mixed, I think the code would all be in a .rb file.

We can then evaluate this from the .html.haml file with = _lang_switcher, or something along those lines.

User Interface

(Proposing a 'language' drop-down menu near the bottom (or top?) of the page. We can make it look nice with a flag image next to each locale, and format it with CSS, when the time comes.

But anything that works and looks nice or has a good user-experience is welcome as a suggestion.)

Open to discussion, and particularly if this sounds like a good plan, we may get going on an implementation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    HacktoberfestThese are issues or pull requests related to Hacktoberfest (https://hacktoberfest.digitalocean.com/)help wantedtranslations

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions