I've been painfully aware that the formatting of the HTML output of the Drupal sites we've been building are not up to the high standards we set for ourselves here at Freestyle Systems. The pages do validate against XHTML 1.0 Strict but Drupal doesn't make it easy for the developer to format the final HTML code that's output to the browser in a neat and tidy fashion.
The problem is due to a little side effect of the theme system. If you indent the code in your template files, the theme functions responsible for outputting parts of the code do not respect the indentation you've used in your template files.
Of course you can, with a little work, remove indentations from your template files and override specific theme functions to obtain a "flattened" output (devoid of any indentations) but it's a bit of pain to achieve something that should be easy and beautiful output is impossible.
Here's an example from Garland in Drupal 6:
Default Output:
HTML page size: 5.6Kb
<body class="sidebar-left">
<div id="header-region" class="clear-block"></div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater">
<h1><a href="/beautify/" title="Beautify"><img src="/beautify/themes/garland/logo.png" alt="Beautify" id="logo" /><span>Beautify</span></a></h1> </div>
</div>
<div id="sidebar-left" class="sidebar">
<div id="block-user-1" class="clear-block block block-user">
<h2>psynaptic</h2>
<div class="content"><ul class="menu"><li class="leaf first"><a href="/beautify/users/psynaptic">My account</a></li>
<li class="leaf last"><a href="/beautify/logout">Log out</a></li>
</ul></div>
</div>
</div>
Using htmLawed's Beautify Method:
HTML page size: 6.0Kb
<body class="sidebar-left">
<div id="header-region" class="clear-block">
</div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater">
<h1><a href="/beautify/" title="Beautify"><img src="/beautify/themes/garland/logo.png" alt="Beautify" id="logo" /><span>Beautify</span></a></h1>
</div>
</div>
<div id="sidebar-left" class="sidebar">
<div id="block-user-1" class="clear-block block block-user">
<h2>psynaptic</h2>
<div class="content">
<ul class="menu">
<li class="leaf first"><a href="/beautify/users/psynaptic">My account</a></li>
<li class="leaf last"><a href="/beautify/logout">Log out</a></li>
</ul>
</div>
</div>
</div>
Using the Built-in Flatten Method:
HTML page size: 5.2Kb
<body class="sidebar-left">
<div id="header-region" class="clear-block"></div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater">
<h1><a href="/beautify/" title="Beautify"><img src="/beautify/themes/garland/logo.png" alt="Beautify" id="logo" /><span>Beautify</span></a></h1></div>
</div>
<div id="sidebar-left" class="sidebar">
<div id="block-user-1" class="clear-block block block-user">
<h2>psynaptic</h2>
<div class="content"><ul class="menu"><li class="leaf first"><a href="/beautify/users/psynaptic">My account</a></li>
<li class="leaf last"><a href="/beautify/logout">Log out</a></li>
</ul></div>
</div>
</div>
As you can see, there is a big improvement in appearance between the default and processed outputs.
Using the flatten method reduces the HTML file size and would mean a small saving of bandwidth on a busy site. There is also a "compact" method for which I did not give an example, it doesn't cut down on the file size any more than the flatten method so isn't recommended unless you wish to obfuscate your HTML.
For small sites that don't get many visitors I will be using the beautified output and for those sites that need an extra performance tweak I'll be using the flattened output.
It's worth noting that this works with Drupal's page caching system and for performance reasons it's best to only serve the processed HTML to anonymous users. Otherwise the processing would be run on every page load.
You can find more information on the Beautify module on the project page.
Bookmark/Search this post with:
Well written and informative
I did not know about this module (and probably many more) Interesting and well written. Keep those module reviews coming :) Have you thought about posting something on drupalmodules.com?
Thanks!
Thanks for your comment, much appreciated.
I've not yet thought about drupalmodules.com. I guess some people do use it and maybe I should put something up there too.
Is this really useful?
I must admit that I find it hard to understand why you'd want to introduce extra processing and thus latency on your pages just to make the code look prettier.
If you want to see a nicely formatted tree of your HTML, Firebug should never be more than a few clicks away (and if I may add, it's a lot more useful besides pretty-printing the HTML).
Only if beauty is useful
I'm firmly in the camp of freaks that will sacrifice a bit of performance to make a drupal website's source code *look* beautiful. Its snobby and shallow, sure, but come: drupal could use more snobby shallow people to give it a facelift. Think of it as bait.
I think so
I know Firebug well and could not live without it.
It's just an aspect of the sites we build that I haven't been all too happy with. I really don't want my HTML output looking as sloppy as it does, it gives the wrong impression to anyone who looks. I've had companies audit my HTML code to see if I have high standards when considering me for projects so I do think something that's publicly viewable is important enough to justify a small amount of additional processing, especially when it's cached and can reduce the HTML file size in the flatten or compact modes.
This is something that you would only run for anonymous users so the first time the page is viewed the processed output is stored in the page cache and from then on Drupal would retrive that cache and serve that without running the processing and introducing no latency whatsoever.
It also has other features like fixing and/or warning about bad markup, removing or cleaning up MS Word proprietory tags/characters, and a few other things someone might find useful.
I do see your point in the context you convey it but I've had a numner of people in the Drupal community say they are intested in the module so it must be useful to someone, including myself.
I will be adding in the future a UI for user regex search/replace so I can, for example, fix bad markup introduced by WYSIWYG editors. A simple example would be to replace
<span style="font-weight:bold">Text</span>with<strong>Text</strong>etc.Good points
especially the audit one - and I am so glad to read about the removal of all that M$ word junk - what a royal pain.
Nice one big R!
Thanks for the writeup
Thanks,
I was just searching the drupal forums for something like this and then did a Google search. I had seen the module previously, but didn't realize it would work for my purposes.
To answer the WHY question for my case. I'm building a site with lots of modules. They add tremendous cruft to the final HTML with class attributes like
class="odd zebra edit-form edit-form-content-type-profile edit-form-content-field-image edit-form-content-field-image-0 left"
And yet, in my final theme, I may simply be using the cascade to style those elements and most of those tags are useless cruft and a waste of bandwidth.
So basically, assuming I can get it to do what I want eventually, it would be like the gzip versus ASCII tradeoff - sacrifice a few processor cycles to reduce the bandwidth.
It's not a simple question as to whether or not it's worth it. That depends on where your bottleneck is, but with file-based caching like boost, I assume that the processor hit will happen only when the cached file expires, whereas the bandwidth hit will happen every page request (or every page request if you don't set Last Modified headers, but that's yet another question!).
Beautify versus HTMLawed
Followup - why would I choose Beautify over the HTMLawed module (since it currently says that Beautify only supports HTMLAwed and, in my case, that's what I'm after anyway)?
I understand that Beautify adds the Beautify, Flatten and Compact modes. Is there anything else it has or doesn't have that makes it better/worse, easier/harder than HTMLawed given the scenario I mention in the previous comment?
Thanks in advance for taking the time to answer!
The htmLawed module
The htmLawed module processes the content. Beautify processes the final page after it has been rendered by Drupal. Both methods have pros and cons.
I have it running on a couple of sites right now and it's working well. There are a few little issues to be ironed out but I've not had any spare time to work on this project recently. I was hoping someone might find it useful enough to donate some time.
Post new comment