[Résolu] </pre> ou </code>

Bonsoir à tous,

j'aurrai besoin, sur mon site, de présenter des codes sources. Sur la maquette j'utilise la syntaxe suivante :

<pre>
<span class="black">&lt;b&gt;Script de test&lt;/b&gt;</span>
<span class="blue">&lt;?php</span>
 <span class="orange">//Script de test</span>
 <span class="green">echo</span> <span class="red">'PHP Rocks !'</span><span class="green">;</span>
<span class="blue">?&gt;</span>
</pre>

Seul problème, le code ne retourne pas à la ligne si celle-ci est plus longue que le conteneur... Avec un petit script PHP ça serait faisable, mais j'aimerais savoir si ça ne serait pas mieux d'utiliser la balise </code>.

Qu'en pensez-vous, que me conseillez-vous ?
J'aimerai ne pas avoir recourt au(x) scroll(s), donc pas d'overflow.

Merci,
Antoine


EDIT: Je ne sais pas si je suis dans le bon forum en fait...
Modifié le 18 Nov 2004 - 18:47

Je crois que ton sujet serait mieux dans le salon HTML, XHTML.

Personnellement, je trouve qu'un code qui retourne à la ligne n'importe où est plus souvent qu'autrement illisible.

Pour présenter un code clair dans un espace fixe, je suggère un <textarea> :

 
<form action="show">
 <fieldset>
  <legend>Voir sources</legend>
   <div>
   <label for="zone">sources</label>
   <textarea id="zone" style="background: #ffffff; width: 500px; height: 500px; margin: 9px; overflow: scroll" rows="1" cols="1">
Ici ton code
   </textarea>
  </div>
 </fieldset>
</form>

Modifié le 26 Nov 2004 - 11:53

Je viens de déplacer le sujet vers HTML / XHTML comme Stephan le proposait et Bouda s'interrogeait dans son poste initial.

Un code source c'est le type même de donnée qui est préformatée, donc qui doit aller dans un <pre> (c'est fait pour ça non ?)
Maintenant, pourquoi opposer <pre> et <code> ? le premier est pour un bloc de texte préformaté, le second pour du code. Si j'ai un bloc de code (par opposition à une partie de ligne) c'est souvent les deux
Donc .... <pre><code>mon code</code></pre>

Concernant le point soulevé, effectivement le code ne revient pas tout seul à la ligne, mais pourquoi le ferait-il ? ça risque effectivement d'être illisible si ça revient à la ligne au milieu.
De plus sur certains codes le retour à la ligne a son importance (c'est le cas dans python par exemple), et autoriser le navigateur à revenir à la ligne c'est l'autoriser à faire n'importe quoi.
Il s'agit d'un texte préformaté, il est déjà formaté, avec les désavantages que ça comporte : si la ligne est trop longue, on a une barre de défilement.

Le textarea me semble personnellement totalement hors de propos. On perd toutes les informations sémantiques et j'ai plutot l'impression que ça revient à utiliser une balise à contresens.

Ganf a écrit :

Le textarea me semble personnellement totalement hors de propos. On perd toutes les informations sémantiques et j'ai plutot l'impression que ça revient à utiliser une balise à contresens.

Sur le site spreadfirefox, la page Affiliates homepage utilise abondamment le <textarea> pour la saisie de code par l'utilisateur. J'ai donc rien inventé.

La balise <textarea> est un champ de saisie de texte, je ne vois pas pourquoi on est à contresens. Tu peux préciser ?

Pour ce qui est de la perte de toutes les informations sémantiques, que dit de plus un <code> à l'intérieur d'un <pre> si se n'est que nous sommes en face d'un extrait de code présenté sous forme de texte préformaté ? Ou sont les informations sur la nature de ce code ? Comment un moteur de recherche comprendrait mieux la ressource avec cette façon de faire ?

Je trouve que l'on utilise la sémantique un peu trop souvent pour appuyer nos propos, sans avoir idée de ce que c'est, le Web sémantique. Autant dire que je ne suis pas convaincu.

Anyway, Bouda cherche une méthode sans overflow: scroll; alors on est pas plus avancé.
Modifié le 20 Nov 2004 - 19:57

Bon, est si je me decidai à opter pour une solution avec overflow:scroll ?

Merci de vos réponses,
Antoine
Modifié le 18 Nov 2004 - 08:35

Ah j'y pense !

Un autre point en faveur du <textarea> est que l'on peut positionner le curseur dans ce même <textarea> et "tout sélectionner" afin de faire un copier-coller.

Des problèmes d'accessibilité ?
Pas à ce que je sache.

Ganf a écrit :
Maintenant, pourquoi opposer <pre> et <code> ? le premier est pour un bloc de texte préformaté, le second pour du code. Si j'ai un bloc de code (par opposition à une partie de ligne) c'est souvent les deux
Donc .... <pre><code>mon code</code></pre>

(Avis personnel) : <code> c'est aussi un texte à châsse fixe, non? (sinon il suffit de lui indiquer une police de la sorte, comme "courrier")
Pourquoi alors cumuler <pre> + <code>. Il me semble que si c'est pour utiliser <pre> uniquement pour signifier que le code est préformatté, c'est un peu inutile.
On peut cumuler les avantages et les fonctions avec la seule balise <code> :
- la fonction : "voici du code"
- l'affichage : texte à châsse fixe

Bouda a écrit :
Bon, est si je me decidai à opter pour une solution avec overflow:scroll ?

Dans ce cas, voici la solution proposée par Laurent Denis et qui est appliquée sur ce forum :

pre, code {
	width: 90%;
	overflow: hidden;
}

html>body pre, html>body code {
	overflow: auto;
	width: auto;
}

La solution de l'overflow:auto me parait bien. Seul problème, sous IE ça foire un peu. Si le code est plus long que la largeur du </pre>, l'utilisateur n'a aucun moyen de visualiser la fin. Y'a-il une solution à ce problème ?

Voici mon code :

<pre>
<span class="black"><b>Script de test</b></span>
<span class="blue"><?php</span>
 <span class="orange">//Script de test avec un commentaire bien long qui depasse la largeur du conteneur</span>
 <span class="green">echo</span> <span class="red">'PHP Rocks !'</span><span class="green">;</span>
<span class="blue">?></span>
</pre>

div#content-right pre {
 overflow: hidden;
 width: 450px;
 margin: 5px 25px 5px 25px;
 padding: 10px 10px 10px 10px;
 border: 1px dotted #069;
 border-left: 2px solid #069;
 background-color: #e5e5e5;
 font-size: 1em;
}
html>body div#content-right pre {
 overflow: auto;
 width: auto;
}

