We're a Web Design and Drupal Development company based in Middlesbrough, UK. We specialise in easy to use Content Management Systems and E-commerce websites.

Drupal Beautify Module Released

9Jan2009
Picture for psynaptic

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.

Posted by psynaptic

Comments

Well written and informative

Picture for Rob Lowe

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?

Posted by Rob Lowe
5 years 33 weeks ago

Thanks!

Picture for psynaptic

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.

Posted by psynaptic
5 years 33 weeks ago

Is this really useful?

Picture for Mikkel Høgh

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).

Posted by Mikkel Høgh
5 years 33 weeks ago

Only if beauty is useful

Picture for Nick Lewis

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.

Posted by Nick Lewis
5 years 33 weeks ago

I think so

Picture for psynaptic

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.

Posted by psynaptic
5 years 33 weeks ago

Good points

Picture for mysty

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!

Posted by mysty
5 years 32 weeks ago

Thanks for the writeup

Picture for Tom

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!).

Posted by Tom
5 years 25 weeks ago

Beautify versus HTMLawed

Picture for Tom

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!

Posted by Tom
5 years 25 weeks ago

The htmLawed module

Picture for psynaptic

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.

Posted by psynaptic
5 years 24 weeks ago

caching

Picture for Boris Gordon

How does processing the output of the whole page effect caching in drupal?

Posted by Boris Gordon
5 years 5 weeks ago

It actually works with

Picture for psynaptic

It actually works with caching by processing the page before it is stored in the cache. The next time it is needed, the page is retrieved from the cache.

Posted by psynaptic
5 years 5 weeks ago

Sometimes all these replica

Picture for GeorgeLoMe

Sometimes all these replica plastic bags are so excellent that possibly eagle view may unable to separate replacement bags belonging to the native.

http://www.sudoexec.net/ニューバランス-new-balance-new-balance-576-japan-1_13.html
http://www.sudoexec.net/人気-new-balance-cm1600lt-barber-shop-pack-ニューバランス-c-jp-7675.html - ニューバランス CM1600
http://www.sudoexec.net/人気-new-balance-ml999cra-elite-edition-ニューバランス-ml99-jp-7328.html - ニューバランス ML999

ÿþ; 4lÜfåeo0š[Oåeh0j0Š0~0Y0ºp0FUÁTn0zvþ[Ü_I{o0úQeg~0[0“00; T0èla

http://www.goldstarengines.com/コーチ-アウトレット-coach-財布f4842-シグネチャ&#1254;-ベイトン-ジップアラウンド長財布s-jp-14471.html - アウトレット COACH
http://www.goldstarengines.com/コーチ-財布-japan-3.html - コーチ 財布
http://www.goldstarengines.com - コーチ 財布
http://www.goldstarengines.com/コーチ-coach-ト&#1254;トバッグf24882-シグネチャー-ストライプ-パイソン-キャリーオールBk-jp-13810.html - コーチ ト&#1254;トバッグ

http://www.neltarkandwillie.com/送料無料casio-basic-analogue-mens-カシオ-ベーシック-アナログ-メンズ-m-jp-2316.html - カシオ ベーシック アナログ メンズ MW-600F-9A 腕時計 MW-600F-9AVCF MW-600F-9AVDF MW-600F-9AVEF
http://www.neltarkandwillie.com/送料無料timex-ironman-10lap-midsize-タイメックス-アイアンマン-10ラッ-jp-610.html - タイメックス アイアンマン 10ラップ レディース T5K526 腕時計 ランニングウォッチ ブラック 黒 ブルー 青 T5K526
http://www.neltarkandwillie.com/送料無料casio-basic-analogue-ladys-カシオ-ベーシック-アナログ-レディー-jp-2776.html - カシオ ベーシック アナログ レディース LTP-1330-4A1 腕時計 時計
http://www.neltarkandwillie.com/送料無料casio-basic-analogue-ladys-カシオ-ベーシック-アナログ-レディー-jp-2365.html - カシオ ベーシック アナログ レディース LQ-139E-7A 腕時計 LQ-139EMV-7ALCF LQ-139EMV-7ALDF LQ-139EMV-7ALEF

http://www.vitaminhaifa.com/トリーバーチ-tory-burchprinted-mini-tory-beach-toteキャンバス-jp-6975.html - トリーバーチ トートバッグ
http://www.vitaminhaifa.com/トリーバーチ-ショルダーバッグ-japan-10.html
http://www.vitaminhaifa.com/プラダ-pradajpgsaffiano-luxカーフスキン2way-ハンドバッグbl0838nzv-jp-7112.html - プラダ ハンドバッグ
http://www.vitaminhaifa.com/トリーバーチ-tory-burchamanda-hoboレザー-2way-ショルダーバッグ50009-jp-6977.html - トリーバーチ 2way ショルダーバッグ

http://www.aashbooksplus.com/ケイトスペード-kate-spade-財布-ケイト-スペード-長財布-ラウンドファスナー長財布-ケイ-jp-7936.html - ケイトスペード 財布
http://www.aashbooksplus.com/ケイトスペード-バッグ-kate-spade-pxru2233-698-cobble-hill-el-jp-8026.html - ケイトスペード バッグ
http://www.aashbooksplus.com/ケイトスペード-サングラス-レディース-kate-spade-aldafs-r34-ブラックグレーシ-jp-7879.html - ケイトスペード サングラス
http://www.aashbooksplus.com/ケイトスペード-リュック-japan-13.html - ケイトスペード リュック

Posted by GeorgeLoMe
9 weeks 3 days ago

Add comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <drupal5>, <drupal6>, <html>, <js>, <php>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Recent Clients

Drupal Developer Reference

Screenshot of DrupalContrib API

DrupalContrib API was created by Freestyle Systems for Drupal developers who need access to reference documentation for Drupal's most popular contributed modules.

If you're a Drupal developer you'll no doubt find our resource invaluable!

Drupal Association

Drupal Association Organization member