Mise en page et indentation du code HTML avant envoi au client

**Jonathan.b** · 05/03/2010, 14h26

Bonjour à tous,

Le titre du post peut paraître une peu obscure mais ma curiosité me pousse à me poser certaines questions.

Lorsque l'on code un site, on ne se préoccupe pas beaucoup du résultat au niveau du code HTML (mise en page, indentation). On se retrouve au final avec un code HTML illisible. Il est donc difficile de s'y retrouver lorsque l'on veut s'occuper de la mise en page, du css etc.

Je me demande simplement s'il n'y a pas un moyen de faire une indentation et mise en page automatique de ce code (renvoyé par PHP dans mon cas) avant de l'envoyer au navigateur du client ? Un module apache ou autre (je n'en sais rien du tout à vrai dire) ?

Merci d'avance (si j'arrive à avoir une réponse

)

**julp** · 05/03/2010, 15h10

Je vois deux solutions :

trouver effectivement un module apache (du genre de mod_tidy ?)
soit avec PHP, traiter le code généré, en bufferisant tout (fonctions ob_*). Par contre, il me semble que le reformatage avec l'extension DOM sur un document HTML n'est pas fonctionnelle (donc extension tidy ? - voir l'exemple)

EDIT : tidy fournit même déjà une fonction de rappel toute prête destinée à ob_start (ob_tidyhandler) par contre il faudrait, a priori, (re)définir les options par défaut de tidy via son fichier de configuration (indiqué par tidy.default_config dans le php.ini)

**Jonathan.b** · 06/03/2010, 11h55

Je pensais plus à un module apache plutôt qu'un script PHP pour une question de rapidité.
Je vais donc regarder mod_tidy même si je crois qu'il ne soit pas destiné à faire un simple formatage de code HTML. Mais merci, c'est un bon début.

S'il y a d'autres avis, je suis preneur.

**Bovino** · 07/03/2010, 11h04

Envoyé par Jonathan.b

Je me demande simplement s'il n'y a pas un moyen de faire une indentation et mise en page automatique de ce code (renvoyé par PHP dans mon cas) avant de l'envoyer au navigateur du client ?

J'avoue que j'ai un peu de mal à comprendre l'intérêt de la chose

Une fois envoyé au navigateur, qu'est-ce que tu veux modifier dans la page

**Jonathan.b** · 08/03/2010, 14h39

Il n'y a rien à modifier, juste à lire et comprendre.
Je me mets simplement à la place du designer CSS ou du codeur javascript (ajax & co).
Je pense que c'est plus facile de développer cette partie, si le code client est mis en page et indenté, plutôt qu'une suite de code html mis bout à bout avec des retours à la ligne aléatoire et une indentation parfaitement inexistante.
Ce qui est souvent le cas, lorsque le code est généré de façon dynamique (cas de tous les sites aujourd'hui).

Différence entre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<html>
    <head>
        du texte
    </head>
    <body>
        encore du texte
        <ul>
            <li>du texte</li>
            <li>
                <ul id="menu-qui-défile">
                    <li>du texte</li>
                    <li>du texte</li>
                </ul>
            </li>
            <li>du texte</li>
            <li>du texte</li>
        </ul>
        et encore du texte
    </body>
</html>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
<head>
        du texte
</head><body>encore du texte
<ul>
            <li>du texte</li><li>
                    <ul id="menu-qui-défile">
<li>du texte</li>
<li>du texte</li>
</ul>
            </li><li>du texte</li><li>du texte</li>
</ul>        et encore du texte
    </body>
</html>

Je pose simplement la question car j'ai plusieurs fois vu du code source d'une page web parfaitement mis en page et donc super lisible et je me dis qu'il doit être impossible de faire cela sans un module (ou autre) qui passe entre la génération du code html par le site dynamique et l'envoie du code au client.

J'avoue que cela n'a que peut d'intérêt. C'est simplement une recherche pour facilité le travail sur la partie JS et CSS mais également (et surtout) par curiosité.

**Ethyde** · 08/03/2010, 16h55

Bonjour,

plusieurs choses à ce sujet :

l'indentation et la mise en forme du code source ne compte que pour le code non-interprété : en gros personne ne se base sur le code source dans le navigateur pour savoir si le code est propre ou pas. Un dev qui repasse derrière ne s'en pré-occupe pas non plus il iras voir directement les fichiers sur le serveur.

De plus, et de plus en plus, les dev vont avoir recours à des méthodes d'optimisation du code source par compression du code, que ce soit via un script ( comme minify pour les css/js), ou via des compresseur de code, rendant le code coté client incompréhensible.

Ce qui compte, à ce niveau là, c'est que ton code coté serveur soit propre, et pour ça chacun sa cuisine du moment que c'est lisible

**12monkeys** · 08/03/2010, 21h03

Bonsoir

Envoyé par Jonathan.b

on ne se préoccupe pas beaucoup du résultat au niveau du code HTML (mise en page, indentation)

Pas tout le monde, pour mon cas par exemple je fais très attention à l'indentation du code aurant XHTML, CSS et PHP...

Et quand le code XHTML est inclus dans du CODE PHP, je l'indente aussi moi même...

C'est une question de pratique.

**Jonathan.b** · 09/03/2010, 15h07

@Ethyde : Dois-je comprendre qu'il n'y a pas vraiment de solution puisque cela n'est pas vraiment utile ?

@12monkeys : J'avais commencé à faire comme toi (faire attention à l'intendation du code HTML généré par le code PHP) mais cette solution atteint rapidement ses limites lorsque l'on se trouve avec du helper de vue qui génère donc notre code client et qui peux ensuite être inclut un peu partout. Il est alors impossible de connaître l'indentation de ce code HTML en avance.

Je ne veux pas particulièrement me prendre la tête sur une subtilité telle que la présentation du code HTML mais je posais cette question à tout hasard. Peux être y avait-il un simple module pour faire tout ce travail.

**Ethyde** · 09/03/2010, 16h22

Envoyé par Jonathan.b

@Ethyde : Dois-je comprendre qu'il n'y a pas vraiment de solution puisque cela n'est pas vraiment utile ?

C'est pas vraiment comme ça qu'il faut voir les choses : c'est plutôt que même si il y en as une de toute façon ça ne se verras pas ou peu, et en gros seuls les personne qui feront un affichage de la source en mode bloc note le verront, et encore

Encore une fois ce qui compte ce n'est pas que le code source produit sois indenté/mis en forme mais que le code source d'origine le soit !

**Jonathan.b** · 09/03/2010, 20h49

Il n'y a pas de problème sur le code source, je m'efforce déjà de coté le plus proprement possible.
Le but est bien que le mec (designeur html/css ou codeur d'ihm JS) qui affichera le code source de la page reçu puisse lire facilement ce qu'il va voir.

L'intérêt est de toute façon très limité. On est tout à fait d'accord sur ce point. C'est pour ça que s'il n'y a pas de solution simple à mettre en place, je ne vais pas chercher plus loin.

Je laisse le sujet ouvert même si en soit, il apporte déjà sa réponse

Mise en page et indentation du code HTML avant envoi au client

HTML

Vue hybride

Discussions similaires

Partager

Partager