JDR 6-5 Bilinguisme

Site web de Jacques-Deric Rouault

Jacques-Deric Rouault's web site

INFORMATIQUE

COMPUTER SCIENCES

Fichiers HTML bilingues

Bilingual HTML files

Version bilingue 3.8 du 3 Janvier 2007

Bilingual version 3.8, January 3rd 2007

Retour à la page Informatique / Return to the page Computer science

1 LE PROBLEME

1 THE PROBLEM

La documentation informatique est usuellement écrite en anglais. Cependant, en tant que rédacteur dont le français est la langue maternelle, je trouve dommage que les utilisateurs francophones ne maitrisant pas l'anglais se trouvent exclus de fait.

The documentation in computer science is usually written in English language. However, as a writter which the mother tongue is the French language, I deplore that francophone users who do not master the English language are excluded de facto.

La solution est alors de rédiger une documentation bilingue.

Then, the solution is to write a bilingual documentation.

2 PREMIERE SOLUTION

2 FIRST SOLUTION

Une première solution, communément utilisée, consiste à rédiger des documents HTML séparées, chacun dans une version-langue.

A first solution, usually used, consists in writing sepate HTML documents, each of them in a version-language.

Cette solution présente plusieurs inconvénients :

This solution presents several drawbacks:

1) Cela représente plus de deux fois plus de travail. Il faut développer séparément chacune des versions-langues avec ses liens, plus établir les liens réciproques en miroir entre les fichiers homologues.

1) This represents more than twice more work. Each version-language has to be separately developped with their links, then establish the reciprocal links between the homologous files.

2) A l'usage, on constate qu'il est difficile de faire évoluer en parallèle de façon synchrone deux versions-langues d'un même document.

2) With practice, it appears difficult to advance in a synchronic way two version-languages of a same document.

3 SECONDE SOLUTION

3 SECOND SOLUTION

Une seconde solution, que j'ai jusqu'ici appliquée dans les documents Scilab pas-à-pas, consiste à rédiger un seul document bilingue HTML, avec le texte français en brun et le texte anglais en vert.

A second solution, I previously applied in the Scilab Step-by-step documents, consists in writing one bilingual HTML document, with the french text in brown and the english text in green.

Avantages :

Avantages:

1) Cela représente peu de travail supplémentaire.

1) This represents a few supplementary work.

2) Avoir simultanément les deux versions sous les yeux permet de relever les manques et les contresens liès à la traduction.

2) Having simultaneously the two versions in front of your eyes easiers the founding of lacks or mistranslations.

Inconvénients :

Drawbacks:

1) Certaines personnes supportent mal la lecture de cette présentation atypique.

1) Some persons have problems in reading this atypical presentation.

4 TROISIEME SOLUTION

4 THIRD SOLUTION

Une troisième solution consistait à intégrer des commandes Javascrit dans l'entête du fichier HTML de façon à ne faire apparaitre que les paragraphes rédigés dans l'une au l'autre langue.

A third solution consisted in integrating Javascript commands in the header of the HTML files in order to only make appear paragraphs written in one or other languages.

L'inconvénient est que la langue figurée devait être redéfinie chaque fois qu'on changeait de page.

The drawback is that the language which appear has to be defined again each time a page changes.

5 QUATRIEME SOLUTION

5 FOURTH SOLUTION

5.1 INTRODUCTION

La quatrième solution, considérée comme définitive à ce jour, consiste à définir une feuille de style, deux styles CSS correspondant à chacune des deux langues et à intégrer des commandes Javascript dans l'entete du fichier HTML.

The fourth solution, considered as definitive today, consists in defining a stylesheet, two styles CSS corresponding to each language and in integrating javascript commands in the header of the HTML file.

L'avantage est que le navigateur Internet (Windows explorer, Firefox, ...) mémorise la langue figurée quand on change de page.

The advantage is that the web browsers (Windows explorer, Firefox, ...) memorizes language when a page is changed.

5.2 CONTRAINTES

5.2 CONSTRAINTS

1) Dans chaque répertoire où se trouve un fichier HTML bilingue, on doit trouver les trois fichiers :

1) In each directory where is located a bilingual HTML file, the three files have to be present :

Bilinguisme-en.css
Bilinguisme-fr.css
Bilinguisme-styleswitcher.js

2) Chaque fichier HTML bilingue doit présenter une entête adaptée.

2) Each bilingual HTML file must have a header adaptated.

3) Chaque fichier HTML bilingue doit permettre le changement de langue.

3) Each bilingual HTML file must allow the changing of language.

4) Chaque paragraphe d'un fichier HTML bilingue doit être associé à une langue.

4) Each paragraph of a bilingual HTML file must be associated to a language.

5) Il faut distinguer le répertoire de travail où le texte apparait simultanément dans les deux langues, du répertoire de test où le texte ne sera visualisé que dans l'une des deux langues.

5) We have to distinguish the working directory where the text simultaneously appears in the two languages, from the test directory where the text only appears in one of the two languages.

5.3 LA FEUILLE DE STYLE

5.3 THE STYLESHEET

