Postings by Mathias on June 7, 2007
SoC-Status 2007/06/07
No much progress on my SoC project: This year the LinuxTag took place in my home town Berlin, so I helped out at GNOME booth there. Nice opportunity to meet some GNOME people. Tim Janik told me about some height-for-width traps - looks like I have to extend my unit tests. Talked with Rob Taylor about some document centric usability improvements for GNOME. Sven Herzberg enlightened me, that I want to use GNOME Launch Box. Took a birds-eye view on Bug 347883 which was bugging Michael Natterer for some time and fixed it intermediatly. It was interesting to see how accustomed visitors of LinuxTag are to GNOME.
Got distracted from GNOME hacking by the forced server switch for taschenorakel.de. Took the chance to setup a django based blog. Also got distracted by Bug 440431: Needed that kind of widget for my Photobuch software.
CSS vs. Rounded Borders
I used to be a big fan of CSS, W3C and such. Until today, when I tried to implement smooth rounded borders. Just look at this mess:
<div id="example">
<div class="rt"><div class="rl"><div class="rr"></div></div></div>
<div class="rc"><div class="rl"><div class="rr">
Lopem ipsem...
</div></div></div>
<div class="rb"><div class="rl"><div class="rr"></div></div></div>
</div>
Not that bad? Well, wait: You've only seen the HTML part, which still is verbose but still kind of acceptable. Now look at the CSS desert:
div.rt { background-position: top center; background-repeat: repeat-x; }
div.rt div.rl { background-position: top left; }
div.rt div.rl div.rr { background-position: top right; }
div.rc div.rl { background-position: left; background-repeat: repeat-y; }
div.rc div.rl div.rr { background-position: right; background-repeat: repeat-y; }
div.rb { background-position: bottom center; background-repeat: repeat-x; }
div.rb div.rl { background-position: bottom left; }
div.rb div.rl div.rr { background-position: bottom right; }
div.rt div.rl, div.rb div.rl div.rr { background-repeat: no-repeat; font-size: 1px; width: 100%; }
div#example div.rt,
div#example div.rt div.rl,
div#example div.rt div.rl div.rr { height: 15px; }
div#example div.rt div.rl,
div#example div.rt div.rl div.rr,
div#example div.rb div.rl,
div#example div.rb div.rl div.rr { background-repeat: no-repeat; }
div#example div.rb,
div#example div.rb div.rl,
div#example div.rb div.rl div.rr { height: 20px; }
div#example div.rt { background-image: url(/media/border/example-tc.png); }
div#example div.rt div.rl { background-image: url(/media/border/example-tl.png); }
div#example div.rt div.rl div.rr { background-image: url(/media/border/example-tr.png); }
div#example div.rc div.rl { background-image: url(/media/border/example-cl.png); }
div#example div.rc div.rl div.rr { background-image: url(/media/border/example-cr.png); padding: 0px 10px; }
div#example div.rb { background-image: url(/media/border/example-bc.png); }
div#example div.rb div.rl { background-image: url(/media/border/example-bl.png); }
div#example div.rb div.rl div.rr { background-image: url(/media/border/example-br.png); }
Had to create custom django tags to deal with this mess.
How is this supposed to be more pretty than stupid old tables? Especially as this hack cannot be easily nested: CSS2 child selectors are ruled out, as Microsoft decided not to implement them in IE6, and using unique class names for every level of nesting is just ridicilous.
Dear W3C people, dear Mozilla, Opera, Safari or even you Microsoft developers: Rounded borders are a common feature in web designs. So can you implement them on CSS level please?
