[résolu] Texte préformaté (white-space: pre) et impression

Salut à tous,

je suis en train de m'occuper de l'impression des pages de mes tutoriels, et vu le sujet des tutoriels (conception web, html, css, js, etc), j'ai plusieurs zone de texte préformaté (<pre> avec white-space: pre; par défaut), ceci pour présenter le code tel qu'il doit être.

Pour l'affichage à l'écran, même si ce n'est pas toujours parfait (il me reste des éléments à gérer pour rendre le tout plus fonctionnel), pour l'impression, c'est une vraie catastrophe, en effet, la partie dépassant de la zone d'impression n'est tout simplement pas imprimée.
C'est assez logique mais plutôt embettant.

Quelle stratégie adopter sachant qu'apriori ceux qui imprimeraient les tutos le ferait entre autre pour avoir les portions de code sous la main...

Passer le white-space en (ooops, me rappelle plus les valeur, mais j'irais rechercher) normal ou autre ...
Quelles solutions existent ?

merci @+
Modifié par Olivier (31 Jul 2005 - 14:16)

Olivier a écrit :

Quelles solutions existent ?

Au choix :
- demander à tes utilisateurs d'imprimer en A3, ou en A4 paysage (bof)
- ou leur demander d'imprimer dans un navigateur adaptant le contenu à l'impression (Opera) (bof aussi)
- ou surtout faire les retours à la ligne qui vont bien "en dur" dans tes exemples de code, ce qui évitera à coup sûr des retours générés par le navigateur, les CSS ou le processus d'impression... pas toujours bien placés
Modifié par Laurent Denis (31 Jul 2005 - 13:55)

Slt,

je pense que la valeur qu'il faudrait que tu mettes est pre-line qui, si j'ai bien compris ne fait que "casser" les phrases trop longues.

++

NB : apparemment, cette valeur n'est de toute façon pas implémentée.

Laurent > le retours à la ligne en dur, avec le white-space: pre; par défaut, il sont pris en compte aussi ou pas ?

Si tel est le cas, non, parce que le code n'a aucune raison d'être sur plusieurs ligne

Ca fait violent en plus, faut compter les lettres pour que ça tombe pil poil avec la taille des caractères et la zone d'impression et les marges d'impression etc et en plus, je n'ai pas de contrôle sur l'ajout de retour à la ligne vu que je gère l'affichage des tutos avec un CMS au format WIKI pour gérer la coloration syntaxique

white-space: normal;

N'aurait pas d'effet acceptable ?

(@ SirWam, les valeurs pour white-space sont normal, pre et nowrap rien d'autre
normal => retour à la ligne automatique
pre => même rendu que la source
nowrap => pas de rupture de ligne

Arf, testé le white-space: normal; c'est illisible

A part les retours à la ligne en dur ça ne semble pas tellement réalisable
Mais je ne peux pas mettre cette solution en place...

SirWam a écrit :
je pense que la valeur qu'il faudrait que tu mettes est pre-line qui, si j'ai bien compris ne fait que "casser" les phrases trop longues.

Pas de chance : perdu

La valeur de white-space qui convient est pre-wrap, qui respecte les blancs (et donc l'indentation), mais qui ajoute des retours à la ligne pour que le contenu "tienne dans la boîte".

pre-wrap est actuellement implémenté par Opera. Il ne me semble pas qu'un autre navigateur ne l'implémente ?

<edit> Ces valeurs supplémentaires de white-space sont CSS2.1, Olivier. Pas CSS2.0</>
Modifié par Laurent Denis (31 Jul 2005 - 14:10)

Olivier a écrit :
Si tel est le cas, non, parce que le code n'a aucune raison d'être sur plusieurs ligne

Si : être bien présenté et ne pas être tronqué

Arf, en plus ils en rajoutent

Bon, je test pre-wrap qui semblerait être indiqué pour mon cas.

Voilà, ça fonctionne impec'

C'est exactement ce que je cherchais

Ca marche sous Opera 8 (le seul que j'ai sous la main)
Pas sur Firefox 1.0.6, peut être une prochaine version
Est-il besoin de préciser que ça ne marche pas sous IE ?

Sous safari, c'est possible que ça passe, mais faudrait tester.

Donc, je vais laisser ça, et en attendant l'implémentation de cette valeur de white-space
C'est bien CSS2.1

Merci à vous

Laurent, j'ai fait l'aperçu avant impression pour tester sous Opera, et les fond sont gris, c'est juste pour indiquer les marges je suppose ?
Sinon, c'est des vilains gaspillateur d'encre
Modifié par Olivier (31 Jul 2005 - 14:15)

Laurent Denis a écrit :


Si : être bien présenté et ne pas être tronqué

Non
C'est pûrement "présentatif", je n'ai rien à ajouter dans le code HTML pour ça !!

Et puis c'est de la bidouille et du réglage à la c** donc, pas d'accord

Les utilisateurs n'ont qu'à utiliser un navigateur moderne pour bénéficier de white-space: pre-wrap; NA !

Olivier a écrit :

C'est pûrement "présentatif", je n'ai rien à ajouter dans le code HTML pour ça !!

L"indentation de ton code n'aucun rapport avec la question du "présentatif", Olivier. Il ne faut pas voir le mal partout

A quoi sert l'élément <pre>? Très exactement, à dire au navigateur "Respecte les retours à la ligne et les espaces, j'en ai besoin au rendu". Ni plus, ni moins.

Mettre des retours à la ligne qui améliorent la lisibilité de tes exemples de codes et évitent les problèmes d'impression... C'est exactement ce pour quoi <pre> a été conçu

<edit>Attention : je ne parle pas, évidemment, de coller des <br /> ! Uniquement de retours à la ligne dans l'écriture...</>
Modifié par Laurent Denis (31 Jul 2005 - 14:28)

Pour le code, les retours à la ligne ne sont pas innocent selon moi, enfin ça n'a pas grand incidence généralement sur le code, mais quand on code sur son éditeur, on fait pas des retours à la ligne pour le fun et la présentation.

Selon moi, en ajouter est à des fins purement présentative...
Mais je peux me planter

Olivier a écrit :
quand on code sur son éditeur, on fait pas des retours à la ligne pour le fun et la présentation.

Comment écris-tu :

<pre>
&lt;link rel="alternate" type="application/rss+xml" title="Forum Alsacréations : CSS et Standards Web RSS 2.0" href="rss2.php" /&gt;
</pre>

Ou bien :

<pre>
&lt;link
   rel="alternate"
   type="application/rss+xml"
   title="Forum Alsacréations : CSS et Standards Web RSS 2.0"
   href="rss2.php" /&gt;
</pre>

?

Peux-tu me donner une raison de ne pas utiliser le second exemple ?
Modifié par Laurent Denis (31 Jul 2005 - 14:40)

Olivier a écrit :
Pour l'affichage à l'écran, même si ce n'est pas toujours parfait (il me reste des éléments à gérer pour rendre le tout plus fonctionnel), pour l'impression, c'est une vraie catastrophe, en effet, la partie dépassant de la zone d'impression n'est tout simplement pas imprimée.

La règle @page permet de définir le bloc de page et ses marges. Les médias paginé, boite de pages et règle @page Je crois qu'on peut même définir les traits de coupe pour le massicotage et des marges différentes pour les pages de gauche ou droite.

Laurent Denis a écrit :


Comment écris-tu :

<pre>
&lt;link rel="alternate" type="application/rss+xml" title="Forum Alsacréations : CSS et Standards Web RSS 2.0" href="rss2.php" /&gt;
</pre>

Ou bien :

<pre>
&lt;link
   rel="alternate"
   type="application/rss+xml"
   title="Forum Alsacréations : CSS et Standards Web RSS 2.0"
   href="rss2.php" /&gt;
</pre>

?

Peux-tu me donner une raison de ne pas utiliser le second exemple ?

Je suis bien d'accord sur le fait que les 2 sont valables et fonctionnels, mais présenter un code comme ça, c'est inhumain pour moi
Totalement illisible.

Aureance a écrit :

La règle @page permet de définir le bloc de page et ses marges. Les médias paginé, boite de pages et règle @page Je crois qu'on peut même définir les traits de coupe pour le massicotage et des marges différentes pour les pages de gauche ou droite.

Attention : la plupart des propriétés CSS2.0 liées à @page n'ont jamais été implémentées (sauf partiellement dans... Opera ).

CSS2.1 a sérieusement élagué, et supprimé size (taille et orientation), les pages nommées et les repères de coupes. Il ne reste que des marges simplifiées et des sauts de pages, qui n'ont, surtout pour les marges, qu'une valeur indicative pour le système d'impression.
Voir http://blog-and-blues.org/weblog/2004/11/24/346
Modifié par Laurent Denis (31 Jul 2005 - 21:19)

Je viens de lire ton lien avec horreur, fini les pre-maquettes imprimables du coup... moi qui ai utilisé ce truc plusieurs fois sans jamais vérifier ( j'ai pas d'imprimante ) si ça se trouve mes destinataires ont étés embêtés. On n'à plus qu'a se rabattre sur un PDF à télécharger pour l'impression. PDF, j'aime pas trop cette solution.

PS: je n'ai pas trouvé de traduction française des recommandations css2.1. En existe t'il une ? J'en ai marre de me référer à des trucs bidons. Le nombre de choses qui ne sont pas valables est impressionant.