Thread

Hi,

I’m becoming a fan of EE, but it hurts when I look at the generated HTML. It’s just not nice to look at with all those extra tabs and spaces that are a result of using a ‘logical’ indentation in the EE source files. I’ve looked for a plugin of module to ‘clean’ up the generated HTML, but it looks there’s nothing out there.

I’m wondering how you guys do this.
Roel

My templates use tabs and space that help me strcture it, but the rendered HTML? You are not going to work with it, so why do you care?

For two reasons:
- When styling my pages with CSS (or when I’m having a colleague doing that), it’s much easier to grasp the structure of the HTML when it’s nicely formatted. In some situations, Also, some rare CSS rendering bugs are the result of bad use of white space.
- Your ‘rendered’ HTML is very easily accessible by everyone who visits your web site (“View source”). I think it’s important to make sure it looks clean to make a ‘good impression’ 😊

You are not going to work with it, so why do you care?

For me, I care. I like clean, concise source.

Roel - Could you define what rendered code you are referring to…one’s template code controls most of that.

Well, I have a rather long piece of EE code (with lots of nested if tags and HTML <li> elements). My EE code is indented and ordered in such a way tot it makes sense to me when coding, but the HTML result has lots and lots of ugly tabs and new lines in it. It is valid, that’s not the problem, but it looks messy.

I wish there was a simple and easy way to use the HTML Tidy module from PHP as a plugin or something.

I sympathize, my template code is nice and clean, the rendered code is not. Drives me batty.

When styling my pages with CSS (or when I’m having a colleague doing that), it’s much easier to grasp the structure of the HTML when it’s nicely formatted.

Get Firebug.

In some situations, Also, some rare CSS rendering bugs are the result of bad use of white space.

Weird. Which ones?

Your ‘rendered’ HTML is very easily accessible by everyone who visits your web site (“View source”). I think it’s important to make sure it looks clean to make a ‘good impression’ 😊

Accessibility has absolutely nothing to do with whitespace in the source. And anyone that bases their impression of you on that rather than whether or not it is semantic and it validates has some serious priority issues.

My templates use tabs and space that help me strcture it, but the rendered HTML? You are not going to work with it, so why do you care?

Exactly! The most important thing is that your code is clean for you to look at while you’re working on it.

Get Firebug.

I’m a long time Firebug user. Thank you.

Weird. Which ones?

Just Google for ‘css whitespace bug’ and you’ll find out soon enough 😉

Accessibility has absolutely nothing to do with whitespace in the source. And anyone that bases their impression of you on that rather than whether or not it is semantic and it validates has some serious priority issues.

I’m not talking about ‘accessibility’ in the sense you’re referring to (I don’t need any lessons on that; I work as a full time web accessibility consultant). All I wanted to say is that *I* want my source code to look clean and spotless to anyone who cares to have a look at it and that EE currently prevents me from achieving this.

Exactly! The most important thing is that your code is clean for you to look at while you’re working on it.

True, but for me, the rendered result is important as well. I guess we have different priorities 😉

Fair enough… I see your point.

If possible, maybe someone should write an extension that runs all templates’ HTML output through Tidy before being sent off.

The most important thing is that your code is clean for you to look at while you’re working on it.

Ya but only a geek accepts messy “rendered” code. 😉

If possible, maybe someone should write an extension that runs all templates’ HTML output through Tidy before being sent off.

Movable Type has something like this: TidyText

RoelVG: You’ve probably always hand-coded your HTML, being careful to space things out logically. Am I right?

I feel you. You can do a transformation using XSL XML transformations (enforces white-space rules element, forcing you to go with XHTML). That’s a lot of work to go through, though, for easy-on-your-eyes markup.

Blame the problem on the efficiency of templates… 😊

One strategy I use is to left-adjust-to-margin everything that is embedded in a template and use HTML section commenting ALOT (before and after, like <!—Start PAGE_HEADER—> <!—End PAGE_HEADER—>).

For Tidy, you could just use the Firefox HTML Tidy add-on (extension!):

https://addons.mozilla.org/en-US/firefox/addon/249

And as for *needing* pretty whitespace, I say, “Walk a mile in a man’s shoes…” 😊

For Tidy, you could just use the Firefox HTML Tidy add-on (extension!)

Umm…. no. I’m talking about on the server-side.

Umm…. no. I’m talking about on the server-side.

Once installed, right-click on the Tidy icon on the bottom statusbar, select “cleanup”, set your indent to the spacing you prefer (2 is default), and hit refresh.

You can also set accessibility (1, 2, or 3, depending on the requirement) options through the options page. You can also select the validator (Tidy, SGML, serial). In combination with a doctype and Firefox (I use XHTML so my markup is tight), it works great.

In some cases this is better than the server transformation, as you do not need to apply it as overhead to every page for every page request per *customer*, as opposed to just the one person (designer).

If you NEED that functionality (for accessibility reasons), then obviously it will not work for this need, and you will need a server transformation.

I don’t know what the um no is about, but I think that Yes, it does work.

😊

EDIT:

Here is a link to the PHP docs on the HTML Tidy:

http://www.php.net/tidy

In the first example (scroll way down the page), you’ll see how easy it is to use, and see the indent=true config setting passed in the array, which *should* mean it would be simple to implement in the core if certain procedures were met.

Not that it would turn out to be easy…! 😊

The server will need to support HTML Tidy through a library extension installed on the server, and maybe PEAR (although I don’t know about that).

In some cases this is better than the server transformation, as you do not need to apply it as overhead to every page for every page request per *customer*, as opposed to just the one person (designer).

But that’s exactly the issue that this thread is about—finding a way to clean up the HTML for everybody.

And no, it would not be a significant overhead, assuming you’re caching your pages and validation is disabled.