How to keep PHP 'View Source' html output clean

Question

This has been bugging me today after checking the source out on a site. I use PHP output in my templates for dynamic content. The templates start out in html only, and are cleanly indented and formatted. The PHP content is then added in and indented to match the html formating.

<ul>
  <li>nav1</li>
  <li>nav2</li>
  <li>nav3</li>
</ul>

Becomes:

<ul>
  <?php foreach($navitems as $nav):?>
  <li><?=$nav?></li>
  <?php endforeach; ?>
</ul>

When output in html, the encapsulated PHP lines are dropped but the white space used to format them are left in and throws the view source formatting all out of whack. The site I mentioned is cleanly formatted on the view source output. Should I assume they are using some template engine? Also would there be any way to clean up the kind of templates I have? with out manually removing the whitespace and sacrificing readability on the dev side?

Answer 1

You can't really get clean output from inlining PHP. I would strongly suggest using some kind of templating engine such as Smarty. Aside from the clean output, template engines have the advantage of maintaining some separation between your code and your design, increasing the maintainability and readability of complex websites.

Answer 2

That's something that's bugging me, too. The best you can do is using tidy to postprocess the text. Add this line to the start of your page (and be prepared for output buffering havoc when you encounter your first PHP error with output buffering on):

ob_start('ob_tidyhandler');

Answer 3

You few times I have tidied my output for debugging my generated HTML code I have used tabs and newlines... ie;

print "<table>\n";
print "\t<tr>\n";
print "\t\t<td>\n";
print "\t\t\tMy Content!\n";
print "\t\t</td>\n";
print "\t</tr>\n";
print "</table>\n";

Answer 4

i admit, i like clean, nicely indented html too. often it doesn't work out the way i want, because of the same reasons you're having. sometimes manual indentation and linebreaks are not preserverd, or it doesn't work because of subtemplates where you reset indentation.

and the machines really don't care. not about whitespace, not about comments, the only thing they might care about is minified stuff, so additional whitespace and comments are actually counter-productive. but it's so pretty *sigh*

sometimes, if firebugs not available, i just like it for debugging. because of that most of the time i have an option to activate html tidy manually for the current request. be careful: tidy automatically corrects certain errors (depending on the configuration options), so it may actually hide errors from you.

Answer 5

Does "pretty" HTML output matter? You'll be pasting the output HTML into an editor whenever you want to poke through it, and the editor will presumably have the option to format it correctly (or you need to switch editors!).

I find the suggestions to use an additional templating language (because that's exactly what PHP is) abhorrent. You'd slow down each and every page to correct the odd space or tab? If anything, I would go the other direction and lean towards running each page through a tool to remove the remaining whitespace.

Answer 6

If it's REAL important in your specific case, you could do this...

<ul><?php foreach($navitems as $nav):?>
  <li><?=$nav?></li><?php endforeach; ?>
</ul>

Although that is worse in my opinion, because your code is less readable, even though the HTML is as you desire.

Answer 7

I don't care how clean the output is - it's the original source code that produced it that has to be easy to parse - for me as a developer.

If I was examining the output, I'll run it through tidy to clean it up, if it were required to take a good look at it - but validators don't care about extra spaces or tabs either.

In fact, I'm more likely to strip whitespace out of the output HTML than put any in - less bytes on the wire = faster downloads. not by much, but sometimes it would help in a high traffic scenario (though of course, gzipping the output helps more).

Answer 8

Hi guys

Viewing unformatted source is very annoying with multiple nested divs and many records each containing these divs..

I came across this firefox addon called Phoenix Editor. You can view your source in it's editor and then click "format" and it works like a charm!

Link Here

Answer 9

I Agree, A clean source is very important, Its well commented, well structured and maintence on those sources, scripts, or code is very quick and simple. You should look into fragmenting your main, useing require (prior.php, header.php, title.php, content.php, post.php) in the corrosponding places, then write a new function under prior.php that will parse and layout html tags using the explode method and a string splitter, have an integer for tab index, and whenever "</" is in the funtions string then interger-- whenever "< and ">" but not "/>" and "</" are in the string integer ++ and it all has to be placed properly.... , use a for loop to rebuild another string tabindex to tab the contents interger times. Im writting a script right now for an engine actually. I'll sell it to you! or give you free sections of scripting.

10 + years of programming Experiance! Kevin harris

Answer 10

The way I do it is:

    <ul>
<?php foreach($navitems as $nav):?>
      <li><?=$nav?></li>
<?php endforeach; ?>
    </ul>

Basically all my conditionals and loop blocks are flush left within the views. If they are nested, I indent inside the PHP start tag, like so:

    <ul>
<?php foreach($navitems as $nav):?>
<?php     if($nav!== null) : ?>
      <li><?=$nav?></li>
<?php     endif; ?>
<?php endforeach; ?>
    </ul>

This way, I see the presentation logic clearly when I skim the code, and it makes for clean HTML output as well. The output inside the blocks are exactly where I put them.

A warning though, PHP eats newlines after the closing tag ?>. This becomes a problem when you do something like outputting inside a <pre> block.

<pre>
<?php foreach($vars as $var ) ?>
    <?=$var?>
<?php endforeach; ?>
</pre>

This will output:

<pre> 
            0            1            2            3            4            5        </pre> 

This is kind of a hack, but adding a space after the <?=$var?> makes it clean.

Sorry for the excessive code blocks, but this has been bugging me for a long time as well. Hope it helps, after about 7 months.