stati18n v0.2

stati18n is a tool to manage static pages internationalization. It is based on content property of CSS, creating CSS data files. To change language a basic script simply change css included file.

Politic stop Nervous BreakDom. Only one Dom line change (css include).

Why it's cool

For static site
No applicative server need (you can host your site on github)
You can change language without refresh
Optimized page size : The data is downloaded only on use, with auto-loading of CSS file
Optimized request number
No heavy javascript compute

News :

Only one DOM line change on click : the CSS class is always the same, we only change CSS include line (better performance)
Generalisation of CSS auto-loading
Automatic detection of browser language
Add title tag management
Add input value management
Choose between CSS before and after property in your XML file
Cookie management
Code refactoring
Auto-loading of CSS file on click
Rewrite PHP script in Python

Todo :

SEO managment : Google index js and css, but what about SEO performance ?
Graphic tool to create everything

demo : http://k-yak.github.io/one_page_presentation/

How It Works

STEP 1 :

Edit XML file to store your data.

<?xml version='1.0' encoding='UTF-8'?>
<stati18n>

	<host>
		<name>CONTAIN URL OF YOUR SITE</name>
	</host>

    <file>
        <name>stati18n</name>
        <minified>false</minified>
    </file>

    <language>
	
        <text id='title'>
            <translation lang='fr' fix='true'>Stati18n titre</translation>
            <translation lang='en' fix='true'>Stati18n title</translation>
            <translation lang='es' fix='true'>Stati18n título</translation>
        </text>
		
        <text id='input'>
            <translation lang='fr' fix='true'>Stati18n entrée</translation>
            <translation lang='en' fix='true'>Stati18n input</translation>
            <translation lang='es' fix='true'>Stati18n input</translation>
        </text>
	
        <text id='hello-world' insertion='before'>
            <translation lang='fr'>Démonstration de Stati18n</translation>
            <translation lang='en'>Stati18n demonstration</translation>
            <translation lang='es'>Stati18n demostración</translation>
        </text>

        <text id='message'>
            <translation lang='fr'>Salut salut</translation>
            <translation lang='en'>Hello hello</translation>
            <translation lang='es'>Hi hi</translation>
        </text>

    </language>
</stati18n>

Properties :

fix : if true the value is added in the Dom can be useful for title tag or input .
- Possibilities : 'true' or 'false', default : 'false'. WARNING : prefer false for performance.
insertion : choose the CSS property.
- Possibilities : 'before' or 'after', default : 'after'.

STEP 2 :

Compile XML file to create CSS file which content all your data

python stati18n.py stati18n.xml

The CSS file look like that (non-minified)

 /*!
 * Generated by Stati18n v0.2
 * stati18n.css
 * Created by Florian Rotagnon
 * Licensed under MIT
 */
 
.stati18n.s18n-english:after {
    content: "Anglais";
}

.stati18n.s18n-french:after {
    content: "Français";
}

STEP 3 :

Add to your html file

<link rel="stylesheet" href="stati18n.css">
<!-- Default language : hightly recommended -->
<link rel="stylesheet" href="stati18n-en.css">
<script src="jquery-1.11.0.min.js"></script>
<script src="stati18n.js"></script>

Use language switcher with class : "stati18n-language-selector" and value="language"

<div class="stati18n-language-selector" value="english">English</div>
<div class="stati18n-language-selector" value="french">French</div>

And use it like that:

Simple text

In your XML all your texts are marked with an id (example : <text id='your-id'>). To add it in your HTML just add a class formed like that 's18n-your-id'

<div class="stati18n s18n-english"></div>

Title tag

To use i18n in title tag, do not forget to set fix="true" in XML file.

<title class="s18n-title">default title</title>

Input tag

To use i18n in input tag, do not forget to set fix="true" in XML file.