One Page Multilingual Website using only CSS and PHP

Question

Given a simple static website with only a homepage and two other pages, each containing text in two langages: English and Dutch. All contents should be held in a single php file per page:

<body>
<menu id="EN">
  <ul>
    <li>About</li>
    <li>Home</li>
  </ul>
</menu>

<menu id="NL">
  <ul>
    <li>Over</li>
    <li>Thuis</li>
  </ul>
</menu>

<article id="EN">
     Goodmorning [...]
</article>

<article id="NL">
     Goedemorgen [...]
</article>
</body>

The default can be English, so upon arrival English content is shown, unless the viewer chooses the Dutch language. Once a user clicks on a language, the system should "remember" that choice sothat further links open in the correct language. How to set this via php/css as simple as possible with a few lines code as possible? If possible at all? This would be the absolute and ultimate alternative and simplest way to have a multilingual website without setting up an entire (database driven dynamic) multilingual framework, way surpassing the modest nature of this wish).

Dont repeat the html in a onefile application. Bind language data to named variables and use them in the html. `$about = $langarray['DE']['ABOUT'];
The rest of your question is to wide to answer. How about google: make a simple multilingual wepage based on cookies and sessions. — JustOnUnderMillions, Apr 06 '17 at 16:19
You can remember the users choise by storing the chosen language in a cookie which can be set to be remembered for a long as you want — SuperDJ, Apr 06 '17 at 16:20

score 2 · Answer 1 · answered Apr 06 '17 at 16:16

2

The question doesn't entirely make sense. If you're using PHP, you're looking to keep track of the user's language on the server side. This is typically done through session variables.

The alternative is to send both languages and use css and javascript to replace the values on the client side depending on which flag is clicked.

answered Apr 06 '17 at 16:16

Michael Arrison

1,464
2
13
22

2

And you could use a [javascript cookie](http://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript#24103596) to remember the user's chosen language across several urls. – Tijmen Apr 06 '17 at 16:23
+1 thanks @Michael Arrison and Tijmen for your take. Well I was aiming at the alternative here Michael ;) But if I understand correctly from your answer, there are actually TWO ways to solve this: Either php sets the cookie and remembers which language must be shown *OR* javascript sets the cookie and remembers which language must be shown. Not both at once, correct? Tijmen that is a great link I will test that out. – Sam Apr 07 '17 at 00:27
@Michael Arrison and Tijmen Am I correct in that the first option (PHP) makes google think the results are two pages that can be saves like `/en/page112` and `/nl/page112` (later to be set via htaccess rewrites) while the javascript option makes google think its one page `/page112' holding two languages thereby possibly annoying and confusing google? – Sam Apr 07 '17 at 00:27
I think the first option is more elegant (php, server side session) than the second option (js, client side session) so I will focus on PHP-only-solution, as constructed in the other two answers. – Sam Apr 07 '17 at 08:05

Christian Carrillo · Answer 2 · 2017-04-07T12:27:57.933

1

First mistake is you cannot repeat id attribute in different elements. I think the most simple without CSS is use $_GET["lang"] param, something like this:

In your first line of PHP put this:

<?php 
   if(isset($_GET["lang"]){
      $lang = $_GET["lang"];
   }else{
      $lang = "NL"; // by default
   }
?>

Dutch

 <?php if ($lang=="NL"){ ?>
<article>
     Goedemorgen [...]
</article>
<?php } ?>

English

 <?php if ($lang=="EN"){ ?>
<article>
     Goodmorning [...]
</article>
<?php } ?>

If you want change language:

<a href="?lang=EN>Website in English</a>

edited Apr 07 '17 at 12:27

answered Apr 06 '17 at 16:19

Christian Carrillo

414
3
8

+! Thanks @Christian Carrillo fot this critic and solution. So even if the selectors are different (article / menu etc still an id must be unique?). I will test this solution but I do have a question: How to initiate / initially load the English version (without having those old welcome screens where a language is chosen by user)? – Sam Apr 07 '17 at 00:18
Thanks @Christian Carrillo for the upgrade! I tested it but dreamweaver says there is a fault in the code, first part with `if(isset(` and page shows nothing. I will delete this comment once code is working. Also I discovered a missing `"` in the url but thats no biggie – Sam Apr 08 '17 at 10:12

Alex · Answer 3 · 2017-04-07T05:03:21.017

1

This is the simplest implementation of multilanguage based on your information. There are a lot of other better solutions.

You first need a language selector

<div class="language-selector">
    <a href="changelanguage.php?lang=en">EN</a>
    <a href="changelanguage.php?lang=nl">NL</a>
</div>

changelanguage.php contents:

<?php
    session_start();
    if(!empty($_GET['lang']) $_SESSION['lang'] = $_GET['lang'];
    header("Location: ".$_SERVER['HTTP_REFERER'])
?>

Every page should contain on the top

<style type="text/css">
#EN, #NL { display:none; }
<?php
    session_start();
    if($_SESSION['lang'] == "EN" || empty($_SESSION['lang'])) echo "#EN { display: block; }";
    if($_SESSION['lang'] == "NL") echo "#NL { display: block; }";
?>
</style>

edited Apr 07 '17 at 05:03

answered Apr 06 '17 at 16:21

Alex

436
4
9

1

+1 Thanks for this constructive solution! I think this is what I meant... However the default language should be already set to English (if no language is set yet) so the language selector should be optional. Can I solve this by simply adding a line directly after sesion_start(); `if(empty($_GET['lang']) $_SESSION['lang'] = "EN";` – Sam Apr 07 '17 at 00:13
1

Thanks for your comment. I edited the code to provide a default language. – Alex Apr 07 '17 at 05:04

One Page Multilingual Website using only CSS and PHP

3 Answers3