From Opera Watch 8.0 beta3 coverage

In this version Opera has also added native support for SVG 1.1 Tiny (Scalable Vector Graphics). SVG is an XML-based language for Web graphics developed by the World Wide Web Consortium (W3C). It enables Web developers to create the next generation of interactive and personalized Web applications in high-quality vector graphics instead of bitmaps, which are most often used on Web sites today.

Opera 8.0 beta 3 changelog

It’s good to hear that I’m not the only one hating curly braces. Taste for the web.

The common perception is that browser support for SVG is still not sufficient to make SVG a viable alternative for general use. But it’s not that far away. Plugins are available for most browsers and native SVG support for Mozilla is coming.

Within the last few months I have migrated to Ubuntu Linux from Windows ME and wasn’t aware of the SVG options for Linux until today. First I discovered that there is an SVG plugin for Konqueror. I got this working by installing Konqueror and KSVG from within Synaptic (GUI front end for apt-get included with Ubuntu), start Konqueror and then go to Settings -> Configure Konqueror -> File associations. Selected image-> svg+xml, clicked the Embed tab and moved KSVG to the top of the list. I tested successfully with some of the examples at W3C Scalable Vector Graphics (SVG) 1.1 Test Suite but Konqueror crashed on the SVG images I tried at Pinkjuice.

By doing a search for SVG in Synaptic I found librsvg2-bin, command-line, graphical and mozilla viewers for SVG files. Select and install, restart Firefox and it didn’t work. The Mozilla plugin was installed in /usr/lib/mozilla/plugins/ but my Firefox installation looks for plugins in $HOME/.mozilla/plugins/ Just copied the plugin to the correct location and voila! No problems with the parts of the W3C test suite I tried and it also worked when I tested some of the SVG at Pinkjuice.

How about Opera on Linux? The librsvg2 Mozilla plugin works just fine. My Opera (version 8.01b) was automatically configured to check the Mozilla plugin folder for plugins so a restart of Opera was all that was needed. Quick testing revealed no problems.

On Windows, the Adobe SVG viewer is available as a plugin for Internet Explorer and Netscape4. Nobody uses Netscape4 anymore but Opera supports the same plugin architecture so you can use the Netscape4 version with Opera. See Installing the Adobe SVG Viewer plugin in the Opera knowledge base for instructions.

The current production version of Adobe SVG viewer is 3.0 but a 6.0 beta version with support for fresh Mozilla versions is available. How to get this working is documented at Mozilla PluginDoc.

Update : After more testing I see that the librsvg2 plugin apparently doesn’t support animation so to say it doesn’t have any problems with the W3C test suite is a little misleading.

The Python editor PyPe is intended to be a simple editor that includes what you need and not much more. It does however include a nice little feature that I haven’t seen anywhere else. It’s called todo comments. A comment in Python looks like this
#A comment
A # sign followed by your comment. A PyPe todo comment is a perfectly valid Python comment and looks like this
#Todo: a todo comment
That’s a # sign followed by the word todo, a colon and the todo comment. Remember that you can’t have anything in front of it, so this line
a = 5 #Todo: a todo comment
includes a valid Python comment but it is not a valid todo comment because of the python code in front of it.

So what’s special about that? Let’s first take a look at a PyPe screenshot :

The PyPe view consists of a text area where you write your Python code, a browsable code tree to the upper right and a box with shortcuts to your todo comments to the lower right.

Whenever you think about something that needs to be done or find a problem with your Python code that you can’t fix instantly, add a todo comment and PyPe adds it to your todo list. The todo list is built when you open your file and refreshed everytime you press F5 (note: you might have to enable todo comments in the document menu).

Example todo comments:

This results in the following todo list :

You can add todo comments anywhere in your code and when you doubleclick an entry in the todo list you are taken to the line that contains the todo comment. Simple, effective and brilliant!

A menu is a list of the main pages on a website so why shouldn’t you use html lists for building them? Two common reasons for not doing so are

1. I don’t want those dots in front of the links
2. There is so much whitespace that they are useless for menus

But those problems disappear as soon as you apply a little CSS to them.

Let’s just mention some reasons to use lists

1. Html list tags are short
2. A menu is a list
3. Other types of user agents (text browsers, cellphones etc.) will better understand how to represent your menu because list tags carry meaning, divs and tables does not.

Ok, now it’s time to start with the html for a simple menu. We will use an unordered list (specified with <ul>) because you don’t have to read the pages in the specified order.

<ul id=”menu”>
<li>Widgets</li>
<li>Gadgets</li>
<li>Subjects</li>
</ul>

To avoid the problems mentioned above we have to apply a little css to our menu. To remove the list markers (dots) we will apply list-style-type: none; to the ul. To avoid excessive whitespace we must specify margin and padding on both the list and all the list items within it. A border is not really necessary but I want one to make the menu more visible on this page.

#menu{
list-style-type: none;
padding: 0px;
margin: 10px;
width: 120px;
border: 1px solid #FF5C00;
}
#menu li{
padding: 0px;
margin: 3px 5px;
}

That is a margin of 3px above and below each list item and 5px to the left and right:

• Widgets
• Gadgets
• Subjects

Now, that looks more like a menu! (If it had links)
But if I want a horizontal menu? Just one and a half change. List items are normally rendered as block level elements which implies that each list item should be placed below the previous but this can be changed with display:inline; in the CSS code for the list items. If you are unfamiliar with the different display types available you should read about the CSS display property at W3schools

The width of the whole list must also be changed to make room for the horizontal orientation.

#menu{
list-style-type: none;
padding: 0px;
margin: 10px;
width: 300px;
border: 1px solid #FF5C00;
}
#menu li{
display: inline;
padding: 0px;
margin: 3px 5px;
}

And the result :

• Widgets
• Gadgets
• Subjects

Just one note for those who need fine control over the spacing of the menu items; Some browsers apply extra whitespace between these list items if there is whitespace between the </li> and <li> tags

That’s the basics of using lists for menus. As you see, the html code is very, very short and you are encouraged to use CSS for creating the visual appearance. The menu might look boring now, so head over to the Listamatic and fix that.