La feuille de style est décrite dans le fichier Bilinguisme-styleswitcher.js

The stylesheet is described in the file Bilinguisme-styleswitcher.js

// This is the styleswitcher script, for switching between
// alternative stylesheets.
//
// by Paul Sowden <mailto:paul@idontsmoke.co.uk>
// ala article: <http://alistapart.com/stories/alternate/>
// site: <http://idontsmoke.co.uk/2002/ss/>

function setActiveStyleSheet(title) {
    var a;
    for (var i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
            a.disabled = true;
            if (a.getAttribute("title") == title) a.disabled = false;
        }
    }
    if (getActiveStyleSheet() == null) {
        title = getPreferredStyleSheet();
        if (title != null) setActiveStyleSheet(title, true);
    }
    createCookie("style",title, 365);
}

function getActiveStyleSheet() {
    var a;
    for (var i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
    }
    return null;
}

function getPreferredStyleSheet() {
    var a;
    for (var i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) return a.getAttribute("title");
    }
    return null;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    } else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function start(e) {
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
}

function end(e) {
    var title = getActiveStyleSheet();
    createCookie("style", title, 365);
}

if (window.addEventListener) {
    window.addEventListener("load", start, true);
    window.addEventListener("unload", end, true);
} else if (window.attachEvent) {
    window.attachEvent("onload", start);
    window.attachEvent("onunload", end);
}

if (document.getElementsByTagName) {
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
}

Télécharger le fichier Bilinguisme-styleswitcher.js

Download the file Bilinguisme-styleswitcher.js

5.4 LE STYLE FRANCAIS

5.4 THE FRENCH STYLE

Le style français est décrit dans le fichier Bilinguisme-fr.css. Il en existe deux versions :

The french style is described in the file Bilinguisme-fr.css. There are two versions:

La version Bilinguisme-fr-t.css (837 octets) du style français visualise uniquement le français et doit figurer dans le répertoire de test.

The version Bilinguisme-fr-t.css (837 bytes) of the french style only displays the french language and has to be located in the test directory

/* =====================================================
File : Bilinguisme-fr-t.css
Author : Pierre MARECHAL
Last Update : 28 february 2006

Stylesheet for french display
=====================================================*/

/* Balises B */
b.fr {display: inline; color: rgb(102,0,0);}
b.en {display:none; }

/* Balises I */
i.fr {display: inline; color: rgb(102,0,0);}
i.en {display:none; }

/* Balises SPAN */
span.fr {display: inline; color: rgb(102,0,0);}
span.en {display:none; }

/* Balises DIV */
div.fr {display: block; color: rgb(102,0,0);}
div.en {display:none; }

/* Balises P */
p.fr {display: block;color: rgb(102,0,0);}
p.en {display:none; }

/* Balises TABLE */
table.fr {display: block; color: rgb(102,0,0);}
table.en {display:none; }

Télécharger le fichier Bilinguisme-fr-t.css

Download the file Bilinguisme-fr-t.css

Transférer le fichier Bilinguisme-fr-t.css (837 octets) dans le répertoire de test, puis le renommer Bilinguisme-fr.css.

Tranfer the file Bilinguisme-fr-t.css (837 bytes) into the test directory, then rename it Bilinguisme-fr.css.

La version Bilinguisme-fr-w.css (934 octets) du style français visualise le français et l'anglais et doit figurer dans le répertoire de travail.

The version Bilinguisme-fr-w.css (934 bytes) of the french style displays French and English languages and has to be located in the working directory.

/* =====================================================
File : Bilinguisme-fr-w.css
Author : Pierre MARECHAL
Last Update : 28 february 2006

Stylesheet for francais+english display
=====================================================*/

/* Balises B */
b.en {display: inline; color: rgb(0,102,0);}
b.fr {display: inline; color: rgb(102,0,0);}

/* Balises I */
i.en {display: inline; color: rgb(0,102,0);}
i.fr {display: inline; color: rgb(102,0,0);}

/* Balises SPAN */
span.en {display: inline; color: rgb(0,102,0);}
span.fr {display: inline; color: rgb(102,0,0);}

/* Balises DIV */
div.en {display: block; color: rgb(0,102,0);}
div.fr {display: block; color: rgb(102,0,0);}

/* Balises P */
p.en {display: block; color: rgb(0,102,0);}
p.fr {display: block; color: rgb(102,0,0);}

/* Balises TABLE */
table.en {display: block; color: rgb(0,102,0);}
table.fr {display: block; color: rgb(102,0,0);}

Télécharger le fichier Bilinguisme-fr-w.css

Download the file Bilinguisme-fr-w.css

Transférer le Bilinguisme-fr-w.css (934 octets) dans le répertoire de travail, puis le renommer Bilinguisme-fr.css.

Tranfer the file Bilinguisme-fr-w.css (934 bytes) into the working directory, then rename it Bilinguisme-fr.css.

.5 LE STYLE ANGLAIS

5.5 THE ENGLISH STYLE

Le style anglais est décrit dans le fichier Bilinguisme-en.css. Il en existe deux versions :

The english style is described in the file Bilinguisme-en.css. There are two versions:

