« Le langage HTML/Internationalisation » : différence entre les versions

(→‎Exemple de feuille de style différenciant la langue : Décryptage de la feuile de style)
L'exemple suivant est une feuille de style (écrite en CSS) dans laquelle la mise en page d'un paragraphe dépend de la langue.
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
[lang|="fr"] >> * { quotes: '\00ab\00a0' '\00a0\00bb'; } {{rouge|/*}} guillemets de citation pour tout le document {{rouge|*/}}
p:lang(fr) {
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
[lang|="en"] >> * { quotes: '\2018' '\2019' '\201c' '\201d'; } {{rouge|/*}} guillemets de citation pour tout le document, 2 niveaux de citation {{rouge|*/}}
[lang|="en-GBUS"] >> * { quotes: '\2018201c' '\2019201d' '\201c2018' '\201d2019'; } {{rouge|/*}} 2différents en GB niveauxet deaux citationUS {{rouge|*/}}
[lang|=en-US] > * { quotes: '\201c' '\201d' '\2018' '\2019'; } {{rouge|/*}} différents en GB et aux US {{rouge|*/}}
p:lang(en) {
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
{{vert|<style}} type="text/css"{{vert|>}}
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
[lang|="fr"] >> * { quotes: "«\00a0" "\00a0»"; } {{rouge|/*}} guillemets de citation pour tout le document {{rouge|*/}}
p:lang(fr) {
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
[lang|="en"] >> * { quotes: "‘" "’" "“" "”"; } {{rouge|/*}} guillemets de citation pour tout le document, 2 niveaux de citation {{rouge|*/}}
[lang|="en-GBUS"] >> * { quotes: "" "" "" ""; } {{rouge|/*}} 2différents en GB niveauxet deaux citationUS {{rouge|*/}}
[lang|=en-US] > * { quotes: "“" "”" "‘" "’"; } {{rouge|/*}} différents en GB et aux US {{rouge|*/}}
p:lang(en) {
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
: Comme on a défini la page de code dans l'en-tête du fichier HTML, on peut utiliser les guillemets « en clair » (caractères non-ASCII) dans la feuille de style intégrée.
----
 
=== Décryptage de la feuile de style ===
 
Le CSS possède son propre wikilivre. Toutefois, afin que cela ne soit pas juste du copier-coller et que vous puissiez modifier l'exemple sans lire tout le wikilivre ''[[Programmatin CSS]]'', voici quelques éléments.
 
Dans l'expression « <code>[lang|="en"] &gt; * {…}</code> » :
* <code>[lang|="en"]</code> signifie « les éléments dont l'attribut est « <code>lang="en"</code> » » ;
* <code>&gt; *</code> désigne tous les éléments (<code>*</code>) situés en-dessous (<code>&gt;</code>) de l'élément pré-cité, donc tous les sous-éléments de l'élément ayant pour attribut « <code>lang="en</code> ».
L'expression « <code>[lang|="en"]</code> » désigne aussi les éléments ayant les attributs dérivés de <code>en</code>, notamment <code>en-GB</code>.
 
L'expression « <code>p:lang(en)</code> » désigne les paragraphes (éléments introduits par la balise <code>&lt;p …&gt;</code>) dont l'attribut <code>lang</code> est <code>"en"</code>.
 
La propriété <code>quote</code> indique les guillemets utilisés, sous la forme « "''guillemet ouvrant''" "''guillemet fermant''" ». Lorsqu'il y a deux paires de délimiteurs, la première paire correspond aux citations de premier niveau, la seconde paire aux citations de deuxième niveau (citation dans la citation).
 
Les autres éléments sont assez explicite en anglais.
 
{{loupe|Programmation CSS/Les sélecteurs#Autres pseudo-classes}}
13 668

modifications