28172 sujets

CSS et mise en forme, CSS3

Dialogues en français et en CSS

Bonjour,

Voici ce que je veux faire :

« Bonjour, comment allez-vous ?
– Bonjour. Très bien, et vous ?
Très bien, merci. »

(tiret cadratin et espace insécable)

Voici le code que j'ai composé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Dialogue de Q</title>
    <style type="text/css">
    #dialogue                          {list-style:none}
    #dialogue q                        {quotes : '« ' ' »' "'" "'"}
    #dialogue li:first-child q:before  {content:open-quote}
    #dialogue li:first-child q:after   {content:no-close-quote}
    #dialogue li:before q              {content:no-open-quote}
    #dialogue li:after q               {content:no-close-quote}
    #dialogue li:last-child q:before   {content:no-open-quote}
    #dialogue li:last-child q:after    {content:close-quote}
    </style>

</head>

<body>
<ul id="dialogue">
  <li><q>Bonjour, comment allez-vous&thinsp;?</q></li>
  <li><q>Bonjour. Très bien, et vous&thinsp;?<q></li>
  <li><q>Très bien, merci.</q></li>
</ul>
</body>
</html>


Opera 10 me donne un résultat presque parfait. Firefox 3.5 donne du gros n'importe quoi.

J'aurais tendance à penser qu'Opera à raison (sa réputation pour le respect des standards n'est plus à faire). Cependant, je ne sais toujours pas comment intégrer le tiret cadratin. En effet, la spécification CSS n'inclut pas les guillemets de début de continuité (ici, le tiret cadratin). Je pensais m'en sortir avec

#dialogue li:before q              {content:"&#8211; "}


Mais ça ne fonctionne pas.

Que faire ?

Question subsidiaire : j'ai l'impression que la seule raison pour laquelle on s'embête avec les valeurs de 
quote
, on lieu de simplement mettre du 
content:"bla"
, c'est la guestion de citations imbriquées. Me trompé-je ?

Merci
Hello David,

je dirais que FF s'en sortirait mieux en fermant bien la seconde citation avec </q> plutôt qu'avec <q> Smiley cligne
David Latapie a écrit :
j'ai l'impression que la seule raison pour laquelle on s'embête avec les valeurs de 
quote
, on lieu de simplement mettre du 
content:"bla"
, c'est la guestion de citations imbriquées. Me trompé-je ?
Je suppose qu'il faut remplacer "on lieu de" par "au lieu de"... mais je ne comprends toujours pas la question... Smiley hmm
Merci de tes remarques. Je n'arrive pas à trouver le bouton pour éditer les messages.

Pour le code, maintenant que je ne suis malheureusement plus sur Mac, je n'ai plus mon brave BBEdit avec son valdateur intégré (toujours imité, jamais égalé), donc je valide rarement en ligne.

Ceci étant dit, le comportement reste imparfait même avec la balise correctement fermée
bonjour,

pour inserer des caracteres speciaux au travers de la regle content , il faut se servir de leur code hexadecimal.

je te propose cette correction avec \2014 ou \2012 (pas sur quelle passe partout OS/navigateurs ) :
    #dialogue                          {list-style:none;} 
    #dialogue q                        {quotes : '« ' ' »' "'" "'"} 
    #dialogue li:first-child q:before  {content:open-quote;} 
    #dialogue li:first-child q:after   {content:no-close-quote} 
    #dialogue li q:before              {content:no-open-quote'\2012';padding-right:0.5em;} 
    #dialogue li q:after               {content:no-close-quote} 
    #dialogue li:last-child q:before {content:no-open-quote'\2012';} 
    #dialogue li:last-child q:after    {content:close-quote;}

sinon , tout simplement inserer le tiret comme un signe 'négatif ' 
    #dialogue                          {list-style:none;} 
    #dialogue q                        {quotes : '« ' ' »' "'" "'"} 
    #dialogue li:first-child q:before  {content:open-quote;} 
    #dialogue li:first-child q:after   {content:no-close-quote} 
    #dialogue li q:before              {content:no-open-quote'-';padding-right:0.5em;} 
    #dialogue li q:after               {content:no-close-quote} 
    #dialogue li:last-child q:before {content:no-open-quote'-';} 
    #dialogue li:last-child q:after    {content:close-quote;}


<edit> un lien utile pour retrouver le code d'un caractere : http://slayeroffice.com/tools/unicode_lookup/ </edit>
Modifié par gc-nomade (07 Dec 2009 - 01:08)
Sujet clos
Aller à