Touch here to switch to espanol every. single. time.

December 13, 2011 10:22 AM

Is it possible to detect a smartphone user's language settings and serve them web content in their chosen language?

I work at a museum and we use QR codes mounted on the walls to provide more information about the artwork. Each QR code links to a lightweight webpage with supplemental images, text about the artist or the context that the artwork addresses. The pages are currently simple html with a shared external css file for styling.

We're in a bilingual community and try to provide as much of our materials in both English and Spanish as we can.

Since these pages are being viewed by smartphones, is there a way to use some simple javascript to detect the language setting of the phone and display text in the appropriate language?

posted by Uncle Ira to Computers & Internet (6 answers total)

Best answer: Apache can serve different content based on the values in the Accept-Language header that a browser will send into the server when it makes a request. What's your server?
posted by mkb at 10:27 AM on December 13, 2011

Response by poster: We're on a shared hosting plan. Our account is running on Apache 2.2.21.

I'm not very well-versed in Apache. Is this close to what you're thinking about?
posted by Uncle Ira at 10:36 AM on December 13, 2011

Are you just serving flat text files or are you using some kind of CMS like wordpress?
posted by empath at 10:49 AM on December 13, 2011

Uncle Ira, your link is exactly it. If you don't want to play with Apache, there are various ways that can attempt to pick up that header in JS - here's two examples.

Another option would be to have an "English Language" and a "Spanish Language" QR code at the entrance to your museum and just save that value with a cookie.

Either way, you may also want to have a way for patrons to switch between languages on each page, perhaps with a small link in the footer.
posted by Nonsteroidal Anti-Inflammatory Drug at 11:13 AM on December 13, 2011

Response by poster: We're using flat text.

So, can I use php code to pull the value from the Accept_language header (Thanks for that, mkb. I never would have found that page without knowing the proper term.), and use that to show the correct language with div IDs and style.display? And include a bit of onclick code in the page so the patron can switch languages if they need to?

Please pardon me if these are the wrong questions to ask. I'm still pretty new at PHP and Javascript and trying to teach myself as I go.
posted by Uncle Ira at 12:50 PM on December 13, 2011

Best answer: Here's a test page you can play with.

Here's the source

<script>
document.write(navigator.language);
</script>

<pre>
<?php
print_r($_SERVER);
?>
</pre>

Here are some results - first 2 columns are on my iPhone in English and Spanish. Use the variable navigator.language in JavaScript and $_SERVER['HTTP_ACCEPT_LANGUAGE'] in PHP.

Here are some of my results:

                                  Safari iOS5/En   Safari iOS5/Es  Win7/Firefox8   Win7/Chrome15    Win7/IE9
navigator.language                en-us            es-es           en-US           en-US            undefined
$_SERVER['HTTP_ACCEPT_LANGUAGE']  en-es            es-es           en-us,en;q=0.5  en-US,en;q=0.8   en-US

You'll need to test with mobile devices out there and see what they provide. The fact that IE provides undefined for navigator.language for me makes me worry Win7 devices may have the same problem.

The first two characters of $_SERVER['HTTP_ACCEPT_LANGUAGE'], lowercased, seems like something you can redirect with.

You probably want to have nice links at the bottom of each page to bail out of Spanish and go to English and vice versa if this breaks.

You might also find new Google recommendations for multilingual content useful.
posted by artlung at 1:39 PM on December 13, 2011 [1 favorite]