[Résolu malheureusement] Mise en forme pour balise <q>

Salut,

Je souhaite utiliser l'élément <q></q> dans mes textes. Ceci représentant une citation en ligne (comprise dans une phrase par exemple). Le problème c'est que Firefox retranscrit de lui-même ces balises par deux guillemets anglais “ ”, or j'utilise des guillemets français dans mes textes « ». Ce qui me donne

a écrit :
j'explique quelque chose “« je cite pour appuyer mon argumentation»” et me retrouve avec deux sortes de guillemets!

Je n'ai testé qu'avec Firefox2 et IE7. J'ai ce problème avec FF, IE quant à lui ne fait rien.

Alors comment insérer une citation dans une phrase en utilisant <q></q>? L'italique est aussi une forme de citation en typographie, mais je tiens à utiliser les guillemets. Et accessoirement, ne tiens pas à garder les guillemets anglais.

Merci par avance,

bbp.
Modifié par bbp (22 Oct 2007 - 16:49)

Bonjour,

Tu peux annuler ce style par défaut pour repréciser manuellement une autre forme.

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

koala64 a écrit :
Salut,

En passant par blockquote plutôt que q, non ?

Pour une courte citation au sein d'une phrase il vaut mieux utiliser <q> ou <cite>

Yorick, ben voilà, j'allais le dire

Benjamin D.C., je n'y avais pas pensé, je n'utilise jamais ces pseudo-classes car je ne sais pas si elles sont bien prises en charge par les navigateur. Le saurais-tu?

Par contre petit bémol, si ce que tu m'a proposé fonctionne

q:before{content:"«"}
q:after{content:"»"}

me retourne des points d'interrogation pour FF et rien pour IE. Mais c'est déjà bien. C'est dommage, ça aurait été parfait si j'avais pu insérer directement les guillemets français.

Merci à vous, je ne mets pas résolu au cas où il y aurait une autre solution qui par miracle intégrerait directement les guillemets français.

Tu peux passer par de l'unicode:

q:before {content:"\00AB";}
q:after {content:"\00BB";}

bbp a écrit :
Benjamin D.C., je n'y avais pas pensé, je n'utilise jamais ces pseudo-classes car je ne sais pas si elles sont bien prises en charge par les navigateur. Le saurais-tu?

Les navigateurs qui génèrent des guillemets en style par défaut des éléments q utilisent les pseudo-classes :before et :after pour cela, justement! Quand à ceux qui ne comprennent pas :before et :after (Internet Explorer...), ils ne génèrent pas de guillemets autour éléments q. CQFD.

bbp a écrit :
je ne sais pas si elles sont bien prises en charge par les navigateur. Le saurais-tu?

Seul Internet Explorer (version 7 comprise) n'implémente pas ces pseudos-classes. Il existe des solutions pour pallier à cette lacune dans IE, notamment en passant par JavaScript. Il y a eu un article d'A List Apart à ce sujet je pense.


edit: grillé…
Modifié par Benjamin D.C. (22 Oct 2007 - 16:01)

Benjamin D.C. a écrit :
Tu peux passer par de l'unicode:

q:before {content:"\00AB";}
q:after {content:"\00BB";}

Ou bien encoder la page dans un encodage précis, et déclarer cet encodage en tête de fichier (@charset "UTF-8";) et dans les en-têtes HTTP envoyés avec la feuille de styles.

bbp a écrit :
Merci à vous, je ne mets pas résolu au cas où il y aurait une autre solution qui par miracle intégrerait directement les guillemets français.

Ben voilà, tu peux mettre résolu. Sauf que... quid du rendu dans Internet Explorer (pas de :before ou :after, donc pas de guillemets automatiques)? Et quid du copier-coller de texte (les guillemets automatiques ne sont pas copiés)?

Sinon, une petite subtilité sur les guillemets générés en CSS: on peut utiliser la propriété CSS quotes:
http://www.w3.org/TR/CSS21/generate.html#quotes-specify

Yorick a écrit :
Pour une courte citation au sein d'une phrase il vaut mieux utiliser <q> ou <cite> smile

erf, exact... J'avais omis le fait que la citation était en ligne...

Mais sans passer par Javascript, on peut faire ça :

<q cite="http://www.sitesource.org"><!--[if IE]>«<![ endif]-->patatiti<!--[if IE]>»<![ endif]--></q>

C'est moche et un peu too much mais bon, ça marche aussi sur IE et c'est plus solide...

bbp a écrit :
me retourne des points d'interrogation pour FF...

problème d'encodage. Si celui-ci est juste, ça passe, comme l'a dit Florent.

Merci pour vos réponses, c'est très intéressant. Concernant ce lien http://www.w3.org/TR/CSS21/generate.html#quotes-specify j'étais dessus à l'instant, mais j'obtiens le même rendu.

Le fait de passer par l'unicode (\00AB et \00BB) fonctionne. Cela aussi fonctionne

