Geek Answers Handbook

HTML Indentation in the mVc World

Here is the question that has been listening to me for a while, it is currently considered good practice to indent HTML code, but I have indentation code for reservation in the MVC template, here is an example (silly):

HTML code:

<!DOCTYPE html> <html> <head> <title>Testing MVC Indentation</title> </head> <body> <?php View('h1', 'I am a Level 1 Header'); ?> <table> <tr> <td> <?php View('h1', 'I am a Level 1 Header Inside a Table'); ?> </td> </tr> </table> </body> </html>

To backtrack correctly, the first call to the h1 (or partial) view should return:

 \t<h1>I am a Level 1 Header</h1>

While the second view call to h1 should return:

 \t\t\t\t<h1>I am a Level 1 Header Inside a Table</h1>

However, the representation of h1 has no idea about the indentation area, since in hell can it return the data properly indented? In addition, ignoring indentation in views can reveal part of the application logic (check the HTML source code of this page after <div id="content"> for an example in the real world):

 <body> <h1>I am a Level 1 Header</h1> <table> <tr> <td> <h1>I am a Level 1 Header Inside a Table</h1> </td> </tr> </table> </body>

Indentation does not solve all problems at all, but it also makes reading and maintenance difficult:

 <body> <h1>I am a Level 1 Header</h1> <table> <tr> <td> <h1>I am a Level 1 Header Inside a Table</h1> </td> </tr> </table> </body>

The only possible solution that I see in this problem is to use Tidy and output buffering , but I wonder if it's worth it, as this will make processing and loading unnecessarily (?) Slow. In addition, this will not simplify the maintenance of HTML code, since it only gives indentation, not the source.

I apologize for the "basic" question, but in recent years I have been focusing on business logic, and I was not connected with the world of presentations - in the good old days, my HTML code was completely biased, but again I also used spreadsheets to design the layout - just trying to catch up now.

Any solutions / ideas on this?

Matters Related:

  • Are you backing away from your HTML?
  • Are you creating beautifully formatted HTML?
  • How to indent PHP / HTML mixed code?
+6
html php indentation model-view-controller tidy
source share
5 answers

As already mentioned, there is a difference between indenting the source code and indenting the output. The indentation of the source code may differ 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 must first focus on this! Usually indenting HTML output is not a problem.

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

Use a template language that can correctly indent output

One example of the first is Haml , a template language for Ruby. It accepts the following pattern:

 %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 in HTML format similar to your example, everything is indented correctly.

One of the obvious drawbacks of this approach is that you do not actually write HTML in your templates, you write in another language with HTML-like semantics. This can be a problem, depending on who will support the submission.

Remove all extra spaces from the output, don't back down at all

Some template languages ​​have options for removing all extra spaces. Smarty for PHP has a scroll scroll plugin that does the job, for example. He is fully working on the problem of color rendering at the output, specially creating the same without distortion for all the output data. It also saves very little bandwidth.

The only solution for PHP would be to use ob_start() with its $output_callback handler (which is documented here ). You can write a simple callback that removes extra spaces similar to the Smarty plugin. Unlike using Tidy in an output callback, it will still allow you to flush the buffer to the end of the page to speed up long / slow pages.

+4
source share

I would say that there is a difference between HTML and indentation of the source code. In a typical MVC View, you use the source code, which, it seems to me, should be indented in a readable form.

The actual HTML output is completely different. Of course, randomly indented the source looks like unprofessional (so sometimes I just just delete any indentation in general, but this is usually due to the fact that you talked about some processing of HTML messages), but for the browser itself, if it does not matter at all, and if I really need to look at the source that I will use for formatting or Firebug, which will display all the DOM elements in a well-formatted form.

+5
source share

Sorry for adding a third answer! It has been a while, and I would prefer to add an answer, please do not miss me for this. I just think it should be said here:

This seems to work, and also has two different indentation “streams”, one for PHP and one for HTML:

 <table> <?foreach($list->sections as $sKey => $section) { ?> <tr><td><h4><?= $section->label ?></h4></td></tr> <? foreach($section->items as $iKey => $item) { ?> <tr><td><?= $item->label ?></td></tr> <? } ?> <?} ?> </table>

Always having the beginning of the php tag at the beginning of the line and the indentation inside the php block code, the resulting code remains clean:

 <table> <tr><td><h4>Books 1</h4></td></tr> <tr><td>Some Book</td></tr> <tr><td>Some Other Book</td></tr> <tr><td><h4>Books 2</h4></td></tr> <tr><td>Some Book in List 2</td></tr> </table>

And the indentation logic of PHP and HTML is stored in the source file, although each one is.

+3
source share

I think that one can come up here to track the indentation.

Perhaps I believe that it is correct to indent PHP and correctly indent HTML at the same time, but the code should be written to handle this, either as an extension of PHP, or a library (which is much less elegant and efficient).

My first assumption would be that PHP will track the indentation of the HTML code, and when a new line is printed, resume at the previous level of indentation, as if what most IDEs do when entering input. The PHP programmer can take control of this with such functions (I'm just doing it now):

  • tab ($ n): move the tab of the indentation level $ n to the right (add tabs $ n)
  • detab ($ n): remove tabs $ n from the indent level
  • stop (): stops the indent. no tabs will be added to the output. this is useful for HTML PRE tags.
  • resume (): indents for resumes at the previous level after stopping ().
+1
source share

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

I can also add an argument to the functions that generate the HTML to make them an example of "indent aware":

 buildSomeHtmlList($data, $indent=0)

This results mainly in the indentation of HTML, and it suits me.

BTW, in your example, this is not what should happen, AFAIk, H1 inside the table should be indented correctly, as a rule, since the PHP output starts with "<?", After which the tabs have already been printed.

+1
source share

More articles:


All Articles