html
Jun 02, 2009
Basic Resizeable Button
You know how it goes. The client wants a totally slick designer webpage, and as ever that comes with the obligatory microscopic font and graphical everything. Sadly such designs fly right in the face of Accessibility requirements, so how do you marry the two?
The basic answer to this is Resizeability. All browsers from the humble IE6 onwards allow the visitor to resize the font, and recent browsers also (attempt to) resize the graphics as well. IE7 is rubbish at this and Firefox 3 is totally superb, as per usual.
However, HTML has never really been very good at coordinating the positioning of resizeable text and (potentially) unresizeble graphics. One place that this crops up over and over again are form buttons. The design has rounded ends and a nice gradient from top to bottom, so how do you make this button resize itself to fit the text?
![]()
Answer: The following is a simple technique that works well. The trick is to avoid being overly specific about the height of the button, i.e. let the graphics fade away to transparency at the bottom, and align everything by their top edges. The above button gets cut into 3 pieces:
![]()
of which the middle bit will be a repeating background, thereby stretching to any length. Next the HTML:
<span class="roundblackleft" ></span><a class="roundblack" tal:attributes="href string:${here/portal_url}/get-to-know-us" >Get to know us</a><span class="roundblackright" ></span>
Here we have used two empty span elements to hold the left and right ends, and the middle element is just the anchor itself (note that this means that you cannot click on the very ends of the button, but hey).
Now finally the CSS:
a.roundblack,a.roundblack:link,
a.roundblack:visited {
background: 0 0 repeat-x url(roundblack-bg-10.png);
vertical-align: top;
color: white;
text-decoration: none;
}
a.roundblack:hover {
color: green;
}
.roundblackleft {
display: inline-block;
background: 0 0 no-repeat url(roundblack-left-10.png);
width: 10px;
height: 22px;
}
.roundblackright {
display: inline-block;
background: 0 0 no-repeat url(roundblack-right-10.png);
width: 10px;
height: 22px;
}
The important things to note here are:
- display: inline-block. This allows us to specify a width and height for the span tags, but ensures they still appear inline. Not all ancient browsers support inline-block, but IE6 does.
- vertical-align: top. This is the crucial directive which makes everything line up. Because the anchor is being displayed inline, its height is unpredictable and uncontrollable. Therefore we align it by the top edge, and allow it to become any height it likes.
- If you still have problems with vertical alignment, try applying line-height: normal to the anchor tag. A competing directive can be inherited from CSS elsewhere on the site (especially Plone sites).
This technique only works if the graphics don't have a defined bottom. If they do you can re-do everything aligning with the middle, but this only works with bigger buttons.
Google - give us a wave!
Can Google's new masterpiece really take the world by storm?
It's a rare moment at Openia when we stop what we're doing to watch the same video on Youtube, and an 80 minute long one at that. Google's Wave presentation has such an air of occasion about it, that it would seem churlish not to take the time to watch. But is there any substance behind the understated-but-we-know-we're-good Google glitz? There are some pretty powerful applications out there, including many excellent web-based ones, so what exactly is it that makes Google Wave the "killer app" that so many claim it is?
First, it's important to recognise what Wave isn't - it's not one single new idea, it's a bunch of very small, but important, changes to a lot of other ideas which have been brought together. So the first thing we realise is that Wave owes a lot to other technologies. In so doing it stands on the shoulders of giants such as email, blogs, forums, social networking and instant messaging. (Even some of the "new" ideas, such as the ability to watch your correspondent as they are typing the individual letters and words of their message are not that original - "Phone" on VAX/VMS had such a feature back in the 1980s.)
Secondly, although it's a great piece of work, expertly delivered (from what we can tell from the video) it is in many ways completely inevitable. It was only a matter of time before blogs and email and messaging were integrated in some way - it is a technology waiting to happen. That it has happened in one big jump makes it more exciting, but you can rest assured that we would have got there eventually. That said it is reassuring to have Google at the helm at moments like this, rather than some of the alternatives.
But the part which makes this the app which will replace email, IM and many other messaging tools in all our lives is the fact that it is released as a protocol, and an open one at that. So anyone can write their own Google Wave compatible applications and talk to anyone else's. This is what makes Email the current primary choice for messaging - there is no need for everyone to use the same provider. Provider choice is key for planning communications, and Google are big enough to know that they can't be the only provider in the world without poisoning the well for all of us. One has to wonder whether if this technology had been constructed by Microsoft or Apple (for example) that it would have been used as a tool to try to secure market share, rather than making the world a better place for us all.
As a microblog, Wave might only be an incremental change from Twitter, and as a Forum/Social Network it's only a few thought processes removed from Multiply or Facebook, and as an Instant Messenger it might be practically the same as Jabber, MSN or Yahoo; it's the combination of these facets and, more importantly, the openness and ubiquity of them that makes Wave unique, as will be evident when the makers of Twitter, Facebook and others present their offerings in a Wave-like way.
And if this all works out as it should, Wave will become the "glue" of the web.



