Muhammad Nouman Muhammad Nouman - 2 months ago 19
Javascript Question

Layout adjustments of Multilingual website

Can anyone guide me about the best practice for designing the layout for multilingual page?

The problem I'm facing is that one word has different characters and length in different languages. The webpages work well in English but when language changed to Russian or other language the layout messed up.

As an example below one is in English and it looks ok

enter image description here

But the Russian version of the page has a messed up layout

enter image description here

Answer

I did some search on this and the only way I found is to load the specific .css file based on the language, specially when you have to implement multilingual thing in old website.

So what I did is declared one Literal in html like below in the head tag of an html

<asp:Literal runat="server" ID="Literal1" />

Than in my codebehind on page load I set the literal text to link the specific css file

if (base.User.Language.Equals("Portuguese") || base.User.Language.Equals("Indonesian"))
  {
   Literal1.Text = "<link href='css-files/Portuguese.css' type='text/css' rel='stylesheet'>";

  }
else
  Literal1.Text = "<link href='css-files/default-english.css' type='text/css' rel='stylesheet'>";