Blog

Multi-Columns

Recently (yesterday), on A List Apart appeared two articles on multi-column layouts for the web and how you can achieve them. I’ve found particularly interesting the one about lists, but I would like to suggest another way of doing this.

Their final solution involves giving a distinct class to each list item. What a clutter in the HTML! What if the style sheet didn’t need all these class attributes? Let’s find out.

First you need to know about the adjacent selector. If you write li + li as a CSS selector, it means any list item following a list item. This means the corresponding style rules will apply to every list item, except the first one in a list. Nice! Now, let’s apply this.

I’ll base myself on the example 6 file given in the ALA article to explain the rest. So maybe you will want to take a look.

The first use of list item’s classes in the style sheet sets a negative margin on the sixth and eleventh items so they start on a new column. We will replace the class names with adjacent selectors. So this:

li.feve,
li.kava
{
    margin-top: -6em;
}

Now becomes this:

ol li+li+li+li+li + li, 
ol li+li+li+li+li + li+li+li+li+li + li
{
    margin-top: -6em;
}
ol li+li+li+li+li + li+li, 
ol li+li+li+li+li + li+li+li+li+li + li+li
{
    margin-top: 0em;
}

The first rule sets a negative margin-top to any item preceded by five or ten other items. The second rule will “reset” top margin to zero for other items in the list (those preceded by six or eleven other items). The result is that only the sixth and eleventh items have a negative top margin.

Note on spacing: I’ve grouped adjacent list items by five — the number of element per column — to make it easier to read for me and for my readers.

Then we need to handle horizontal positioning. It work the same way, except this time it involves much less hassle than making the rules than using classes on every item. So we replace this mess:

ol li.aloe,
ol li.berg,
ol li.cale,
ol li.dami,
ol li.elde
{
    margin-left: 0em;
}
ol li.feve,
ol li.ging,
ol li.hops,
ol li.iris,
ol li.juni
{
    margin-left: 10em;
}
ol li.kava,
ol li.lave,
ol li.marj,
ol li.nutm,
ol li.oreg,
ol li.penn
{
    margin-left: 20em;
}

By these three elegant rules:

ol li, 
{
    margin-left: 0em;
}
ol li+li+li+li+li + li
{
    margin-left: 10em;
}
ol li+li+li+li+li + li+li+li+li+li + li
{
    margin-left: 20em;
}

The result is now exactly the same as in example 6, except that you can now remove the class attributes in the HTML and reorder/insert/delete items at will without bothering about the style sheet.

We can truly say we have separated style from the content.

The only drawback seems to be that the adjacent selector doesn’t work on Windows IE. :-(

Multi-Safari Update

This is a followup to my older Multi-Safari entry, which explains a method to run multiple versions of safari simultanously on the same computer.

While this technique works beautifully under Mac OS X Panther, results are a little less interesting with Tiger. On Tiger you can make Safari 1.x for Jaguar work without problem, but any version of Safari built for Panther won’t work because of framework dependency problems. It appears WebKit builds for Panther are linked to private frameworks or public framework’s private symbols. These frameworks and symbols are no longer present in Tiger, so WebKit will not load and Safari will not start.

I’m not sure if you understood all this programming gobbledygook, but the end result is that I have given up making a working version of Safari 1.2, 1.2.3, and 1.3 for Tiger.

I’ll welcome any idea.

Opera 8.5 ” Fit To Window

If you haven’t tried Opera yet, there is one more reason to do so. Opera 8.5, just released, is now ad-free — no more registration required. While this browser is famous for is “Zoom” feature, I’ve found something I think is worth mentioning: the Fit to window width mode, in View menu.

This may not be new, but I found it today. Fit to window width special mode will compromise the design of a web page to make it fit the current window width. This is a combinaison of three effects:

Font-size reduction

As you shrink the window, the text becomes smaller. But it does seem to respect a minimum size so it stay readable.

Box resizing

As you shrink the window, CSS boxes shrink too, a little like if they had a max-width: 100% rule. This is enforced whatever the style sheet says.

This also include images: if an image is to take larger than its container, it will shrink.

Small-screen rendering

Opera has a special “small screen” mode — used in their mobile and handheld products — which has been available for quite some time by selecting Small Screen from the View menu.

When in small screen mode, Opera first check for a style sheet with the handheld media type. If no style exist for that media, the content is linearized, some styles like color are preserved, and text font and size are made all the same to fit the screen.

When you shrink the window below a certain threshold, small-screen mode is used to display the page. If you shrink the window even more, unless you have made a handheld style sheet, small-screen mode remove all the remaining style (color, margins, borders) and show you linearized unstyled content.

Final Results

While I never expected anything great with most websites, I’m still impressed by the result which is fine most of the time. I won’t go deep with screenshots and analysis however, so feel free to experiment by yourself.

If you do experiment, you could try to look at my site for an example of a handheld-aware style sheet. Beside Opera’s own website, they are pretty hard to find.

Links

• Opera 8.5 Mac Download
• Opera 8.5 Windows Download

Sim Daltonism

This is the release of a project I begun last year, which I had to stop because of insufficient performances. Now, with GCC 4 and autovectorization, and also with some other optimization, I accelerated the process enough to make it interesting. Here is Sim Daltonism 1.0, first release of my real-time color blindness simulator for Mac OS X.

I do not have much more to tell than what is already written on the application page. So I will talk about the icon. The photograph is divided in two frames, on the left it is passed through the protanopia filter (green-red color blindness), on the right through the tritanopia (blue-yellow color blindness) and around the frames the picture is not filtered.

Under the photograph you can find three spectrums: on the middle you have a normal spectrum, over and under it you have the same spectrum passed through protanopia and tritaniopia filters.

As you can see, I created this icon in 512 by 512 pixels, which is four time the size of a Mac OS X icon. Then I reduced it to make it 128, 48, 32, and 16 pixels.