Localizing HTML files in XCode

Question

I have a localized iOS application in which I wish to include some localized HTML files. I can't work out how to do it.

Currently, my folder structure looks like this:

/myapp
   /en.lrproj
       /Localizable.strings
   /fr.lrproj
       /Localizable.strings
   /webviews
      /view1
         /index.html
         /pic1.png
      /view2
         /index.html
         /pic2.png

As you can see, I currently have the views organized into their own folders with the associated images.

In XCode, when I selected the Localizable.strings files I can add new localizations. When searching for the solution to this problem I see that other people have done the same for the HTML files, however when I select the HTML files there are no options displayed for localizations, so I'm wondering if the folder structure is the problem.

On the other hand, I don't know how to structure the HTML into language code folders whilst not replicating the graphics that have to be along side.

Clearly I'm not understanding something - what do I need to do to get this working?

Thanks,

Tim

Answer 1

Arrange your index.html right next to the Localized.strings, keep the pics in the web views directory:

/myapp
   /en.lrproj
       /Localizable.strings
       /view1/index.html
       /view2/index.html
   /fr.lrproj
       /Localizable.strings
       /view1/index.html
       /view2/index.html
   /webviews
      /view1
         /pic1.png
      /view2
         /index.html
         /pic2.png 

The build a file path:

NSArray* availableLocalizations = [[NSBundle mainBundle] localizations];    
NSArray* userPrefered = [NSBundle preferredLocalizationsFromArray:availableLocalizations forPreferences:[NSLocale preferredLanguages]];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"view" forLocalization:[userPrefered objectAtIndex:0]];

The picture in the html tree are now similar to

/myapp/en.lrproj/view1/index.html  
/myapp/webviews/view1/pic1.png

Inside your index.html make the <img> tags point to ../../../webview/pic1.png (Not sure about the number of ../'s that you need. You might want to open a terminal, navigate to /myapp/en.lrproj/view1/ and test with ls ../../../webview/pic1.png. )

Answer 2

I assume "webviews/view1/index.html" is English, and "webviews/view2/index.html" is French.

NSString *dir = NSLocalizedString("webviews/view1", @"webdir");
NSString *path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html" inDirectory:dir];

in Localizable.strings of French

/* webdir */
"webviews/view1" = "webviews/view2";

I tested above code using below in a ViewController.

[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];

"webviews" directory should be a "folder reference" in Xcode, not a group. (Blue directory icon, not yellow one)

Also, be careful not to add a slash after the directory name, like "webviews/view2/". I found that this could be a problem when I run that on iOS 5.x(I tested it on 5.0.1 and 5.1.1). But no problem on iOS 6.1.2.