La version Bilinguisme-en-t.css (838 octets) du style anglais visualise uniquement l'anglais et doit figurer dans le répertoire de test.

The version Bilinguisme-en-t.css (838 bytes) of the english style only displays the english language and has to be located in the test directory

/* =====================================================
File : Bilinguisme-en-t.css
Author : Pierre MARECHAL
Last Update : 28 february 2006

Stylesheet for english display
=====================================================*/

/* Balises B */
b.en {display: inline; color: rgb(0,102,0);}
b.fr {display: none; }

/* Balises I */
i.en {display: inline; color: rgb(0,102,0);}
i.fr {display: none; }

/* Balises SPAN */
span.en {display: inline; color: rgb(0,102,0);}
span.fr {display: none; }

/* Balises DIV */
div.en {display: block; color: rgb(0,102,0);}
div.fr {display: none; }

/* Balises P */
p.en {display: block; color: rgb(0,102,0);}
p.fr {display :none; }

/* Balises TABLE */
table.en {display: block;color: rgb(0,102,0);}
table.fr { display: none; }

Télécharger le fichier Bilinguisme-en-t.css

Download the file Bilinguisme-en-t.css

Transférer le fichier Bilinguisme-en-t.css (838 octets) dans le répertoire de test, puis le renommer Bilinguisme-en.css.

Tranfer the file Bilinguisme-en-t.css (838 bytes) into the test directory, then rename it Bilinguisme-en.css.

La version Bilinguisme-en-w.css (930 octets) du style anglais visualise le français et l'anglais et doit figurer dans le répertoire de travail.

The version Bilinguisme-en-w.css (930 bytes) of the english style displays French and English languages and has to be located in the working directory.

/* =====================================================
File : Bilinguisme-en-w.css
Author : Pierre MARECHAL
Last Update : 28 february 2006

Stylesheet for english+french display
=====================================================*/

/* Balises B */
b.en {display: inline; color: rgb(0,102,0);}
b.fr {display: inline; color: rgb(102,0,0);}

/* Balises I */
i.en {display: inline; color: rgb(0,102,0);}
i.fr {display: inline; color: rgb(102,0,0);}

/* Balises SPAN */
span.en {display: inline; color: rgb(0,102,0);}
span.fr {display: inline; color: rgb(102,0,0);}

/* Balises DIV */
div.en {display: block; color: rgb(0,102,0);}
div.fr {display: block; color: rgb(102,0,0);}

/* Balises P */
p.en {display: block; color: rgb(0,102,0);}
p.fr {display: block; color: rgb(102,0,0);}

/* Balises TABLE */
table.en {display: block; color: rgb(0,102,0);}
table.fr {display: block; color: rgb(102,0,0);}

Télécharger le fichier Bilinguisme-en-w.css

Download the file Bilinguisme-en-w.css

Transférer le Bilinguisme-en-w.css (930 octets) dans le répertoire de travail, puis le renommer Bilinguisme-en.css.

Tranfer the file Bilinguisme-en-w.css (930 bytes) into the working directory, then rename it Bilinguisme-en.css.

5.6 L'ENTETE DU FICHIER HTML

5.6 THE HEADER OF THE HTML FILE

Chaque fichier HTML bilingue doit avoir la section suivante dans son entete :

Each bilingual HTML file must have the following section in its header:

5.7 CHANGEMENT DE LANGUE

5.7 CHANGING THE LANGUAGE

La section suivante permet de changer la langue d'un fichier HTML bilingue :

The following section allows the language changing in a bilingual HTML file:

      <dl id="menu">
        <a href="#"
onclick="setActiveStyleSheet('français'); return false;"><span
style="font-size: large; text-decoration: none; text-align: center; color: rgb(102, 0, 0);">Français</span></a>
      </dl>

      <dl id="menu">
        <a href="#"
onclick="setActiveStyleSheet('english'); return false;"
title="Retour au style par défaut"><span
style="font-size: large; text-decoration: none; text-align: center; color: rgb(0, 102, 0);">English</span></a>
      </dl>

5.8 EXEMPLE

5.8 EXAMPLE

Ce texte est en lui-même un exemple de fichier HTML bilingue.

This text is itself an example of a bilingual HTML file.

6 REMERCIEMENTS

6 ACKNOWLEDGEMENTS

Source http://www.alistapart.com/articles/alternate/

Ce texte, dont je ne suis que le rédacteur, résulte d'un véritable travail d'équipe. Je voudrais plus particulièrement remercier Laurent Gomez, Fabrice Leray, Pierre Maréchal, Hugues Perdereau, Serge Steer, dont l'union des efforts a permis d'arriver à une solution satisfaisante.

This text, which I am only the writer, results from a true team work. I particularly thanks Laurent Gomez, Fabrice Leray, Pierre Maréchal, Hugues Perdereau, Serge Steer, the union of their efforts allowed to reach a satisfying solution.

Page crée le 3 janvier 2007
Version bilingue 3.8 du 3 Janvier 2007

Contact / Signaler un problème / Communiquer des informations jacquesderic@wanadoo.fr