Les guillemets c'est sémentique ou pas !!!

Bonjour

apres une prise de tête pour afficher des guillements à <blocquote> tout bien réfléchit : y a t il un intéret a faire mettre les quillement par le fauille de style CSS plutot que de taper directement les guillemets.

sémentiquement n'est il pas plus correct de taper directement les " comme une , ou ; ou .

Avec un peu de recul il ne me viendrait pas à l'idée de faire afficher les . et les , en css (on les tapes directement dans le texte).

Alors pourquoi (moi mais aussi une floppé de personne) cherhce t on a les fairer afficher pas les feuille de style ?

La question est comment interprette un lecteur vocal les " (est ce que cela gène la lecture...)


le débat est ouvert (le traitement des guillements en css n'est ce pas sortir l'artillerie lourde pour écraser une mouche).

Et en plus je me demande si sementiquement ca serait pas plus correct de les taper en dur dans le texte...
Modifié par php34000 (04 Mar 2010 - 16:39)

Salut,

Il faut éviter de générer du contenu textuel en CSS, notamment au moyen de la propriété content et des pseudo-éléments :before et :after : les lecteurs d'écran n'en tiennent pas compte.

En revanche, rien ne t'empêche de styliser les guillemets pour les éléments de citation, notamment l'élément q, comme suit :

