28172 sujets

CSS et mise en forme, CSS3

[Résolu] Modifier le style des citations "q"

Bonjour à tous,

Après moultes recherches (et après avoir trouver plusieurs solutions... que je n'ai jamais réussi à faire fonctionner !) je m'en remets à vous, membres d'Alsacréations - grands manitous du XHTML et CSS !

Après cette introduction percutante (mais un peu nulle, je le conçois), je vais (enfin) pouvoir vous exposer mon problème... Mais je vous préviens tout de suite, ce n'est pas d'une importance absolument primordiale, c'est juste que je suis assez maniaque.

Donc, lorsque l'on insère une citation avec la balise q, le navigateurs insère automatiquement des guillemets anglais ("). Or, sur mon site (ou blog, pour être précis), je préfère utiliser la langue de Molière - désolé pour les "Shakespeariens" -, celle-ci étant ma langue maternelle. C'est ainsi que j'aimerais remplacer ces guillemets anglais ("), par des guillemets français - des chevrons - (« et »).

Donc la question que je vous pose aujourd'hui est : Comment remplacer les guillemets anglais par des guillemets français dans une citation q ?

En espérant que quelqu'un, dans nos contrées d'AlsaCréations, aura LA solution pour me permettre de mieux dormir cette nuit - et ce, jusqu'à la fin de mes jours !

Merci d'avance. Smiley cligne

Flavien
Modifié par Flavieng (13 Apr 2009 - 18:58)
Hello,

ça ne fonctionnera pas avec tous les navigateurs mais cet article devrait t'intéresser. Smiley cligne

Un petit test (à faire dans Firefox par exemple) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
/* Spécifie des paires de guillemets sur deux niveaux et pour deux langues */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(fr) { quotes: "«\00A0" "\00A0»" "-\00A0" "\00A0-" }

/* Insère des guillemets avant et après le contenu d'un élément Q */
q:before { content: open-quote }
q:after  { content: close-quote }
</style>
</head>
<body>
<p><q>Quote me!</q></p>
<p><q lang="en">Quote me!</q></p>
</body>
</html>

Modifié par Heyoan (13 Apr 2009 - 16:27)
re-Bonjour !

Tout d'abord, merci pour votre aide rapide.

J'avais déjà essayé cette astuce, mais je suis sous Safari, et elle ne marche pas sur ce navigateur. Mais je viens juste d'essayer avec FireFox, et l'astuce fonctionne !

Donc je pense que je ne vais tout simplement pas utiliser la balise q, je m'en passerai sans trop de problème...

Merci encore !


Flavien
Flavieng a écrit :
J'avais déjà essayé cette astuce, mais je suis sous Safari, et elle ne marche pas sur ce navigateur.
J'ai Safari 3.2.1 et effectivement q:lang n'est pas reconnu. Par contre la version simplifiée fonctionne :
q:before { content: "«\00A0" }
q:after  { content: "\00A0»" }

Flavieng a écrit :
Donc je pense que je ne vais tout simplement pas utiliser la balise q, je m'en passerai sans trop de problème...
Drôle de phrase... à priori on utilise telle ou telle balise en fonction de sa sémantique et pas pour des questions de rendu visuel. Smiley smile


Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
re-re-Bonsoir !

Merci beaucoup, Heyoan, votre astuce m'a permis de résoudre mon problème !!

Pour mon affirmation :
a écrit :
Donc je pense que je ne vais tout simplement pas utiliser la balise "q", je m'en passerai sans trop de problème...

Je m'explique : quand j'écris un article, il est vrai que habituellement, lorsque j'insère une citation dans mon texte, je ne la mets pas en "q" (car j'ai appris sa véritable utilité que ce matin). Donc, si j'ai tenu plusieurs années sans l'utiliser, je pourrais m'en passer plus longtemps (même si je sais que ce n'est pas génial - sémantiquement parlant) ; mais puisqu'elle est à ma disposition (et qu'elle correspond désormais à ce que je veux), je vais maintenant l'utiliser.

