This is a read-only archive. Find the latest Linux articles, documentation, and answers at the new Linux.com!

Linux.com

Feature: Reviews

KompoZer revives Mozilla WYSIWYG Web editing software

By Nathan Willis on October 01, 2007 (9:00:00 AM)

Share    Print    Comments   

In proprietary software, Web page design is dominated by Adobe's Dreamweaver and Microsoft's FrontPage. Free software users have witnessed the rise and fall of several Web design apps, but it has been a while since a new one debuted. Now the next new release is here -- KompoZer, heir to the Mozilla Composer legacy and updated for today's technology.

If you are old enough, you may remember the Mozilla Application Suite that preceded standalone Firefox and Thunderbird. The Mozilla suite featured an integrated browser, email/news client, IRC chat client, and HTML page editor. When the Mozilla Foundation officially stopped developing the suite in 2003, the first three components lived on in Firefox, Thunderbird, and ChatZilla. Composer, the editing component, was left out in the cold until Linux distributor Linspire contracted with the developers at Disruptive Innovations to rework the old codebase into a modern Web design tool they named Nvu.

In 2006, Disruptive Innovations announced that work on Nvu had stopped with the release of 1.0, and the code would be turned over to the community for maintenance.

KompoZer is the result. But rather than a mere maintenance project, it is an actively developed application with its own identity and goals. The just-released version 0.7.10 marks the culmination of more than a year's work, and introduces several new features.

You can download KompoZer binaries for Windows, Mac OS X, and Linux. Linux users can choose between tar, RPM, and DEB packages for Intel hardware. The RPM packages are reported to work on Red Hat, Fedora, and Mandriva, and the DEB packages on Debian and Ubuntu. Source code is also available.

Basic editing

KompoZer developer Fabien Cazenave has laid out a release roadmap for the editor. The 0.7.x series focused on two tasks -- merging in outstanding bug-fixes left over from the abandonment of Nvu, and completing an integrated CSS editor named CaScadeS.

The basic layout of the application has remained the same. A Site Manager occupies left-hand sidebar, essential HTML editing tools reside in toolbars at the top, and opened files fill the bulk of the main editing window. Text markup tools function just like those in a word processor, while common HTML elements like images and tables are inserted with the assistance of pop-up windows.

KompoZer can keep multiple files open in one window via the use of Firefox-style tabs; once you work with a tab-enabled version of the app you will wonder how you ever got along without them. You can select either HTML 4 or XHTML 1 as your working language from Tools -> Options; the choice is application-wide. Similarly, you can work in either the Transitional or Strict Document Type Definition.

You can view and edit pages in four modes: Normal, Tags, Source, and Preview. Preview renders the page with Mozilla's Gecko layout engine, Source displays it in a line-numbered, syntax-highlighted form similar to most programmers' editors. Normal and Tags modes are both WYSIWYG, the distinction being that Tags mode overlays yellow labels on top of the page contents for otherwise invisible HTML tags such as <center>, <font>, <tr>, and <td>.

Comments appear as overlaid labels in both Normal and Tags mode. Why this is is not explained, but since the overlays shift around other elements and text on the page, it means that Normal mode is not quite WYSIWYG if your page includes any comments.

The status bar at the bottom of the window is used to display a "breadcrumb" trail of open tags -- <body> <div> <p> <a>, for example. This helps you keep track of active elements while in WYSIWYG mode. The breadcrumbs themselves are buttons; clicking on one selects the element and its contents in the editor window, and right-clicking brings up a property editor for the tag.

The top and left margins are used for automatic rulers; when the cursor is inside a page element with width and height attributes, the vertical and horizontal projections appear in the margins, labeled with their exact measurements. You can grab handles on the extremes of each projection and resize them with the mouse. This is particularly helpful with tables, because the entire table and not just the active cell is so measured and labeled.

KompoZer has a built-in, check-as-you-type spell-checker, and one-click access to the World Wide Web Consortium's HTML Validator service.

Cascading Style Sheets