q:lang(fr) { quotes: "\00AB" "\00BB" '"' '"' }

si on déclare bien le document en français. C'était donc un manque de connaissance de ma part et un problème dû à l'unicode.

Par contre, le fait qu'IE ne prenne pas en compte ces pseudo-classes implique que tout ce raisonnement, en définitive, ne sert à rien. Puisque je serai obligé de saisir les guillemets à la main à cause d'IE, sinon mes citations seront illisibles.

bbp a écrit :
Par contre, le fait qu'IE ne prenne pas en compte ces pseudo-classes implique que tout ce raisonnement, en définitive, ne sert à rien. Puisque je serai obligé de saisir les guillemets à la main à cause d'IE, sinon mes citations seront illisibles.

Bah, ça fait un peu de culture générale, et maintenant que tu connais bien le mécanisme des guillemets automatiques tu peux l'annuler pour éviter d'avoir des guillemets en trop avec Firefox/Opera/Safari/etc.

q:before, q:after {content: none;}

Ah ben oui, c'est ce que j'en ai déduis, si je puis dire étant donné que c'est la première solution proposé par Benjamin D.C..

Merci à vous tous, ce fut intéressant et instructif.

Bonjour,

koala64 a écrit :
erf, exact... J'avais omis le fait que la citation était en ligne...

Mais sans passer par Javascript, on peut faire ça :

<q cite="http://www.sitesource.org"><!--[if IE]>«<![ endif]-->patatiti<!--[if IE]>»<![ endif]--></q>

C'est moche et un peu too much mais bon, ça marche aussi sur IE et c'est plus solide...

problème d'encodage. Si celui-ci est juste, ça passe, comme l'a dit Florent.

C'est bien joli tout ça, mais quand j'utilise cette méthode, en passant par saxon pour extraire mon contenu XHTML (lequel se trouve dans un fichier XML), il ne respecte plus les espaces insécables... vu que je me retrouve avec des séparateurs venus de je ne sais trop où... (parsing de saxon probablement)
Et je ne peux pas non plus utiliser la méthode qui consiste à annuler via CSS les quotes tels que supposés être implémentés selon les W3C (et qui passent bien dans Firefox par exemple), car il s'agit d'un site multilingue, où selon la langue le symbole doit idéalement changer, en fonction du niveau de profondeur des citations (et tout hardcoder juste parce que monsieur IE est (presque) une m* finie, c'est loin d'être l'idée que je me fais d'un site "W3C compliant" utilisant XHTML et CSS bien comme il faut).

Merci pour vos lumières,

MetalGearLiquid

PS : Je précise que je suis hélas encore loin de maîtriser tous les outils en question (sans pour autant être complètement nul, sans quoi je me serais contenté de faire à l'ancienne façon, c'est-à-dire avec d'horribles balises <FONT> avec la garantie de faire un site peu accessible aux malvoyants, etc.), qu'aller lire les normes et pages de référence, je le fais régulièrement, mais qu'hélas c'est insuffisant pour systématiquement afficher le résultat voulu (à cause de certaines incohérences de Firefox, et surtout de Internet Explorer).
Modifié par MetalGearLiquid (10 Dec 2007 - 16:53)

Bonjour,

Poster une demande d'information dans un sujet indiqué comme [Résolu], ça n'est pas le plus sûr moyen d'obtenir une réponse.

Pour le problème en question:
- soit tu places les guillemets dans le contenu directement (<q>«Ma citation en français»</q>, et on annule l'ajout de guillemets via CSS);
- soit tu ne places pas les guillemets dans le contenu, et tu les génère en CSS, et tant pis pour IE;
- soit tu gardes cette deuxième solution, et tu tentes de palier aux lacunes d'IE via un script Javascript rajoutant les guillemets (mais un tel script serait une usine à gaz si on veut gérer la question de la langue, celle des niveaux de citation, etc.).

En l'heure actuelle, je recommanderais de choisir entre les deux premières solutions. Pour ma part, j'opterais plutôt pour la première.

Pas de solution idéale, donc.

Merci Florent V. pour ta (votre ?) prompte réponse.

Disons que j'ai préféré poster ici plutôt que créer un nouveau sujet (il faut bien dire aussi que "[Résolu]" =/= au sens strict "[Résolu malheureusement]" ), surtout que je faisais référence à des choses déjà dites (et faire un quote d'un fil à l'autre, ce n'est pas toujours apprécié sur les forums/fora).

Je pense également que ta première proposition est la plus sage (même si pas la plus agreéable intellectuellement)... on voit mal comment justifier qu'environ 80% des visiteurs perdraient les guillemets sous prétexte que leur browser respecte mal les standards... donc jusqu'au triophe écrasant de Firefox ou autres plus respectueux des standards (ou que IE les respectent mieux), c'est un peu au webmaster de se débrouiller pour que le visiteur dispose d'un contenu qui ne perdre pas en sémantique.

Bien à toi,

MetalGearLiquid