WkWebView and language

1

I have this crazy idea to make one of my apps multilingual. But I have no clue if this is even possible in WebView.
Does anyone have experience in doing so?

2

It's not a crazy idea. Here's the multilingual template…

Here's a video…

While I haven't tried recently, I suspect that would work in a WebView. So, theoretically, you have three options…

  • No language detection — User manually changes the language. (Apple might reject that though.) Then, the user preference could be saved with Local Storage.
  • Browser based language detection — That's JavaScript… navigator.language
  • App based language detection — Use Swift to get the language, then feed that info to the WKWebView
2 Likes
3

Thanks. I’m gonna give it a try. Looks promising.

1 Like
4

In general, I'd say that there are three different approaches to localizing Hype documents:

  1. Separate .hype documents for each localization

    • pros: documents are smaller, simpler solution, can change element layout per localization as much as you need
    • cons: you still need some controlling document where locale is decided, you have to change all documents when there's any change you want to make

  2. Separate scenes for each localization within one document

    • pros: working with just one document, can reuse unlocalized content via symbols
    • cons: file size/loading size is bigger, you either need to change all scenes when there's a change you want or be really smart about how you use symbols for unlocalized content

  3. Same scene for all localizations, replacing strings dynamically via javascript

    • pros: working with just one document, document is small, you only need to change things once
    • cons: you have to store localizations somewhere, your elements need to make sure they can properly fit all localizations since you can't do different layouts, images can be a bit trickier to work with, previewing is sometimes hard

#3 is the approach that @Photics template takes. It is generally what I strive to use out of the gate, but not appropriate in all circumstances.

There's also other examples in the forums when searching for localization/translation.

1 Like
5

I tried the template from @Photics . This is what I need at the moment. Problem is that I have more scenes and need class instead of id. I haven’t figured out yet how to make that work.

6 
element.classList.contains("classname")
7

Thank you. This seems to work. But I can't use the same element ID's of the other buttons when using a second layout. Also there is this error when using: element.classList.contains("Message").innerHTML = "Browser Language: " + nl;

Error in undefined: TypeError: null is not an object (evaluating 'hypeDocument.getElementById(data[i][0]).innerHTML = data[i][index]')

8

So instead of using IDs, you could use class names or data-attributes to change a group of elements.

9

Yes, I’ve done that. But the problem seems to be the ‘getElementById(data…….

10

Here's a related video…

…which shows querySelectorAll used to select elements by the same class name. You could also select elements by a specific data attribute.

1 Like
11

Got it working. Not with 45 lines of code, but I’m satisfied.

1 Like