Comment faire pour... |
Afficher plein écran |
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 :
<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 :
<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 :
<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.)
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.