28172 sujets

CSS et mise en forme, CSS3

Comment spécifier 2 langues sur une page

Bonjour,

Dans une page ma balise langue contient :
<meta http-equiv="Content-Language" content="fr">

De temps en temps, j'ai un texte en anglais que j'indique :
<td class="text-eng"><span lang="en">Playing on the beach</span></td>

Comment puis-je remplacer cette balise span dans mon fichier CSS ?
En rajoutant un :lang(en) comme ci-dessous ?
.text-eng {
    color: #0C4B7B;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    [b]:lang(en);[/b]
}


Merci d'avance
Modifié par Rackham (20 Nov 2010 - 17:39)
Bonjour,

Alors pour commencer tu indiques la langue de traitement de la page au niveau de l'élément racine:
<html lang="fr">


Ensuite, quand tu as un contenu qui n'est pas en français, tu utilises l'attribut lang pour indiquer la langue de traitement de ce contenu. Tu peux placer l'attribut lang sur un élément qui existe déjà s'il délimite le texte dont la langue diffère de la langue de traitement courante, ou bien tu peux rajouter un élément SPAN (c'est fait pour ça).
<blockquote>
  <p>
    Ça va plus du tout. J’ai plus envie de boire ni de manger. J’ai plus envie de me peigner.
    J’suis limite <span lang="en">nervous breakdown</span>.
  </p>
<blockquote>

<p>
  <cite lang="en">Blade Runner</cite> est une adaptation du roman
  <cite lang="en">Do Androids Dream of Electric Sheep?</cite> de Philip K. Dick.
</p>


Ensuite, si tu veux styler le texte dans une langue précise en CSS, il y a plusieurs options:
- utiliser un sélecteur d'attribut;
- utiliser la pseudo-classe :lang().
[lang="en"] {border: 1px solid red;}
:lang(en) {border: 1px solid red;}

Le deuxième sélecteur est plus puissant car il s'applique à tous les éléments dont la langue est "en", et pas uniquement les éléments qui portent un attribut lang avec la valeur "en".

Pour finir, quid de l'en-tête HTTP Content-Language (que tu déclares dans le code HTML avec la balise META équivalente)?
- Content-Language représente la langue primaire du contenu. C'est en quelque sorte la langue du public visé (ici un public francophone). C'est surtout une information pour les outils d'indexation.
- L'attribut lang représente la langue de traitement du contenu sur lequel il s'applique. C'est une information plus fine, sémantique, destinée par exemple aux synthèses vocales (qui doivent savoir quelle langue elles lisent) ou aux outils de traduction automatique.

On pourra lire sur Openweb: Spécifier la langue d’un document (X)HTML.

Edit: message repris et complété dans une astuce publiée à l'instant.
Modifié par Florent V. (21 Nov 2010 - 00:51)
Bonjour Florent et merci de ta réponse bien instructive.

- Je viens de voir que je n'ai jamais indiqué la langue de traitement de la page au niveau de l'élément racine, c'est maintenant chose faite. Je n'utilisais auparavant que la balise Meta Content-Language.

- Effectivement dans de nombreuses pages, sous des photos, j'ai un court texte en français et en anglais, mais la majorité des pages du site sont en français, j'ai donc commencé à utiliser : 
<span lang="en">cool breakdown</span>

Mais j'ai cherché comment l'intégrer dans ma feuille de style externe, d'où ma question.

Je ne comprends pas trop la différence entre : 
[lang="en"]
et 
:lang(en)

En tout état de cause faut-il différencier obligatoirement les textes de différentes langues dans une page ? Cela sert pour l'accessibilité mais cela sert-il aussi au référencement des pages ?

Encore merci.
Rackham a écrit :
En tout état de cause faut-il différencier obligatoirement les textes de différentes langues dans une page ?

Faut-il obligatoirement écrire un code HTML sémantique? Non, personne ne t'y oblige. Smiley smile

Rackham a écrit :
Cela sert pour l'accessibilité

Oui.

Rackham a écrit :
mais cela sert-il aussi au référencement des pages ?

Non, pas spécialement.
Dans l'absolu ça pourrait, mais comme la majorité des sites n'utilise pas correctement les informations de langue (attributs lang ou en-tête HTTP Content-Language), les moteurs de recherche utilisent plutôt une analyse lexicale pour détecter la langue du contenu.

Rackham a écrit :
Je ne comprends pas trop la différence entre :
[lang="en"]
et
:lang(en)

Le premier sélectionne tout élément qui a un attribut lang avec la valeur "en".
Le deuxième sélectionne tout élément dont la langue est "en", en sachant que cette valeur de langue peut (et est généralement) héritée d'un élément parent ou ancêtre.

Voir le code suivant:
<div lang="en">
  <h3>This is a title</h3>
  <p>Here is some teaser text.</p>
</div>

[lang=en] va sélectionner le DIV, et c'est tout.
:lang(en) va sélectionner le DIV, le H3 et le P.
Modifié par Florent V. (21 Nov 2010 - 16:09)
Sujet clos
Aller à