Définir la largeur d'un \t dans un <pre>

Hello,

Je cherche à définir la taille d'un tab (\t) à l'intérieur d'un <pre> (ou tout autre élément en white-space:pre). En fait, j'essaie d'afficher du code (html, css, php) dans ce <pre>, et je voudrais garder l'indentation correctement, pour garder un maximum de lisibilité.

CSS, dans sa définition de white-space, défini la largeur d'un tab à l'équivalent de 8 espaces. J'aimerai le descendre à 4.

J'ai trouvé une proposition pour une propriété de ce genre, tab-stops, qui date de 1997, mais aucun browser ne l'implemente. Tout ce que j'ai trouvé, c'est -o-tab-size, dispo uniquement sous opera 10.51.

Je sais que je pourrais remplacer les tabs par des &nbsp;, ou par des <span> et les styler pour leur donner la largeur désirée. Ca ne me pose pas vraiment de problème, mais cela nécessite un travail en back-end avant d'afficher le contenu, et j'aurai aimé pouvoir avoir une mise en page "correcte" déjà dans l'éditeur (tinymce) lors de la rédaction du texte.

J'ai bien peur que cela ne soit pas possible aujourd'hui, mais dans le doute, et après avoir longuement cherché, j'ai préféré venir le poster ici, au cas où l'un de vous ai une solution qui m'ai échappée.
Modifié par Tymlis (19 Apr 2010 - 12:02)

Hello,

La propriété tab-size a été créée par Opera pour les besoins de son outil de debug Dragonfly, proposée sur la liste de discussion publique www-style, et récemment implémentée par Firefox. La valeur acceptée n'est pas une valeur de type <size> (acceptant différentes unités), mais un entier numérique positif.

Dernièrement j'ai écrit le style suivant pour un blog:

pre code {
  white-space: pre-wrap;
  -moz-tab-size: 4; /* Firefox 3.7 */
  -o-tab-size: 4; /* Opera 10.5, 10.5+next? */
}

J'ai pu tester dans une nightly de Firefox 3.7, ça marche. Ça marche pas dans Opera 10.5beta, à voir dans la version finale sous Windows.
Modifié par Florent V. (19 Apr 2010 - 12:41)

Ah très bien ! j'avais essayé -moz-tab-size dans mon firebug et vu quelques messages en parlant, mais comme je suis en 3.6 je n'avais rien vu de concluant.

Merci donc, je vais rajouter cela.

Testé dans Opera 10.52rc sous OS X, ça marche (quoique pas avec le code ci-dessus car le code en display:inline par défaut dans le pre, ça perturbe Opera on dirait).