28213 sujets

CSS et mise en forme, CSS3

[ Résolu ] Par quoi Remplaçer <pre></pre> ?

Salut Smiley cligne
J'ai réussis à finaliser une petite partie de mes pages,mais il me reste un petit détail qui me gêne.
Mes pages

Je suis en résolution 1280*1024 et grace à mon nav préféré, Fx, et son extension WebDevelopper, je peux modifier la résolution d'affichage de la page, et si je la passe en 800*600 et que je continue à descendre celle-ci, tous les texte situés entre mes balises <pre></pre> ne se redimentionnent pas correctement et dépassent des marges droites.Apparement cet effet n'est que sur ces balises, est-ce normale, puis-je contourné ce défaut en restant valide, ou c'est moi qui en demande trop ?

Merçi de votre aide Smiley biggrin
Modifié par Express (13 Nov 2005 - 11:33)
Bonjour,

C'est tout à fait normal : la valeur par défaut de la propriété white-space (gestion des espaces) pour l'élément pre est... pre. C'est à dire la conservation stricte des espaces et retours à la ligne tels qu'ils figurent dans la source HTML. Il n'y a donc pas de retours à la ligne sur les espaces en fonction de la largeur d'affichage disponible. Les retours à la ligne ne se produiront qu'aux endroits où ils sont indiqués dans la source HTML.

Dans les navigateurs qui supportent cette propriété (Opera, peut-être Firefox, pas IE), il est possible de forcer des retours à la ligne dans les blocs pre afin qu'ils s'adaptent à la largeur disponible, à l'aide de white-space: pre-wrap.

Eviter en revanche, si le contenu est bien du code, de remplacer les éléments pre par des blocs du type <div class="code">, très gênant lors des copiés-collés du texte, et sans valeur sémantique utilisable. C'est le cas dans le code de ce forum, et c'est un éternel sujet d'agacement en ce qui me concerne Smiley cligne

<edit>Après un coup d'oeil aux pages concernées : le contenu des blocs <pre> ("news") ne justifie pas du tout le choix de cet élément, car rien ne nécessite la conservation des espaces à l'identique. On est donc dans le cas inverse : il faut remplacer les <pre> par des <div> stylées à l'identique.</>
Modifié par Laurent Denis (13 Nov 2005 - 10:53)
Express > white-space: pre-wrap appartient à CSS 2.1. Autant te dire que tous les navigateurs ne l'implémentent pas.

De plus, pour une meilleur lisibilité du code, je pense que la meilleure alternative reste encore d'ajouter overflow: auto. Tu auras ainsi une barre de défilement horizontal, comme c'est le cas sur ce forum, sans perdre le formatage de ton code.

Si tu tiens absolument à ces retours à la ligne, tu peux quand même utiliser ces codes ci : 
white-space: -moz-pre-wrap; /* extension propre aux navigateurs fonctionnant sous Gecko (Mozilla, Firefox, k-meleon, etc.) */
	white-space: -o-pre-wrap; /* extension propre à Opera */
	white-space: pre-wrap; /* ajouté à CSS 2.1, la seule valeur qui devrait être reconnue sur les navigateurs respectant CSS 2.1 */
Tout dépend du support visé et de l'utilisation, ainsi que de l'ergonomie que tu désires. Smiley smile
[edit aussi] : idem Laurent...
[edit bis] : à Raphaël et aux webmasters > C'est moi ou l'overflow auto a été supprimé sur les blocs </code> ?
Modifié par an.archi (13 Nov 2005 - 10:55)
an.archi a écrit :

white-space: -o-pre-wrap; /* extension propre à Opera */


Opera implémente la propriété CSS2.1 white-space: pre-wrap, depuis l'une des versions 7.x. L'extension CSS Opera -o-pre-wrap est donc inutile (elle n'est plus supportée par les versions récentes, d'ailleurs, il me semble).
Modifié par Laurent Denis (13 Nov 2005 - 10:56)
Administrateur
Laurent Denis a écrit :
Eviter en revanche, si le contenu est bien du code, de remplacer les éléments pre par des blocs du type <div class="code">, très gênant lors des copiés-collés du texte, et sans valeur sémantique utilisable. C'est le cas dans le code de ce forum, et c'est un éternel sujet d'agacement en ce qui me concerne Smiley cligne
Je comprends ton agaçement Smiley cligne
Comme tu le sais, les premières versions du forum employaient la balise <pre> pour les codes, mais même avec moultes bidouilles et hacks pour IE, le rendu posait des problèmes.
Par contre, je suis tout à fait prêt à revenir dessus (si dew est dispo parce qu'on aura besoin de lui) et à remettre un <pre>, ce qui arrangerait beaucoup de choses (notamment l'indentation).
Bref : je suis très ouvert mais il me faut une solution qui fonctionne partout... et il semblerait qu'elle n'ait pas été trouvée avec <pre> Smiley ohwell


an.archi a écrit :
[edit bis] : à Raphaël et aux webmasters > C'est moi ou l'overflow auto a été supprimé sur les blocs </code> ?
Chez moi tout est ok, overflow working.
Raphael a écrit :
Je comprends ton agaçement Smiley cligne
Comme tu le sais, les premières versions du forum employaient la balise <pre> pour les codes, mais même avec moultes bidouilles et hacks pour IE, le rendu posait des problèmes.


J'avoue franchement ne pas avoir suivi à l'époque les problèmes en question, qui dépendent peut-être des skins du forum (je n'en utilise qu'une, depuis l'origine). Je tâcherais de m'y atteler quand j'aurais un moment, si personne ne se dévoue Smiley cligne Le pre-wrap est utilisé sur divers sites sans difficultés ni incompatibilités, et il serait étonnant qu'on ne puisse pas résoudre ça.
Administrateur
Les <pre> ont été remis en place.
Pour l'instant, le problème est qu'un <br> est généré à la fin de chaque ligne de code, ce qui est gênant lors des copier-coller.
De plus, avec la bidouille actuelle pour éviter le bug IE, l'indentation n'est pas respectée.

Pour info, le CSS actuel employé :
pre, code, div.code {
  font-family: monospace;
	border-width: 1px 1px 1px 8px;
	border-style: solid;
	border-color: #F0B802;
	padding: 1em;
	margin: 1em 3em;
	font-size: 110%;
	background: #fff url(bg_txt.gif) left top repeat-x;
	width: 90%;
	overflow: hidden;
white-space: nowrap; 
}

html>body pre, html>body code, html>body div.code {
  overflow: auto;
  width: auto;
}
Sujet clos
Aller à