Accueil

Comment faire pour...

Afficher plein écran

Réaliser un document bilingue

Emmanuel Lazinier

Nous nous proposons de publier sur le Web une version bilingue français-anglais d'une page dont nous possédons déjà une version française.

A titre d'exemple, nous allons partir d'une copie de la page d'accueil de notre rubrique "Comment faire pour..."

Dans un premier temps, nous allons transformer cette page en xml grâce au logiciel Tidy. Voir le fichier XML résultant.

Note. Pour que le fichier résultant soit du XML bien formé, il est nécessaire de remplacer la processing instruction générée par Tidy :

<?xml version="1.0"?>
Par celle-ci (pour que les accents français soient acceptés) :
<?xml version="1.0" encoding="ISO-8859-1"?>
Il convient aussi d'ajouter la déclaration suivante pour traduire les entités &nbsp; (espaces insécables) qui peuvent avoir été générées par l'éditeur HTML de départ et que Tidy ne traduit pas :
<!DOCTYPE HTML [
<!ENTITY nbsp "&#160;"><!--espace insécable-->
]>
A l'aide du moteur de transformation XSLT de MSIE5, nous allons dédoubler tous les constituants de base (paragraphes, images, listes, tableaux...) de notre document HTML de départ et présenter le résultat sous forme d'un tableau à deux colonnes pour l'instant identiques. Voir le résultat. La feuille de style MSXSL utilisée est la suivante :
<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<!-- Feuille de style pour épurer un tableau -->

<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>

<!-- Reproduit tous les noeuds du document -->
<xsl:template match="@* | * | text()">
<xsl:copy>
<xsl:apply-templates select="@* | * | text()"/>
</xsl:copy></xsl:template>

<!-- Duplique tous les éléments suivants-->

<xsl:template match="BODY/P | BODY/H1 | BODY/H2 | BODY/H3 | BODY/H4 | BODY/H5 | BODY/TABLE | BODY/IMG | BODY/OL | BODY/UL | BODY/DIV">
<!-- Crée une table dont l'attribut "CLASS" est le nom de l'élément -->
<TABLE BORDER="1" WIDTH="100%">
<xsl:attribute name="CLASS"><xsl:node-name /></xsl:attribute>
<TR>
<TD LANG="fr">
<!-- Copier les éléments et les attributs -->
<xsl:copy><xsl:apply-templates select="@* | * | text()"/></xsl:copy>
</TD><TD LANG="en">
<!-- Copier les éléments et les attributs -->
<xsl:copy><xsl:apply-templates select="@* | * | text()"/></xsl:copy>
</TD>
</TR>
</TABLE>
</xsl:template>

</xsl:stylesheet>

Nous allons ensuite, manuellement, à l'aide d'un éditeur HTML WYSIWYG classique (par exemple celui de Netscape Communicator), substituer au français de la colonne de droite sa traduction française. Voir le résultat.

Nous allons maintenant retransformer le résultat en XML à l'aide de Tidy. Voir le résultat (après qu'on ait effectué la retouche indiquée dans la note ci-dessus)

Toujours à l'aide du moteur de transformation XSLT de MSIE5, nous allons maintenat supprimer le tableau pour obtenir un fichier XML propre où

(Le résultat est donc conforme à la syntaxe HTML et peut donc éventuellement être lu comme tel dans un butineur.)

La feuille de style utilisée pour cette transformation est la suivante :

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<!-- Feuille de style pour effacer le tableau et transformer le fichier en XML bilingue-->

<xsl:template match="/">
<xsl:pi name="xml">version="1.0" encoding="ISO-8859-1"</xsl:pi>
<xsl:pi name="xml-stylesheet">href="affiche.msxsl" type="text/xsl"</xsl:pi>
<xsl:apply-templates />
</xsl:template>

<!-- Reproduit tous les noeuds du document -->
<xsl:template match="@* | * | text()">
<xsl:copy>
<xsl:apply-templates select="@* | * | text()"/>
</xsl:copy></xsl:template>

<xsl:template match="BODY/TABLE">
<DIV>
<xsl:attribute name="CLASS"><xsl:value-of select="@CLASS" /></xsl:attribute>
<DIV CLASS="en">
<xsl:apply-templates select="TR/TD[@LANG='en']" />
</DIV>
<DIV CLASS="fr">
<xsl:apply-templates select="TR/TD[@LANG='fr']" />
</DIV>
</DIV>
</xsl:template>

<xsl:template match="TD[@LANG]">
<xsl:apply-templates />
</xsl:template>

<!-- éliminer les paragraphes parasites -->
<xsl:template match="BODY/P">
</xsl:template>

</xsl:stylesheet>

Notre fichier XML résultant peut être maintenant visualiser de diverses façons dans un butineur à l'aide de feuiles de style XSL. On peut par exemple utiliser la feuille de style MSXSL suivante :

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<!-- Feuille de style pour afficher un document en version bilingue -->

<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>

<!-- Reproduit tous les noeuds du document -->
<xsl:template match="@* | * | text()">
<xsl:copy>
<xsl:apply-templates select="@* | * | text()"/>
</xsl:copy></xsl:template>

<!-- Insérer style CSS -->
<xsl:template match="HEAD">
<HEAD>
<xsl:apply-templates />
<STYLE TYPE="text/css">
TABLE.bilingual {
width: 100%;
border-style: none;
}

TABLE.bilingual TD {
vertical-align: top;
padding: 15px;
}

TABLE.bilingual TD.fr {
background-color: lightblue;
border-left: thick solid white;
}

TABLE.bilingual TD.en {
width:45%;
background-color: navajowhite;
}
</STYLE>
</HEAD>
</xsl:template>

<xsl:template match="BODY/DIV">
<TABLE CLASS="bilingual" WIDTH="100%">
<TR>
<TD CLASS="en" VALIGN="top">
<xsl:apply-templates select="DIV[@CLASS='en']"/>
</TD>
<TD CLASS="fr" VALIGN="top">
<xsl:apply-templates select="DIV[@CLASS='fr']"/>
</TD>
</TR>
</TABLE>
</xsl:template>

<xsl:template match="DIV[@CLASS='en'] | DIV[@CLASS='fr']">
<xsl:apply-templates />
</xsl:template>
 

</xsl:stylesheet>

Visualiser le fichier XML avec cette feuille de style (MSIE5 requis).

(On peut aussi utiliser la même feuille de style pour générer un "clône" HTML.)

Récapitulation des fichiers de l'exemple :

Il nous reste maintenat à rendre ce fichier bilingue interactif. Mais ceci est une autre histoire...


Contribuez ! Faites-nous profiter de vos scénarios les plus significatifs.

Retour à la page d'accueil.