q {
  quotes: "«\0000a0" "\0000a0»"; /* \0000a0 = espace insécable */
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

Plus d'infos sur la spécification CSS 2.1.

Enfin, les lecteurs d'écran, lorsqu'ils trouvent un élément blockquote ou q, ont la faculté de signaler à la synthèse vocale qu'il s'agit d'une citation.

Bref, l'essentiel est que les citations soient bien balisées comme telles : blockquote pour les gros blocs de citation, q pour les citation pouvant s'insérer dans une phrase.

De mémoire, les guillemets et autres contenus générés en CSS ne peuvent pas être copiés et collés. Ça peut être gênant.

Victor BRITO a écrit :
Salut,

Il faut éviter de générer du contenu textuel en CSS, notamment au moyen de la propriété content et des pseudo-éléments :before et :after : les lecteurs d'écran n'en tiennent pas compte.

En revanche, rien ne t'empêche de styliser les guillemets pour les éléments de citation, notamment l'élément q, comme suit :

q {
  quotes: "«\0000a0" "\0000a0»"; /* \0000a0 = espace insécable */
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

Salut,
IE6/7 ne gérant pas le contenu généré, il vaut mieux insérer les guillemets dans le HTML
et supprimer les quotes générées automatiquements par les autre browsers comme ceci :

q:before, q:after {content:""}

D'autre part les navigateurs Gecko ne parviennent pas encore à afficher les guillemets français (ou une autre langue) selon la langue du document ou la valeur de l'attribut lang déclarée. Quant aux browsers webkit et Opera, ils se contentent de remplacer les guillemets par des double quotes.
Modifié par Hermann (04 Mar 2010 - 19:00)

Hermann a écrit :
D'autre part les navigateurs Gecko ne parviennent pas encore à afficher les guillemets français (ou une autre langue) selon la langue du document ou la valeur de l'attribut lang déclarée. Quant aux browsers webkit et Opera, ils se contentent de remplacer les guillemets par des double quotes.

Je crois que tu fais erreur, comme le montre cet exemple dans Firefox:

Les guillemets sont générés en CSS. La langue de chaque item est déclarée au niveau du LI (en fait déclarée sur l'élément HTML pour le français, et sur les LI pour le passage à l'anglais). Le code CSS, écrit rapidement dans Firebug, ressemble à ce qu'écrit Victor mais en l'appliquant aux éléments A.

Pas testé dans Chrome ou Safari (comment on rajoute une déclaration CSS dans Web Inspector???), mais de mémoire il n'y avait pas les soucis que tu évoques.

En revanche, rien ne t'empêche de styliser les guillemets pour les éléments de citation, notamment l'élément q, comme suit :

c'est contradictoire avec

Il faut éviter de générer du contenu textuel en CSS, notamment au moyen de la propriété content et des pseudo-éléments :before et :after : les lecteurs d'écran n'en tiennent pas compte.

ce n'est pas parceque c'es faisable (facilement pour <q>) qu'il faut forcement l'utiliser...

ma question n'est pas est ce faisable ? mais plutot quelle est la bonne pratique sémentiquement (et par rapport à l'accéssibilité) ?

Victor BRITO a écrit :
Salut,

Il faut éviter de générer du contenu textuel en CSS, notamment au moyen de la propriété content et des pseudo-éléments :before et :after : les lecteurs d'écran n'en tiennent pas compte.

Pour préciser ce qu'écrivait Victor : cela ne s'applique pas au cas des guillemets générés via CSS (sachant que Q ou BLOCKQUOTE doivent obligatoirement être utilisés et que CSS (côté auteur) n'est alors utilisé que pour mettre en forme les guillemets, et non pour les générer).

Après, les gens qui les génèrent avec background-image bien-sûr... Mais bon, si vous cherchez volontairement les ennuis...
Modifié par Laurent Denis (05 Mar 2010 - 10:51)

1°) si j'écris

<q>"Salut"</q>

est ce la bonne méthode plutot que <q>Salut</q>



2° si j'écris

<q>"Salut"</q> 

CSS (côté auteur) n'est alors utilisé que pour mettre en forme les guillemets

je ne peut plus jouer sur l'affichage des guillemets avec le CSS ???
Modifié par php34000 (05 Mar 2010 - 11:20)

Florent V. a écrit :

Je crois que tu fais erreur, comme le montre cet exemple dans Firefox:

Tiens donc. J'utilise FF3.5 sur Windows XP. Cela pourrait varier selon l'OS (et la police utilisée)?

Quoi qu'il en soit, comme IE6/7 ne les génèrent pas, je préfère pour ma part les ajouter dans le HTML.
Modifié par Hermann (05 Mar 2010 - 11:39)

ok mais ma question porte sur ce qu'il faut faire pour une bonne pratique sémentique et accéssibilité (lecteur vocaux) pas si c'est réalisable techniquement ?

Pour ma part, j'aurais tendance à coder comme suit :

<q>Salut&nbsp;!</q>

réservant les guillemets pour des termes à mettre entre guillemets sans pour autant les signaler comme des citations :

<p>La Corée du Nord est une «&nbsp;monarchie&nbsp;» communiste.</p>

et moi :

<p>La Corée du Nord est une <q>«&nbsp;monarchie&nbsp;»</q> communiste.</p>

sémantiquement parcequ'une citation doit etre entre <q> (sauf que la c'est pas vraiment une citation)

mais je reste avec mon problème a savoir s'il faut mettre les guillement dans le code ou dans le CSS lol
Modifié par php34000 (05 Mar 2010 - 12:56)

php34000 a écrit :
et moi :
<p>La Corée du Nord est une <q>«&nbsp;monarchie&nbsp;»</q> communiste.</p>

Oui mais là c'est n'importe quoi, vu qu'il ne s'agit pas d'une citation. Les guillemets ne sont pas réservés aux citations.

php34000 a écrit :
mais je reste avec mon problème a savoir s'il faut mettre les guillement dans le code ou dans le CSS lol

Si tu veux tes guillemets dans IE6 et IE7, c'est simple: tu les mets dans le code.
Autrement, tu as le choix, et je ne suis pas sûr qu'il y ait une «bonne pratique» à ce sujet. Du point de vue de la sémantique, l'utilisation de BLOCKQUOTE ou de Q suffit à indiquer une citation, les guillemets ne sont donc pas nécessaires dans le code HTML. Mais les mettre tout de même dans le code HTML n'est à ma connaissance pas problématique, et permet de contourner certaines limitations techniques (IE6-7, copier-coller dans certains navigateurs, autres?).