Sourcer une citation en HTML5 - commentaires Sourcer une citation en HTML5 2014-01-30T14:21:05Z http://romy.tetue.net/blockquote-cite-html5#forum5679 2014-01-30T14:21:05Z <p>Bonjour,<br class="manualbr" />Comme tu dis l'auteur n'est pas forcément tout le temps la source et du coup il vaut mieux éviter de le mettre dans une balise <code><cite></code>. Pour moi la dernière est très intéressante :</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="html"><code><blockquote> <p>On ne naît pas femme : on le devient… C'est l'ensemble de la civilisation qui élabore ce produit intermédiaire entre le mâle et le castrat qu'on qualifie de féminin.</p> <footer>Simone de Beauvoir, extrait du <cite>Deuxième Sexe</cite>, 1949</footer> </blockquote></code></pre></div> Sourcer une citation en HTML5 2013-11-05T17:22:13Z http://romy.tetue.net/blockquote-cite-html5#forum5419 2013-11-05T17:22:13Z <p>J'ai vu ça hier (merci clochix), contente de voir admis l'usage de <code><footer></code>, qui me semble être le plus logique, sémantiquement.</p> <p>Pour répondre à Emmanuel, ça donnerait, par exemple :</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="html"><code><blockquote> <p>« Un jour de l'an passé, sur le pont des Arts, quelqu'un de mes confrères de l'Institut se plaignit devant moi de l'ennui de vieillir. “C'est encore, lui répondit Sainte-Beuve, le seul moyen qu'on ait trouvé de vivre longtemps.” J'ai usé de ce moyen, et je sais ce qu'il vaut. »</p> <footer class="toto">Anatole FRANCE, <cite>le Crime de Sylvestre Bonnard</cite>.</footer> </blockquote></code></pre></div> <p>Le balisage (avec <code><q></code>) pour marquer la citation dans la citation est généralement peu utile, dans le sens où insister sur le changement de locuteur est rarement d'un réel apport sémantique. L'auteur reste ici Anatole France, qui fait parler un personnage, certes réel, mais dans une œuvre romanesque. Un guillemetage imbriqué, typographiquement correct, me semble suffisant. Rappelons que les guillemets ne sont pas obligatoires sur la citation dans <code><blockquote></code>, mais possibles. J'aime bien les ajouter, toujours dans l'idée que cela reste compréhensible en l'absence de rendu CSS approprié (ce qui est le cas de certains lecteurs).</p> <p>Pour la source, sans tiret donc, mieux vaut appuyer le rendu stylistique sur un sélecteur CSS (ici <code>.toto</code>), comme suggéré par Stéphane, ce qui a pour avantage de fonctionner autant en vieux HTML, sur <code><small></code> par exemple, qu'en HTML5, sur <code><footer></code> donc. Reste à trouver comment nommer ce sélecteur : <code>.source</code>, <code>.cite</code> ou <code>.footer</code> ?</p> Sourcer une citation en HTML5 2013-11-04T20:11:49Z http://romy.tetue.net/blockquote-cite-html5#forum5415 2013-11-04T20:11:49Z <p>Une évolution notable des éléments <code><blocquote></code> et <code><cite></code> est proposée dans HTML 5.1, qui semble aller dans le sens que tu proposes, avec en plus la possibilité d'indiquer le nom de l'auteur, ou une URL, ou une référence dans la balise <code><cite></code> : <a href="http://html5doctor.com/cite-and-blockquote-reloaded/" class="external" hreflang="en" rel="external">cite and blockquote – reloaded</a>, HTML5 Doctor.</p> Sourcer une citation en HTML5 2013-10-23T15:55:14Z http://romy.tetue.net/blockquote-cite-html5#forum5396 2013-10-23T15:55:14Z <p>> « — » ou pas ?</p> <p>M'en allais faire un billet sur le point… Vais voir…</p> <p>À lire (avec délectation) la version livre papier de <cite><a href="http://www.orthotypographie.fr/" class="external" rel="external">Orthotypographie</a></cite>. Je note d'une part que c'est le tiret demi-cadratin qui est utilisé et non le cadratin, et d'autre part qu'il n'est présent que pour séparer la <a href="http://www.orthotypographie.fr/volume-I/cabochon-citation.html#Citation" class="external" rel="external">citation</a> de l'auteur & titre que lorsque ceux-ci sont en ligne. Lorsque l'auteur & titre sont à la ligne (ou comme dans une <a href="http://www.orthotypographie.fr/volume-I/echelle-extrait.html#Epigraphe" class="external" rel="external">épigraphe</a>), le tiret n'est pas présent, car inutile pour effectuer la distinction je présume.</p> <p>Et une colle pour toi Romy : quid de la citation dans la citation ? :-)</p> Sourcer une citation en HTML5 2013-09-19T17:35:32Z http://romy.tetue.net/blockquote-cite-html5#forum5367 2013-09-19T17:35:32Z <p>Pas bête l'ajout via CSS, je vais tenter dans mes slides que je maîtrise totalement pour voir ce que ça donne !</p> Sourcer une citation en HTML5 2013-09-19T17:19:09Z http://romy.tetue.net/blockquote-cite-html5#forum5366 2013-09-19T17:19:09Z <p>« que la notion de source », nos lecteurs auront vu que je balbutie d'eux-mêmes. ;)</p> Sourcer une citation en HTML5 2013-09-19T17:18:27Z http://romy.tetue.net/blockquote-cite-html5#forum5365 2013-09-19T17:18:27Z <blockquote class="spip"> <p>Autant je suis d'accord avec l'argument et l'approche pragmatique, autant je ne comprends pas l'exemple que tu donnes : en quoi serait-il plus simple de générer/contribuer un <code><p class="source"></code> qu'un <code><footer></code> ou autre ?</p> </blockquote> <p>Mettons que j'aie tapé vite ? :)</p> <p>Effectivement ce qui m'intéressait plutôt c'est le <code>.source</code> davantage que la balise qu'on y met. Le <code>.cite</code> me parle moins, personnellement, parce qu'il m'évoque davantage <code><cite></code> que la notion de source de situation — mais bon c'est sans doute une question de goût, je te laisse juge.</p> Sourcer une citation en HTML5 2013-09-19T17:00:55Z http://romy.tetue.net/blockquote-cite-html5#forum5364 2013-09-19T17:00:55Z <p>Bonne question :)</p> <p>J'utilise le « — » par pragmatisme, c'est-à-dire : à défaut de rendu stylistique et/ou en l'absence d'élément HTML approprié (qui sait comment sera balisé ce site dans X ans ?), j'aurais au moins un signe démarquant la source. Ça n'est gênant que si la citation est un dialogue, où les changements de locuteur se signalent par un tiret cadratin.</p> <p><a href="http://foundation.zurb.com/docs/components/type.html#blockquotes" class="external" hreflang="en" rel="external">Foundation 3</a> ajoute semblable tiret via CSS : <code>blockquote cite:before { content: "\2014 \0020"; }</code>. C'est très mignon, mais doublement critiquable : d'une part ça ne s'adapte pas à tous les contenus, au risque de dédoubler le tiret qui serait déjà présent dans la page (comme dans mon cas d'usage, qui n'est pas excentrique), et d'autre part ça s'appuie sur l'élément <code><cite></code> qui, on l'a vu plus haut, ne sert plus strictement à cela .</p> Sourcer une citation en HTML5 2013-09-19T16:37:38Z http://romy.tetue.net/blockquote-cite-html5#forum5363 2013-09-19T16:37:38Z <p>Je suis en train d'utiliser pour la première fois le système de <i>slides</i> HTML/CSS/JS <a href="http://shwr.me/" class="external" rel="external">Shower</a>, qui pousse dans son thème par défaut l'utilisation de la variante <code>figure</code>/<code>blockquote</code>/<code>figcaption</code>, que j'enrichi d'un <code>cite</code> quand j'indique un nom d'œuvre. Cela me convient bien.</p> <p>Tiens, par contre, « — » ou pas ? Tu ne le mets pas à chaque fois dans tes exemples…</p> Sourcer une citation en HTML5 2013-09-19T16:06:20Z http://romy.tetue.net/blockquote-cite-html5#forum5362 2013-09-19T16:06:20Z <p>Autant je suis d'accord avec l'argument et l'approche pragmatique, autant je ne comprends pas l'exemple que tu donnes : en quoi serait-il plus simple de générer/contribuer un <code><p class="source"></code> qu'un <code><footer></code> ou autre ? Je comprendrais un <code><p></code> seul, qui est parfois ce que je fais par flemme pragmatique. Mais préférer un élément pourvu d'un attribut à valeur libre me semble moins résistant à l'erreur humaine.</p> <p>L'emploi d'un sélecteur, ici <code>.source</code>, est cependant intéressant, car permet de prévoir le style indépendamment du marquage HTML, <code><small></code>, <code><p></code> ou <code><footer></code>. Je l'ajoute à mon framework, en le renommant <code>.cite</code> :)</p> Sourcer une citation en HTML5 2013-09-19T11:52:54Z http://romy.tetue.net/blockquote-cite-html5#forum5361 2013-09-19T11:52:54Z <p>Ça me rappelle une vieille discussion sur le défunt htmlzengarden (qui, me dit-on, est en cours de refonte) sur la façon de coder un chemin de fer, et je disais que le plus simple est le mieux.</p> <p>L'approche ici est un peu similaire, surtout si les contenus doivent être contribués ensuite. Si dans ton CMS tu ne donnes pas la possibilité d'encadrer la saisie d'une structure de citation aussi complexe que ce que tu viens de nous montrer, c'est peine perdue : dans 6 mois il y aura partout des simples paragraphes avec de l'italique dedans.</p> <p>Mais bon, pour l'exercice tentons de faire abstraction de la complexité d'intégration ;)</p> <p>Dans ce cas je dirais qu'un p.source ferait l'affaire et je n'irais pas chercher plus loin.</p> <p>Donc :<br class="manualbr" /></p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="html"><code><p class="source">Simone de Beauvoir, extrait du <cite>Deuxième Sexe</cite>, 1949</p></code></pre></div> <p>Le vrai luxe ce serait évidemment un attribut data-* dans ton CMS au niveau du blockquote, et donc la possibilité de corriger le tir en cours de route pour adapter ultérieurement le HTML aux idées qui peuvent te venir plus tard. :)</p>