Antoine

EDIT: Les balises HTML ne sont pas converties en entités dans le mode 'prévisualisation' du message.
Modifié le 18 Nov 2004 - 13:21

Là ça prendrait un exemple en ligne parce que ton problème est peut-être local.

<edit>
Les posts de ce forum s'affichent comme tu dis sur l'ordi public que j'utilise (Windows 98 avec IE6).
</edit>
Modifié le 18 Nov 2004 - 13:55

Bouda a écrit :
La solution de l'overflow:auto me parait bien. Seul problème, sous IE ça foire un peu. Si le code est plus long que la largeur du </pre>, l'utilisateur n'a aucun moyen de visualiser la fin. Y'a-il une solution à ce problème ?

Ce hack est justement fait pour résoudre ce problème. Et il fonctionne... en tout cas, tu peux le tester avec ce forum.

html>body pre {
	overflow: auto;
	width: auto;
}

Raphael a écrit :

Ce hack est justement fait pour résoudre ce problème. Et il fonctionne... en tout cas, tu peux le tester avec ce forum.

Je vérifie cet après-midi sur l'ordi public, mais j'ai expérimenté ce problème.

Le problème c'est que je dois fixer une largeur à mon </pre> :
http://b0uda.free.fr/tmp/overflow-auto.htm

EDIT: Si je mets un width:auto sur </pre>, tout mon contenu se retrouve sous le menu de gauche avec IE.
Modifié le 18 Nov 2004 - 17:41

Tiens !
Voici une page toute cuite !
Tu me dis si c'est concluant !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test Texte Pr&eacute;format&eacute;</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">

pre {
   font-size: small; 
   font-family: "Courier New", monospace; 
   line-height: 1.4em; 
   width: 400px; 
   border-width: 1px 1px 1px 9px; 
   border-style: solid; 
   border-color: #6a9e73; 
   overflow: scroll; 
}

html>body pre {
   overflow: auto; 
}

  </style>
 </head>
 <body>
  <div id="content">
<h1>Test Texte Pr&eacute;format&eacute;</h1>
<pre>
&lt;ul&gt;
 &lt;li&gt;voiciuntr&egrave;slongcommentairepourtesterlefficacit&eacute;decettetechnique&lt;/li&gt;
 &lt;li&gt;voiciuntr&egrave;slongcommentairepourtesterlefficacit&eacute;decettetechnique&lt;/li&gt;
 &lt;li&gt;voiciuntr&egrave;slongcommentairepourtesterlefficacit&eacute;decettetechnique&lt;/li&gt;
 &lt;li&gt;voiciuntr&egrave;slongcommentairepourtesterlefficacit&eacute;decettetechnique&lt;/li&gt;
&lt;/ul&gt;
</pre>
  </div>
 </body>
</html>

Modifié le 18 Nov 2004 - 18:03

Ca fonctionne parfaitement bien sous Moz comme sous IE, merci à toi et aux autres !
Modifié le 18 Nov 2004 - 19:03

Un petit dans le titre du sujet en l'éditant alors non ?

Voilà qui est fait, merci du rappel.

@Raphael:

Le <pre> ne se contente pas de dire "chasse fixe". Il dit aussi "ce code est préformaté". Le préformatage ça veut dire entre autres respecter les espaces blancs, tabulations, fins de ligne ... bref, ce qui peut avoir une importance à la lecture du code mais qui ne sera pas respecté par défaut dans HTML. Changer la police et mettre un overflow ne suffit pas.

Ganf a écrit :
@Raphael:

Le <pre> ne se contente pas de dire "chasse fixe". Il dit aussi "ce code est préformaté". Le préformatage ça veut dire entre autres respecter les espaces blancs, tabulations, fins de ligne ... bref, ce qui peut avoir une importance à la lecture du code mais qui ne sera pas respecté par défaut dans HTML. Changer la police et mettre un overflow ne suffit pas.

Autant pour moi, je pensais que <code> :
- était aussi du texte préformatté
- était une balise bloc, comme <pre>, ce qui n'est pas le cas.

En fait, une très bonne explication ici, qui rejoint ta pensée :

WDG a écrit :
Since spacing is often important when presenting computer code, the PRE element can be useful as a container for CODE elements. When used within other containers, a CODE element has multiple spaces collapsed. The following example uses CODE within PRE:

<PRE><CODE>
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</CODE></PRE>

Stephan a écrit :
La balise < textarea> est un champ de saisi de texte, je ne vois pas pourquoi on est à contresens.

C'est bien le propos : saisir du texte. :o)
Pourquoi utiliser une balise dont la fonction n'est pas l'affichage (pur), alors que d'autres qui lui sont dédié le font tout aussi bien ?
Modifié le 20 Nov 2004 - 19:41