The highly anticipated CSS editor is without doubt KompoZer's most important new addition. Its name is CaScadeS, a fact that the end user should not need to know, except that its button is labeled CaScadeS on the toolbar. The next release would do well to shorten the label to CSS.

CaScadeS pops up in a separate window. A column on the left side is automatically populated with any CSS rules attached to the current page (from both external stylesheets and in-line style definitions). You can add additional rules and stylesheets from the drop-down menu above the list.

For stylesheets, the left column functions as a click-to-expand tree that can expose all of the stylesheet's definitions. To edit any included rule, you simply select it in the list, and its attributes appear in the right pane of the editor. In the right pane, the General tab displays the text of the rule definition as it appears in the file.

Additional tabs separate out all of the possible style attributes for the element in appropriate forms -- drop-down boxes for finite options like font weight, numeric spinboxes for quantitative options like border widths, and so on.

If a style attribute is not defined in the selected rule, it will appear as undefined in the forms. Be careful, though, because CaScadeS will insert a definition for every attribute that you touch in the form, even if you set it back to its original undefined state. This behavior is not likely to become enough of a problem to result in "CSS bloat," but it does hearken back to the days when WYSIWYG HTML page editors filled pages with scores of redundant <font> and <br> tags.

On the whole, I found KompoZer's CSS editing functionality easy to use. The tabs separating out the various attributes can be confusing at first, but that is largely because CSS is so broad. How many people can tell you the difference between the border, margin, padding, and offset attributes, after all?

My only real complaint with the editor is how it interacts with the main editing window. Although most pop-up assistants (for things like image and table insertion) are transient windows, the CSS editor is modal, meaning that while is it open you cannot type in or interact with the main window.

Even apart from the potential confusion brought on my having two pop-up windows behave in different ways, the modal status of the CSS editor makes it harder to use. Changes you make in the CSS editor take effect immediately in the page editing window -- which is good -- you want to see how they look. But because the CSS editor window is modal, you cannot scroll around the page editor window, and your instant visual feedback is limited to just those contents you can see when you first click the CaScadeS button.

More to come ... probably

Cazenave's broad roadmap for KompoZer is to revamp the Site Manager in the 0.8.x series, then eliminate as many reformatting bugs as possible in the 0.9.x series.

The current incarnation of the Site Manager is pretty bare-bones -- no support for SFTP or WebDAV, for example. Cazenave's posts on the KompoZer forum indicate that he is working on new Site Manager code that comes from the FireFTP project.

Beyond those two milestones, nothing is set in stone. Users have requested features like frames and integrated PHP support (you can already manually insert blocks of PHP), but Cazenave has intentionally not promised anything for the long term. I consider that a wise move, especially for a project run entirely on volunteer time.

Shortly after orphaning the Nvu codebase in 2006, Daniel Glazman of Disruptive Innovations announced that he was starting over on yet another HTML editor, this time to be based on Mozilla's XULRunner. A year later, there is still no public release and very little news on this effort, so KompoZer remains the most capable free software HTML editor.

Where either project will be a year from now is anybody's guess -- although the same is true for Dreamweaver and FrontPage. Five years ago, most sites began life in an HTML editor; today most begin in a templating system, a PHP app, or an AJAX library.

Web technology moves quickly. Firefox can keep up because of its deep pockets and vast developer resources, neither of which KompoZer has access to. But that is no reason to count KompoZer out. Its development team has done an excellent job of picking up where Nvu stopped, and producing a powerful, easy-to-use Web editing app that feels right at home alongside Firefox, Thunderbird, and the other Mozilla suite alumni.

Share    Print    Comments   

Comments

on KompoZer revives Mozilla WYSIWYG Web editing software

Note: Comments are owned by the poster. We are not responsible for their content.

KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 217.208.65.12] on October 01, 2007 11:41 AM
"[...] KompoZer remains the most capable free software HTML editor."


