ansaurus

Question

Answer 1

+4 A:

I would say, that there is a difference between HTML and Source Code Indentation. In a typical MVC View you use source code which I think should be indented in a readable fashion.

The actual HTML output though is a different thing. Of course chaoticly indented source looks kind of unprofessional (this is why I sometimes tend to just remove any indentation at all but that usually involves as you said some HTML post processing), but for the Browser itself if doesn't matter at all and if I really need to view the source I will use a formatter or Firebug which shows all DOM elements in a nicely formatted way.

Daff 2010-02-20 13:46:31

+1: The browser doesn't care. "disclose part of the application logic" doesn't make sense. What -- specifically -- is being disclosed? The fact that some parts aren't indented? How is that interesting?

S.Lott 2010-02-20 13:49:26

@Daff: I'm confused. You think HTML code *shouldn't* be indented? If so, that doesn't require any HTML post processing (you just have to refrain from using indentation in the first place). Also, if you can please take a look at the related questions I added in my question.

Alix Axel 2010-02-20 14:48:15

What I meant was to remove the indentation that may be caused by a formatted View Sourcecode with some kind of HTML postprocessor. I agree with the accepted answer of http://stackoverflow.com/questions/304055/do-you-generate-nicely-formatted-html question

Daff 2010-02-20 15:04:44

@S.Lott: I know the browser doesn't care, but indentation helps while coding HTML. What I meant from "disclose part of the application logic" is that if you indent the *static* HTML code all the code that is in views (the *dynamic* HTML) will be pretty easy to notice. It isn't a security vulnerability or anything like that, it's just a disclosure of where you used views. IMO it's similar of using form inputs with the same name as your database columns.

Alix Axel 2010-02-20 16:20:48

@Daff: I see, until now I've never indented HTML code but I've noticed that it's much easier to understand indented HTML code. Also most code editors support code folding when HTML is indented.

Alix Axel 2010-02-20 16:23:37

@Daff: I don't get the difference you mentioned between HTML and Source Code Indentation, could you please give me a simple example of both?

Alix Axel 2010-02-20 16:30:03

Source code indentation is using indentation in the code that you are actually writing. HTML indentation is using indentation in the output that the browser receives. These aren't always the same as you can have your source code indented to follow the flow of your source code, but the actual output code might not follow that at all (as your original question states).

Blair McMillan 2010-02-20 17:12:42

Answer 2

+2 A:

As mentioned there is a difference between source code indentation and output indentation. The indentation of the source code can be different from the indentation of the output, because the output is constructed dynamically. When writing templates, the readability of the source code is most important. You should focus on that first! Usually the HTML indentation of the output is a non-issue.

Having said that, two practical approaches to get rid of indentation mismatch in your output:

Use a templating language that can properly indent the output

One example of the first is Haml, a templating language for Ruby. It takes a template like this:

%body
  %h1 I am a Level 1 Header
  %table
    %tr
      %td
        %h1 I am a Level 1 Header Inside a Table

The output will be neatly formatted HTML similar to your example, all properly indented.

One obvious disadvantage of this approach is that you're not really writing HTML in your templates, you're writing in a different language with HTML-like semantics. This can be a problem, depending on who will maintain the views.

Strip all superfluous whitespace from the output, don't indent at all

Some template languages have options to remove all superfluous whitespace. Smarty for PHP has a whitespace trimming plugin that does this job nicely, for example. It completely works around the output beautification problem by purposely making all output equally non-indented. It also saves a very marginal amount of bandwidth.

A PHP-only solution would be to use ob_start() with its $output_callback handler (which is documented here). You can write a simple callback that strips the excessive whitespace, similar to the Smarty plugin. Contrary to using Tidy in the output callback, this will still allow you to flush the buffer before the end of the page to speed up long/slow pages.

molf 2010-02-20 15:08:27

I'm sorry but I didn't get the source code indentation vs output indentation point, care to give a example? As for Haml, I've heard of it before but I want to stick to pure HTML (and CSS for that matter), besides it would probably cause the same overhead of a Tidy output handler.

Alix Axel 2010-02-20 16:27:46

@Alix, I'm not sure why you presume that Haml would incur overhead similar to using Tidy. Haml will not parse the HTML, it will only parse the template. For HTML-only solutions, your best bet is to remove whitespace altogether (2nd option).

molf 2010-02-20 16:38:04

@molf: If I understand correctly, you're suggesting I should indent my HTML source code but strip all whitespace from the web server output with Smarty (or similar)?

Alix Axel 2010-02-20 16:44:34

@Alix, exactly; you can do it with pure PHP (no Smarty) as well, see the updated answer.

molf 2010-02-20 16:47:37

@molf: Thanks, seems like the only way to archive a *clean* solution while having nicely indented HTML code is to allow some kind of overhead (`ob_*()`, Tidy, Smarty, HAML, ...).

Alix Axel 2010-02-20 16:52:42

Correct. Focus on getting your source code indented correctly, and then if you care about the outputted HTML, then either remove all of the indentations, or run it through something to output it how you want. From what you've said so far, take the (small) hit and run it through Tidy.

Blair McMillan 2010-02-20 17:15:56

Answer 3

+1 A:

I think something can be invented here to keep track of indenting.

It is possible, I believe, to have properly indented PHP and properly indented HTML at the same time, but code needs to be written to handle that, either as a PHP extension or a library (which is much less elegant and efficient).

My first guess would be for PHP to keep track of the indentation of the HTML, and when a new line is printed, resume at the previous level of indentation, sort of what most IDE's do when you type enter. The PHP programmer can be given control over this with the functions like these (I'm just making this stuff up right now):

tab($n) : move the indentation level $n tabs to the right (add $n tabs)
detab($n) : remove $n tabs from the level of indentation
stop() : stops indentation. no tabs will be added to output. this is useful for HTML PRE tags.
resume() : resume indentation at the previous level after a stop().

Rolf 2010-08-31 03:45:40

Answer 4

+1 A:

What I sometimes do is use \t in double-quoted strings for some basic indentation of HTML. It helps me debug stuff. Also, I keep the HTML inside templates as much as possible, even if it means riddling my templates with foreach loops. In the template (known as "view" in MVC), the PHP code indentation usually follows the HTML code.

I might also add an argument to functions that generate HTML, to make them "indent aware" example:

buildSomeHtmlList($data, $indent=0)

That results into mostly indented HTML, and that suits me.

BTW, in your example, this is not what is supposed to happen, AFAIk, the H1 inside the table should be properly indented, normally, since the PHP output starts at "<?", at which point the tabs have already been printed.

Rolf 2010-08-31 03:54:17

ansaurus

tags:

views:

answers:

HTML Indentation in the mVc World

Use a templating language that can properly indent the output

Strip all superfluous whitespace from the output, don't indent at all

related questions