Three Linux HTML editors reviewed

Today’s Web development tools offer capabilities that go beyond basic HTML editing. I compared three Web editors for Linux — Screem 0.16.1, Bluefish 1.0.7, and Quanta Plus 3.5.7 — to determine how well they handle today’s Web editing needs.

The three programs are similar in many ways. All three are primarily code editors with syntax highlighting, smart indentation, and other features to make writing and editing code easier. Screem is tightly integrated with the GNOME desktop environment, while Bluefish will run on KDE and GNOME. Quanta Plus is a KDE application distributed with KDE. It has visual editing features (what you see is what you get — WYSIWYG) in addition to extensive code editing features. All three applications have features for working with HTML, JavaScript, Cascading Style Sheets (CSS), and other markup or scripting languages. Additionally, all three have features for managing Web sites and projects, including CVS support.

If these three programs have such similar features, what sets one apart from the others? For this review, I focused on how well a Web editor helps you write HTML code, CSS, and DIV tags to create flexible layouts. Each program offers additional features that may be important to you if you have specialized needs.

I tested each program along with Adobe’s Spry framework (released under the BSD license), which provides an easy way to add AJAX (Asynchronous JavaScript and XML) capabilities to a Web site. The Spry framework comprises a set of JavaScript scripts and style sheets. Using and modifying the Spry widgets requires editing simple HTML and CSS style sheets, which makes Spry a good companion for my testing. I looked for features in the three editors that I value in commercial Web design software, such as tag completion, tag attribute suggestion (where you type the beginning of a tag, and the software prompts you with a list of attributes and values), and awareness of linked CSS and JavaScript files.

Screem

Screem handles much of the basic drudgery of setting up and editing Web pages. When you create a new Web page, Screem asks for some basic information and then helps you set up the basic page elements in the head and body tags.

I appreciated how well Screem facilitated editing. For example, when I changed the opening tag from an ordered list to an unordered list, the closing tag automatically changed. When typing code, Screem offers a pop-up dialog in line with a tag for choosing attributes, and then automatically closes the tag after you choose an attribute or type the right bracket. Screem has a good CSS style wizard for creating properties to either be inserted between style tags or to have in a separate style sheet.

Screem’s clean interface includes just two toolbars: a main toolbar for basic operations like opening, printing, and editing files; and a wizard toolbar with buttons for nine wizards that guide users through inserting elements like colors, forms, links, images, and tables. There is also a sidebar on the left of the screen that can display five tabbed windows: files; a document tree; a list of attributes that change dynamically based on the tag you are typing; resources, which is a full list of available tags for the current document type; and symbols, which works with ctags if they are present for a Web site you are editing. I found the document tree useful for navigating through nested tags on a Web page.

Screem offers four views: code view, tree view, preview, and link view. The code view is the main editing window. The tree view is a duplicate of the document tree available in the dock. The non-editable preview shows how the site would look in a browser. It works pretty well, but it was unable to render the JavaScript-based Spry elements. The link view is interesting — it shows a diagram of all the pages linked to the current page and their status.

Screem’s simple interface belies a powerful HTML editor. I just wish it could more easily be installed in KDE. I tested Screem from an Ubuntu live CD to avoid compiling and loading the half-dozen or so GNOME-related libraries I would need to get it running on KDE. However, Screem is a great example of a tool that does its chosen task well with a minimum of extraneous features. If you use GNOME, Screem is a great choice. If you use KDE or another environment, it is still worthwhile to load the necessary libraries to use Screem.

Bluefish

Bluefish is in many ways more complicated than Screem, but also more versatile. It handles editing C, Java, Perl, Python, XML, and several other languages in addition to HTML and CSS. For HTML and CSS editing, it has many of the same features that Screem has, but it does not offer tag attribute suggestions as one types, nor will it change a closing tag to match a changed opening tag as Screem does.

Otherwise, Bluefish is capable, well-organized, and easy to use. Its Tags menu can apply opening and closing tags to selected text, or simply insert the tags if no text is selected. The tags in the menu are organized into nine broad categories (e.g., headings, format by layout, format by context, CSS, etc.). The Dialogs menu presents a series of dialogs for various tasks, such as inserting a link, table, form, or CSS style (for either an in-document style or a separate style sheet). The dialogs are where you provide, or choose from a list, the values for various attributes for tags, which Bluefish then inserts into the document. Through the dialogs you also perform the initial document setup of adding meta tags, linking to style sheets, and so forth. The menus are not context-sensitive; they still provide HTML-related functions even if you’re editing a Python file.

