/    Sign up×
Community /Pin to ProfileBookmark

Simple HTML site internationalization with Apache RewritRule

Copy linkTweet thisAlerts:
Mar 28.2014

Hi everyone!

I made a simple HTML site (single index.html page) with two buttons to switch between languages (IT<->EN). Italian index.html is in it subfolder, english index.html is in en subfolder. The buttons modify the URL by replacing /en/ with /it/ and viceversa, allowing to switch between the pages. Everything works fine in locale. Good.

On the server, I have this folder tree

[CODE]root (www.mysite.com)
.htaccess (rules for rewriting)
public_html
index.html (a blank page)
it
index.html
en
index.html[/CODE]

Accessing [url]www.mysite.com[/url] I get the blank index, as expected. Adding RewriteEngine On on the .htaccess and accessing [url]www.mysite.com/public_html/it/index.html[/url], I access the italian index and the language switch button works fine (in /en/index.html it works, too). Fine.

What I want is that:

[LIST=1]

  • [*]

    [url]www.mysite.com[/url] goes to italian index automatically, without displaying the complete url ([url]www.mysite.com/public_html/it/index.html[/url]) but just the root ([url]www.mysite.com[/url]) or at least the url without “public_html” ([url]www.mysite.com/it/index.html[/url])


  • [*]

    the language switching buttons must work


  • [*]

    • [/LIST]

    I managed to get point 1, so I go to italian index with URL that is just [url]www.mysite.com[/url], by adding this to .htaccess:

    [CODE]RewriteRule public_html/index.html public_html/it/index.html[/CODE]

    The proble is that with this the buttons won’t work correctly (I suppose the problem is that there isn’t actually any /it/ in the URL to switch with /en/). So I think I need a more “sophisticated” RewriteRule.

    Can anyone help me?

    Many thanks!

    MIX

    to post a comment
    HTML

    6 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @Sup3rkirbyMar 28.2014 — Perhaps sharing your button switching code would help us resolve your issue? As far as what you say you want, your rewrite rule should be fine. But since switching between languages doesn't appear to work that would be the best place to start looking for a solution.
    Copy linkTweet thisAlerts:
    @jedaisoulMar 29.2014 — I do not understand why you need to play around with htaccess to achieve this? It would seem much simpler to me to:

    1. Put the default (italian) menu in root/index.html.

    2. Put an anchor (or input button) in index.html to call root/index-en.html.

    3. Put a corresponding anchor (or input button) in index-en.html to call root/index.html.

    Simple.
    Copy linkTweet thisAlerts:
    @il_mixauthorApr 01.2014 — @Sup3rkirby

    Indeed, it can be useful. Here is the code
    [CODE] <a href="#" onclick="var url=window.location.href; url=url.replace('/en/','/it/'); window.location.href =url;">Italiano </a>
    <a href="#" onclick="var url=window.location.href; url=url.replace('/it/','/en/'); window.location.href =url;">English</a>
    [/CODE]

    @jedaisoul

    This can do the trick, but is going to be a mess when new pages are added. Whit the rewrite I can use always te same code for all the pages.
    Copy linkTweet thisAlerts:
    @Sup3rkirbyApr 01.2014 — Honestly I would have agreed with [B]jadaisoul[/B] at least to some extent. I do feel this is a lot of complication for something that should be simple. But ultimately how you handle this is up to you and whatever you feel will make your work easier.

    To the point, you already identified that the buttons don't work because they are trying to replace part of the URL that doesn't exist (due to your rewrite rule). I'm not a fan of putting lots of javascript directly in the [I][B]onclick[/B][/I] event attributes so I'll write this as a function. You basically just need a default case to switch to the English site (given the Italian site should always be the default version).
    [CODE]
    function _SwitchLanguage() {
    var $url = window.location.href;
    if($url.indexOf("/en/") == -1 && $url.indexOf("/it/") == -1) $url = window.location.protocol + "://" + window.location.host + "/it" + window.location.pathname;
    $url = ($url.indexOf("/it/") >= 0) ? $url.replace("/it/", "/en/") : $url.replace("/en/", "/it/");
    window.location.href = $url;
    }
    [/CODE]

    This is designed to check if the language is already in the URL. If not it will update the [B]$url[/B] variable to include [B]/it/[/B] (by default), properly inserting it into the URL (just after the domain). Then it just uses a conditional variable where it checks if the site is the English or Italian version and replaces accordingly.
    Copy linkTweet thisAlerts:
    @daamdaamApr 01.2014 — URL rewriting sucks. Be cleverer about it. I worked on a site that was built using the rewrite rule too much... URLs broke really easily due to casing or just being invalid.

    Just my 2 cents..
    Copy linkTweet thisAlerts:
    @jedaisoulApr 01.2014 — 
    @jedaisoul

    This can do the trick, but is going to be a mess when new pages are added. Whit the rewrite I can use always te same code for all the pages.[/QUOTE]
    How is that so??? The pages are written in different languages, so have to be written and maintained separately anyway!

    Furthermore, for a multi-page site, I would (and do) use PHP include files for all the common elements, header, footer, nav bar etc... That leaves only the content unique to each page, which, as I said, is going to need to be written and maintained separately anyway.
    ×

    Success!

    Help @il_mix spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.22,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...