CSS images, image-set and strange units.

📏

A candidate draft for CSS3 image values has been proposed, and it contains interesting ideas. Basically, an image can be something else than just an image file, instead it can be a set of images in fallback order and solid colour or a gradient. As I’m increasingly using SVG images for this blog, having the ability to specify fallback bitmaps is a nice feature. What I wish they would have added to the spec was the ability to have an image being a html sequence, that is, be able to specify image fallbacks for characters in exotic fonts (typically rare kanji, or emoji).

Another very interesting idea for image handling in CSS is the notion of image-set, which was proposed on the webkit mailing list, basically instead of specifying a single image, one would specify a set of images at different resolutions and the web-browser would select the one matching the current display. This is basically a problem with devices that have so called retina displays, like the iPhone 4. Basically, those devices do not display bitmaps at one pixel per CSS pixel, as they would display as post-stamps. In practice this means that the pixel is now an abstract unit, in CSS, a pixel is just a unit of length, defined as 1/96 of an inch, or 127/480 of a millimetre, and resolution can now be expressed in points per pixel. Yes, if you are geek, that does not really make sense, that would be like if atoms could be divided into parts…

I really hope those standards get traction, as the current situation is not satisfying: either I need to put images at twice the resolution on this blog, and then let the web browser scale them down to fit the layout, with the result that I’m wasting a lot of bandwidth, making the browser download four times too many pixels, or the picture look blurry on smartphones. It is also interesting to see that content negotiation between web browser and web server has failed: there is no simple way to tell wordpress to create a fallback bitmap when the browser cannot handle SVG.

New skin

The blog's new skin

Regular readers to this blog will have noticed that I have been testing a new skin for this blog for a few days. Given the generally positive reactions I got, and the fact I have fixed most of the main bugs, I’m going to keep it. Between the new skin and the new version of WordPress, there quite a few new features:

Authors
Different authors are now supported properly, so I suppressed the categories representing authors – the number of posts written by other people is not important.
Tags
Tags are now supported by the core WordPress engine. I had some tags in the previous version, but the support was very flaky. Now I even have a tag cloud. Alas, tags from old posts go lost in the upgrade, not that they were consistent.

Gravatars
Gravatars now show up in the discussion pages.
Geocoding
This is not visible yet, but there is now an API to add geocodes to the posts. I still have to find a plugin that exports this is in a nice way.

The layout of this blog uses a few Safari specific extensions for cosmetical differences, typically shadows, and turning this blog’s title a bit to be aligned with the label sheet below. The shadow extensions should be available for Firefox 3.1, I’ll update the CSS once this version comes out.

Pendant ce temps, sur le web.

Un des phénomènes que j’ai pu suivre depuis presque le début a été le développement du web. Beaucoup de choses se sont passées depuis l’époque ou j’utilisais Mosaic sur les machines de l’Université de Genève. Si je n’ai jamais été un web-designer, j’ai régulièrement bricolé du HTML et suivi l’évolution du langage.

La première version de HTML était une description logique, avec peu ou pas de mise en page. On pouvait sentir une forte influence de LaTex notamment au niveau des structures de liste. Les version subséquentes ont surtout ajouté des tags de mise en page, ce qui fait que l’aspect logique a rapidement été noyé dans la masse. Les CSS et l’émergence des méta-données ont finalement commencé à renverser la tendance.

Moi même j’utilise de plus en plus les CSS pour faire la mise en page de mon blog. La mise en page du tableau des kanjis est entièrement contrôlée par le CSS. J’essaye aussi d’ajouter autant de meta-données, notamment pour les acronymes. J’ai aussi finalement pris le temps de voir comment le site apparaît avec d’autres browser, en général, le résultat est plutôt bon. Le code du site valide aussi à présent avec l’engin de validation de iCab. Je regrette que WordPress n’insère pas encore les liens prev and next dans le header, mais au moins il y a déjà les liens vers les archives.

Il y a deux développements aux HTML que j’aimerais bien voir supportés plus largement, il s’agit de MathML et Ruby. Le premier est un langage pour exprimer des équations. L’avantage serait de pouvoir enfin éviter de représenter les équations comme des graphiques, et, je pense aide beaucoup à la publication online d’articles scientifiques.

Le but du second est plus exotique, il s’agit en fait de généraliser l’idée de furigana. Le furigana est le fait d’écrire un texte phonétique ou dessus d’un texte. Il est typiquement utilisé au Japon pour expliquer la lecture des kanjis, mais l’idée peut de fait être généralisée, par exemple pour les acronymes. Je trouve ce sujet intéressant, d’abord car une telle structure m’aiderait pour mon site, mais surtout car c’est une manière de représenter des textes de manière structurée et non linéaire. Malheureusement, ce système est pour l’instant uniquement supporté par Microsoft, et les projets open-source sont à la traîne.

Mise à jour du CSS

J’ai à nouveau mis à jour la mise en page du site. Fondamentalement, ce sont surtout des changements pour rendre la mise en page plus stable. Normalement, le fond transparent derrière le texte, le titre et le menu devraient être visible avec la plupart des browsers. Auparavant, j’utilisais des couleurs spécifiées en rgba, mais seul le browser safari supportait cela. La solution actuelle utilise des image semi transparentes – cette solution est moins satisfaisante car elle implique deux images qui n’en sont pas réellement, et force l’ouverture de deux nouveau sockets pour les transférer (la taille des images est de l’ordre des 500 bytes), mais a au moins cela devrait fonctionner mieux avec Firefox.

J’ai aussi ajouté récemment le code pour faire des lettrines, j’aime bien les lettrines. D’une manière générale, je trouve que le CSS commence à devenir une technologie mature. La stabilité entre browsers reste un problème, mais le langage permet réellement de spécifier des mise en page sympa de manière relativement claire.

Je suppose que je pourrais faire une mise en page plus originale (celle-ci est fondamentalement celle par défaut avec d’autres couleurs), mais j’en suis assez content, et je manque d’idées (et de temps).

Nouveau look

J’ai enfin eu le temps de personnaliser le look du blog. Le look ne casse pas des briques, il est fondamentalement inspiré de celui que j’utilise sur ma home page. J’ai un peu regardé les autres looks disponibles pour Word press, mais en général je les ais trouvé moches ou peu pratiques (j’aime bien zen, mais il gaspille vraiment trop de surface d’écran). À m’entendre on dirait que je suis en train d’acheter des chaussures :-P. Bref, j’ai juste un peu bricolé la feuille de style de ce site, mais je dois avouer que mes connaissances de CSS sont un peu rouillées.

En écrivant ce billet, j’ai essayé de trouver un exemple du style zen, et je suis trouvé sur une carte amusante: A fool’s world map, qui est un complètement idiot et ironique et qui mérite en tant que tel mon soutien.