Bluefish has a neat multi-thumbnail wizard on its toolbar that automates creating a page of thumbnails from images you select — handy when you want to set up an online photo album. The wizard scales each image to the specified size or percentage and automatically adds the image and anchor (link) tags. However, it is still up to you to get the thumbnails into a workable page structure such as a table.

Bluefish is a capable HTML editor, especially if you do a lot of editing in PHP, JavaScript, Java, or one of the other supported languages. The menu-driven nature of Bluefish is not as attractive to me as Screem’s ability to do many of the same things dynamically while I type. However, Bluefish’s capabilities extend beyond HTML and CSS editing, and it runs easily in both KDE and GNOME.

Quanta Plus

At its heart, Quanta Plus is a code editor. It has some WYSIWYG editing capabilities, but they are not as useful as you might think. For one thing, the preview view did not always work for me. It stopped working after I placed a table in a small Web page I was using to test various features. This problem is especially odd because the preview worked fine for another more complicated Web page I loaded at the same time. But even when the preview works, it does not allow true WYSIWYG editing. For example, pressing the Enter key results in the insertion of a soft break tag rather than a new paragraph tag. That behavior is even more frustrating when you’re typing a list, where pressing the Enter key still gives a soft paragraph break rather than the expected new line item. In short, the Preview view is aptly named; it is better used for displaying the results of the edits you make in the code than for visually editing a page.

That complaint aside, Quanta Plus is a tremendous code editor. Its interface is more complex than Bluefish’s, but still mainly Web-editing-centric. Quanta Plus offers syntax highlighting for a staggering array of programming, scripting, and markup languages. Like Bluefish, its menus and toolbars do not change to match the language one is editing. Quanta Plus gives users the ability to create new language-specific toolbars to save, load, and even share.

Again like Bluefish, the best place to start with a new document is the Tags menu, which leads to the quick start dialog for filling out the initial meta tags, document title, and so forth. The Tags menu contains both simple tag insertions and dialogs for tags that need to take several attributes. More importantly from my perspective, Quanta Plus offer tag attribute and attribute value suggestions as I type. Bluefish offer neither, and Screem only offered tag attribute suggestions, not attribute value suggestions.

Another nice feature is that when one types a tag that usually has tags nested within it, Quanta Plus adds the nested tags too. For example, after typing the opening tag for an ordered list, the program automatically added one set of opening and closing line item tags, and then closed the ordered list tag.

Quanta Plus’s handling of CSS is a little complicated because it requires two dialog boxes, but is easy to use and powerful. To create a CSS style, you first open the CSS Selector Dialog to identify the element to apply the style to: tags, division (div) or span IDs, or classes. Then, double-clicking on the CSS selector opens the CSS Editor dialog, which provides all the options and values that you can apply. The end result is perfectly formatted CSS code.

Quanta Plus is the most complex of the three programs, but also the most capable. Despite its complexity, which is really a function of its ability to be customized, Quanta Plus’s interface is a joy to use. The program goes out of its way to assist users writing and editing HTML and CSS code. For people running KDE, Quanta Plus is an easy choice, since it comes bundled with KDE. GNOME users need to load some libraries and helper applications, but the results are worth the hassle.

Recommendations

My simple recommendation is to use Quanta Plus to edit your HTML and CSS files. The more complicated recommendations break down this way:

• If you use GNOME, use Screem. It’s a fast, simple, and powerful tool for Web editing. However, it does not have the large feature sets that Bluefish and Quanta Plus have, especially for languages other than those directly related to Web page editing.
• If you use GNOME and need the more powerful features of Quanta Plus, load the required libraries and run it.
• If you use KDE and want a code editor, choose Quanta Plus. Ignore the WYSIWYG capabilities and take advantage of the tremendous editing capabilities, especially for CSS style sheets.
• If you use Xfce, Quanta Plus should run fine. Screem would still require loading additional libraries.
• Finally, if you use GNOME, find that Screem does not meet all your needs, and you don’t want to bother with loading the KDE-native Quanta Plus, then load Bluefish. It is nearly as capable as Quanta Plus, but will run well without a lot of fussing with libraries.

It is encouraging that there are at least three modern and very capable Web development applications for Linux. Screem, Bluefish, and Quanta Plus are not quite as full-featured as Adobe’s top of the line Dreamweaver, but they are close. Quanta Plus, especially, is Dreamweaver’s equal for code editing. Given that Dreamweaver is expensive, and is not available as a native Linux application, these three applications represent excellent value — not just because they are free, but because they quickly reward users with excellent results.