Given the HTML generated by my application.
function pagination(){
echo "<ul>\n";
for($i = 1; $i <= 10; $i++)
echo "\t<li>...</li>\n";
echo "</ul>\n";
}
?>
<div>
<?php pagination(); ?>
</div>
If I add another container DIV, this doesn't produce correctly indented code.
Is there any solution for the function to somehow know how many \t 's or spaces to add, or somehow automatically indent the html?
Amazing question.
9 answers and 3 comments so far, and looks like nobody bothered to read the question body, but just repeated some gospel triggered by a keyword in the title - a most preferred manner to answer questions on the blessed site of stackoverflow.
Yet the question not that simple/one-layered.
I have to admit, it's ambiguous itself. So, we have to dig it out.
1) How do you indent your HTML?
Use templates, dude. Use templates. The only answer.
2) Is there any solution for the function to somehow know how many \t 's or spaces to add, or somehow automatically indent the html?
Of course there isn't.
PHP knows nothing of HTML, indents and such.
Especially when no HTML is ready yet(!)
3) If I add another container DIV, this doesn't produce correctly indented code.
The key question of the question.
The question for sake of which the question were asked.
Yet hardest of them all.
And the answer is kind of ones I showed total disagreement with, hehe:
Although relative order of tags is important, for the resulting large HTML it is possible to move some blocks out of row:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Hello</h1>
<div>
<!-- news list -->
<div>
<ul>
<li>1..</li>
<li>2..</li>
<li>3..</li>
<li>4..</li>
</ul>
</div>
<!-- /news list -->
</div>
<div>
<!-- pagination -->
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Black</li>
</ul>
<!-- /pagination -->
</div>
</body>
</html>
It will let you have proper indention in the meaningful blocks, yet keep the main HTML in order.
As a side effect it will keep your lines on the screen :)
To keep good indentation inside sub-templates, I'd strongly suggest using PHP-based templates. Not ugly HEREDOC for goodness' sake!
Here is only one rule to follow with PHP templates:
always keep PHP blocks to the left side. That's all.
To keep indentation between PHP nested blocks, just indent them inside <? ?>
Example:
<ul>
<? foreach ($thelist as $color): ?>
<li>
<? if ($color == $current): ?>
<b><?=$color?></b>
<? else ?>
<a href="?color=<?=$color?>"><?=$color?></a>
<? endif ?>
</li>
<? endforeach ?>
</ul>
This will produce correctly indented HTML, while keeping order of both HTML and PHP in the template, making developer's life easer both at development and debugging.
Do not listen to anyone who says "no need to indent your code at all!". They are merely hobbyists, not the real developers. Anyone who have an idea of what debugging is, who had hard times debugging their code, would tell you that proper indentation is essential.
The answer could sound weird, but you should not worry about the generated code's indentation. Indentation is for readability, and should be only of concern on the programmer's side, not on the generated part (which is for browsers).
Edit: broke the code down into pages.
This code really only works with a template system.
Which can just be a basic:
// file: index.tpl.html
<html>
<head>
</head>
<body>
<div>Some header code</div>
<div>
{mainContent}
</div>
<div>Some footer code</div>
</body>
</html>
// file: functions.php
<?php
function pagination()
{
$output = "<ul>\n";
for($i = 1; $i <= 10; $i++)
$output = "\t<li>...</li>\n";
$output = "</ul>\n";
return $output;
}
function indent_html($html, $tag, $new_html)
{
// magic indenting code: finds how many spaces are used on the line above it
$spacePos = 0;
$find = strpos($html, '{'.$tag.'}' );
while( $html[ $find-$spacePos-1] == ' ' ) $spacePos++;
// Uses the indent from the line above to indent your new html
return str_replace("\n", "\n".str_repeat(" ", $spacePos), $new_html);
}
?>
// file: index.php
<?php
$html = file_get_contents("index.tpl.html");
// magic indenting code: finds how many spaces are used on the line above it
$spacePos = 0;
$find = strpos($html, '{mainContent}' );
while( $html[ $find-$spacePos-1] == ' ' ) $spacePos++;
// your pagination() needs to return html not output it
$mainContent = pagination();
$mainContent = indent_html($html, $tag, $mainContent);
// Uses the indent from the line above to indent your new html
$mainContent = str_replace("\n", "\n".str_repeat(" ", $spacePos), $mainContent);
// finally insert your html
$html = str_replace("{mainContent}", $mainContent, $html);
?>
Might need some modification if you want to use tabs instead of spaces.
I use spaces as it's more cross browser/application.
If you add \t in front of ul you should be able to see the code prettied up
<?php
function pagination(){
echo "\t<ul>\n";
for($i = 1; $i <= 10; $i++)
echo "\t\t<li>...</li>\n";
echo "\t</ul>\n";
}
?>
<div>
<?php pagination(); ?>
</div>
Most editors have some sort of formatting function which can be used to fix indentation. In Visual Studio for example you can hit Ctrl + K + D to nicely format your html.
I usually do it something like this if it's a more complicated html structure. This makes it easier to follow if you ask me, and you also can write your html normally instead of worrying about escaping quotes and things like that.
Since you're not in a PHP block when it's processing the HTML, it will come out as indented as you make it.
<?php
function pagination(){
echo "</ul>\n";
for($i = 1; $i <= 10; $i++)
{
?>
<li>...</li>
<?php
}
echo "</ul>\n";
}
?>
<div>
<?php pagination(); ?>
</div>
You could use heredoc syntax
<?php
$str = <<<EOD
Example of string
spanning multiple lines
using heredoc syntax.
EOD;
/* More complex example, with variables. */
class foo
{
var $foo;
var $bar;
function foo()
{
$this->foo = 'Foo';
$this->bar = array('Bar1', 'Bar2', 'Bar3');
}
}
$foo = new foo();
$name = 'MyName';
echo <<<EOT
My name is "$name". I am printing some $foo->foo.
Now, I am printing some {$foo->bar[1]}.
This should print a capital 'A': \x41
Notice all of the indenting is preserved.
EOT;
?>
The answer is, use templates.
If you properly separate your logic from your presentation, this question goes away. Your templates will have all the indenting or lack of indenting you want or need.
EDIT
Nonetheless, you can modify your code pretty simply:
<?php
function pagination($depth=0) {
$indent = str_pad("", $depth, "\t");
echo $indent."<ul>\n";
for($i = 1; $i <= 10; $i++)
echo $indent."\t<li>...</li>\n";
echo $indent."</ul>\n";
}
?>
<div>
<?php pagination(1); ?>
</div>
<div>
<div>
<?php pagination(2); ?>
</div>
</div>
Alternatively, you can just pass in the indent you want:
<?php
function pagination($indent="") {
echo $indent."<ul>\n";
for($i = 1; $i <= 10; $i++)
echo $indent."\t<li>...</li>\n";
echo $indent."</ul>\n";
}
?>
<div>
<?php pagination("\t"); ?>
</div>
<div>
<div>
<?php pagination("\t\t"); ?>
</div>
</div>
I am a stickler for well formed code as well. Alot of people here said "firebug will indent your code for you". Well, what about when the markup delivered to the browser is modified through or injected into the DOM via javascript? Then firebug shows you the current state, not what you loaded from the server.
I also like my html to be visible and readable throughout my script. I generally do something like this, keeping track of PHP and HTML indentation separately (it is not to be able to put your cursor on an opening tag or { and just scroll the page down until you find the closing tag or } conveniently lined up with your cursors position.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Hello</h1>
<div><?php
$thelist = array('Red', 'Green', 'Blue', 'Black');
echo '
<ul>';
foreach ($thelist as $color) {
echo '
<li>' . $color . '</li>';
}
echo '
</ul>';
?>
</div>
</body>
</html>
This outputs just like so,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Hello</h1>
<div>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Black</li>
</ul>
</div>
</body>
</html>
Notice is looks just like it should, and like it does in the script (this makes debugging simple for me). I use single quotes with HTML so I do not have to escape a trillion quotes (this makes concatenating strings a bit more manual but it is less work than all those back slashes; which also hinder readability within the script).
Once again, this is just how I do things and may not be the ideal way to handle formatting HTML. I just like to have my HTML nice and neat even when its mixed with PHP