Et MAINTENANT que mon problème est résolu (ce qui n'était pas le cas avant), je vais l'indiquer. Mais ne mettons pas la charrue avant les voeux !

Bonne soirée !


Flavien
Bonjour,

Pour ma part, j'utilise Q pour les citations, mais je place les guillemets moi-même. Cela permet notamment de conserver les guillemets lors de la copie du texte.

Donc cela donne:
q {
    font-style: italic;
    quotes: none; /* Supprime les guillemets automatiques */
}

<q>«Texte de la citation»</q>
Les italiques ne sont pas obligatoires, c'est juste un exemple. Smiley cligne
Bonsoir !

Je ferais comme vous, Florent V., si mon navigateur comprenait "quotes: none;", ce qui n'est pas le cas !

Bonne soirée.


Flavien
J'ai repris le code de heyoan, avec un peu de javascript pour compenser les faiblesses d'IE 6/7 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css" media="screen">

q:before { content: "«&#8197;"}

q:after  { content: "&#8197;»" }

q q:before { content: "\0022&#8197;"}

q q:after { content: "&#8197;\0022" }

q[lang=en]:before { content: "\0022" }
q[lang=en]:after { content: "\0022" }

</style>

</head>

<body>

<p><q>Citez- <q>moi</q>!</q></p>

<p><q lang="en">Quote me!</q></p>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--[if lte IE 7]>
<script type="text/javascript" charset="utf-8">
	$(document).ready( function () {
		$("q").before("«&#8197;");
		$("q").after("&#8197;»");
	});
	
</script>
<![endif]-->
</body>

</html>


Bon le &#8197; c'est en fait le quart de cadratin qui été converti en entité par le forum… Smiley cligne
Modifié par Patidou (13 Apr 2009 - 20:43)
Flavieng a écrit :
si mon navigateur comprenait "quotes: none;"

Quel navigateur ne le comprend pas?
Flavieng a écrit :
@Florent V. : Safari, d'après mes constatations.


Je confirme, pas testé dans la version beta 4 Smiley cligne
Patidou a écrit :
Je confirme, pas testé dans la version beta 4 Smiley cligne


Safari 4 (béta) ne le comprend pas non plus !
Lien interessant je n'ai pas eu le temps de tester, mais c'est à essayer Smiley cligne

Cdt,
Sylvain
Edith :
Le code ci-dessous semble fonctionner :
(testé sous Safari béta 4, firefox 3.1b3, IE8 )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
		q {	
			font-style: italic;
			quotes: none;
		}
		/*Safari doesn't support the quotes attribute, so we do this instead.*/
		blockquote:before, blockquote:after, q:before, q:after {	
		/*	CSS 2; used to remove quotes in case "none" fails below.*/	
			content: "";	
		/*	CSS 2.1; will remove quotes if supported, and override the above.	
		User-agents that don't understand "none" should ignore it, and	keep the above value. 
		This is here for future compatibility,	though I'm not 100% convinced that it's a good idea...	
		*/	
			content: none;
		}
	</style>
</head>
	<body>
		<p>
			<q>«Quote me!»</q>
		</p>
	</body>
</html>

Modifié par 6l20 (13 Apr 2009 - 22:35)
Alors en réalité, dans les outils que j'avais préparé pour Komodo Edit, et notamment dans la feuille de styles de base qui a inspiré cette astuce, j'avais effectivement un q:before, q:after {content: "";} pour Safari.

Je ne sais plus pourquoi je l'ai supprimé. Pourtant j'avais bien dû faire des tests avant de le faire? (/me perplexe).

Edit: paf, c'est remis. J'avais dû supprimer le q:before, q:after {content: "";} après lecture de l'article d'Eric Meyer, où la remarque sur quotes:none est erronée.
Modifié par Florent V. (14 Apr 2009 - 00:32)
Sujet clos
Aller à