Personally, I would give that honor to KDE's Quanta. KompoZer might be the best free software WYSIWYG editor though -- and I do remember using Mozilla's Composer for quick edits back in the day (which is arguably it's greatest strength). With that in mind, I have no doubt it will be warmly welcomed by the community. Also, I think It would be interesting to see KompoZer returned to it's roots and once again become an official Mozilla project, that way it would get a lot more exposure.

#

Re: KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 72.236.163.214] on January 10, 2008 07:50 PM
Agreed...it could used the additional exposure certainly.
<a href="http://www.javasigns.com/decals">custom window stickers</a>

#

What does this bloatware do that vim does not?

Posted by: Anonymous [ip: 169.233.25.226] on October 01, 2007 04:16 PM
Does this software do anything that which I can not do with vim + shell?

#

Re: What does this bloatware do that vim does not?

Posted by: Anonymous [ip: 85.1.119.170] on October 01, 2007 05:22 PM
Well it could probably help your mum to design a html page...who knows?

#

Re: What does this bloatware do that vim does not?

Posted by: Nathan Willis on October 01, 2007 10:42 PM
Yes; it allows you to see what you're working on.

#

Re: What does this bloatware do that vim does not?

Posted by: Anonymous [ip: 71.131.194.7] on October 04, 2007 12:54 AM
Look, we're sorry that's it's over for VIM and EMACS, we really are. Please keep using your favorite editor but stop hammering on everything else. Plenty of people have no desire whatsoever to learn all the BS to use old tools, and for them KompoZer and others are better choices. We all thank you in advance :P

#

Re(1): What does this bloatware do that vim does not?

Posted by: Anonymous [ip: 67.91.239.99] on October 04, 2007 09:48 PM
KompoZer is quite buggy for a wysiqyg. I find it easier just using any other text editor.

#

Re(1): What does this bloatware do that vim does not?

Posted by: Anonymous [ip: 212.0.118.226] on October 05, 2007 09:08 AM
Over? Then you don't know how to use EMACS. It's still the best editor as of today (vi might be for others) and anybody that says otherwise it is because he/she doesn't know how to use it. As for editing HTML, XML, CSS, .... emacs works great! The only drawback is that i have to press F5 on my favorite browser to refresh the page. Big deal! This might be a good tool, and I will give it a try just in case i find it useful.

#

KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 81.5.128.10] on October 02, 2007 02:50 AM
Frontpage hasn't been on sale for years now. I've never actually met anyone that uses Adobe GoLive, but a quick look at the page for that recommends you fork out for Adobe DW. DW is the MS Office of it's own field nowadays and the only game in town for WYSIWYG.

#

KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 216.110.126.207] on October 02, 2007 04:44 AM
KompoZer really needs to integrate firebug, even if its for the view source, the code folding alone is a tremendous benifit

#

KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 69.158.10.57] on October 03, 2007 12:31 PM
The author forgets to mention that although the Mozilla Foundation no longer officially supports the Mozilla web suite it's been picked up by some other folks as the "Sea Monkey" web suite and of course still includes the "composer" feature.

#

A few other options

Posted by: Anonymous [ip: 68.255.30.105] on October 04, 2007 05:25 AM
"so KompoZer remains the most capable free software HTML editor."



Not true, there are others available that match or exceed KompoZer's feature set, namely:

Bluefish (Gtk based)

Quanta (KDE)

Screem

#

KompoZer revives Mozilla WYSIWYG Web editing software

Posted by: Anonymous [ip: 213.213.214.138] on October 06, 2007 10:46 AM
I was not able to reproduce the problem noticed in

"[quote]If a style attribute is not defined in the selected rule, it will appear as undefined in the forms. Be careful, though, because CaScadeS will insert a definition for every attribute that you touch in the form, even if you set it back to its original undefined state.[/quote]"


I touched a few selectors, changing colors, borders,... When suppressing the attributes, they disappear from the style sheet.

#

This story has been archived. Comments can no longer be posted.



 
Tableless layout Validate XHTML 1.0 Strict Validate CSS Powered by Xaraya