And with that news I shed a tear

As I come to the end of another day wrestling with code in an effort to get it to run in Internet Explorer 8, I find this post about some real world statistics from a large UK healthcare site.

Internet Explorer accounts for 55% of the numbers…

With 47% IE8 is the most used browser, followed by IE7 with 24% and IE6 with 19%. IE9 only accounts for 10%.

So 55% of visitors are using IE, and 90% of those are on an old version. If people really must continue to use Windows XP (and I appreciate that sometimes there isn’t a choice), then please at least switch to a different browser… you know, one from a vendor who hasn’t abandoned support for your platform like Microsoft has. Until you do, your just helping to hold the web back for everyone else.

Why Firefox’s new numbering is a problem

Mozilla recently released Firefox 5, (quietly) announcing that this represented the end of life (EOL) for Firefox 4. The problem is that Firefox 4 was released less than a two months ago.

This has led to an ongoing discussion about the effects that the new release schedule is having on corporate users – first from Daniel Glazman then from Mike Kaply. The storm of comments that has arisen resulted in both of them writing several follow-up posts, so if you’re interested in this topic do continue further into their blogs and comments (especially Mike’s site, as that seems to have been the target of more comments).

One of the most common responses I’ve seen is that Firefox 5 only adds a few relatively minor features, so it’s just like a 4.1 update really. But it’s the fact that it only contains minor changes which is a big part of the problem.

With a 4.1, 4.2 numbering system it’s usually a fair bet that the changes between versions are small. Jump to 5.0 and you would expect some more major changes, possibly affecting the UI in a way that will need you to retrain your staff. But when every version bump might only contain small changes, or might have massive changes it’s very difficult to plan ahead. And when there’s no distinction between a security release and one that adds significant UI changes, corporations have to treat every release as a major one.

If Mozilla really want to carry on with six-weekly releases then that’s up to them – but at least provide occasional islands of stability that will see security updates for (say) 18 months. Not everyone wants to live in the constant churn of the upgrade cycle – and that includes some ordinary users as well as corporations. For these people an annual “blessed” release would be a blessed relief!

Posted in Tech, Web, XUL. No Comments »

Grave Gravatars make comments seem sarcastic

Like many other blogs, this one uses so-called “globally recognised avatars”. or “gravatars” to provide each commenter with their own unique image which will match from site to site, and from visit to visit, so long as they use the same email address when commenting. It’s a clever idea – the supplied address is encrypted using a one-way hash (so there’s no easy way to get the email address from the hash), and that unique hash is used to return an image associated with the user.

If they’re so inclined, users can create an account at www.gravatar.com and set their own custom image. If they don’t then the site will algorithmically create an image for them, based on their email hash, ensuring that they get the same image every time they use that email address. There are a few types of algorithmically generated images – a geometric pattern, a monster, or a generated face (which they refer to as a “wavatar”). It is the latter that I use on this site, and it is the latter than is the source of the apparently sarcastic comments.

Wavatars are made up of several pieces that canchange with each hash: a background, a “face” shape, eyebrows, eyes and mouth. The problem is the mouth in particular, though the eyebrows can also be an issue: several of the mouth variations look unhappy, and the eyebrows can appear as a frown. An unhappy, frowny wavatar can give a completely different feel to even the nicest of comments. In fact the nicer the comment, the more sarcastic it seems to become.

Let’s look at some examples. The images below are all genuine gravatars for real comments that have been left on this blog, or on my webcomic. I’ve posted just the image and the opening or closing words of the comments, but omitted the full text and the posters’ details. See what your sarcasm detectors think about this lot:

When seeing wavatars like these, I can’t help but feel that there’s an implicit “…NOT!” that should be added, regardless of how complimentary the comment is.

The only real solution to this would be for the gravatar developers to change their palette of mouths to replace the miserable, downturned, grimaced variants with happier versions. Alternatively, if you do decide to leave a comment on my blog or comic, you might want to set your own gravatar image just in case. Or at the very least, choose your words to sound less sarcastic if they do get paired with a grumpy visage.

Posted in Miscellaneous, Tech, Web. No Comments »

DIY Foxkeh SVG Wallpapers

I’ve long argued that there should be more SVG-based wallpapers available, so that users can modify or tweak them to suit their own requirements.

A step in the right direction is Foxkeh’s Wallpaper Creator – a web page which lets you combine an image of Foxkeh (Mozilla Japan’s cute mascot) with a background, calendar and Firefox logo to create your own desktop image (or mobile phone wallpaper, or Firefox Persona). The source images are SVG, letting you scale Foxkeh to a size that suits you.

Foxkeh's Wallpaper Creator

Unfortunately there doesn’t seem to be a way to save the finished SVG file, you can only export a bitmap image in PNG format. Although that’s fine for simple desktop wallpaper creation, it prevents any significant post-production editing. Perhaps that was intentional, as they don’t let you produce a wallpaper without a Firefox logo, either.

It’s currently in Beta, so maybe such an option will get added. In any case, if you’re after a cute, Firefox-promoting wallpaper with an optional calendar, it’s well worth trying.

Source: Mozilla Hacks

Posted in Miscellaneous, Web. No Comments »

A bettr Flattr dashboard

I’ve mentioned Flattr on this blog before, and now that I’ve been using it for a while I’d like to suggest some changes to the Flattr “Dashboard” which might make more effective use of the screen.

I would imagine that many Flattr users treat the Dashboard as their “Home” page on the site. It provides a quick overview of any recent flattery you may have received, shows you how dilute your own flattery is, and provides a few links to help you discover things to flatter. Here’s how it looks (click for the full sized version):

The site is fresh and modern, with a familiarly blog-like design which partitions it into the four commonly used sections of a Header, Footer, Main Content Area and Sidebar:

I’m specifically not going to talk about the Header or Footer areas. I’m just interested in the real meat of the page: the Main Content and the Sidebar. I’m also not going to suggest any radical changes to the content of these areas. I’m just going to suggest some ways in which they could be made more beneficial to a Flattr user without having to go so far as a radical redesign.

Main Content Area

Let’s get started with the Content Area – specifically the panel at the top:

There are three particularly useful sections in this panel: your Means, your Revenue, and the Current Click Value section. Keeping the Means and Revenue large and obvious is a good idea as it lets you immediately see whether you need to top your account up, and whether you’ve received some money to withdraw or transfer in the past month. The Current Click Value shows your Monthly Flattr Amount, the number of things you’ve flattered and as a result the value of each of those clicks.

What about the rest of the panel? The Monthly Flattr Amount section is completely redundant as a source of information as you can see the figure in the Current Click Value area. Yes, it also acts as a control to let you change your monthly Flattr amount, but do people really change this value often enough to warrant giving it so much space every time they visit the Dashboard? Better to turn the Current Click Value into a button or link which will reveal this control when clicked.

As for the Transactions sections, I would wager that most people only have a few transactions each month so don’t need to see the details on every visit. How about making this show just the date and value of the most recent transaction and the next upcoming one – the “View all transactions” link is still there if you want more details.

A bit of work in The GIMP to apply these suggestions results in the image below. It’s still got the same basic layout as the current version, but with less redundancy and just the relevant details shown. All the other information and controls from the original panel are still available via links or slide-out controls. You’ll notice that I’ve also filled up the space in the bottom right with a “Your user info” section, taken from the sidebar to free up a little more space there.

This version of the top panel only takes up about half the vertical space of the original design, but still offers the same functionality. That extra space can then be used to show more items in the tabbed lists at the bottom of the content area. On the subject of those lists, while I can understand showing two lines of the description for items in the “Things I have Flattred” tab, it seems a little excessive in the “My latest things” and “My top things” tabs. They’re listing my things – I don’t really need much description to remind myself about them. Cut that down to a single line and you can fit more items in.

So we’ve reduced the size of the top panel, resulting in more space for the bottom panel. And we’ve reduced the size of each item in the bottom list. Together these changes will free up the space to show a few more items in those bottom lists… but where are the “Show all” links? It would be nice to be able to open to an extended view of each of these lists rather than just losing things off the bottom as new entries appear at the top.

Sidebar

There are five panels in the sidebar, so let’s just deal with them one at a time, starting from the top…

Did you know?
Did I know that I could invite friends to join Flattr? Why yes I did, because you tell me that every single time I access my Dashboard. If you must have a box like this, at least vary the tips from time to time. Better still lose the box altogether, or just show it occasionally as a reminder.

Your user info
I’ve already dealt with this one by moving it to the Main Content Area. Even without any of the other changes I’m suggesting here, there’s plenty of space in the existing design to move this information across. It doesn’t serve any real purpose living in the sidebar, so move it or get rid of it to free up some space.

Newest things on Flattr
Undiscovered things
I’ll deal with both these as one entry as they’re similar. “Undiscovered things” shows Flattr users’ submissions that haven’t yet been flattered at all. It can be a great way to discover interesting and underrated sites… but it can also reveal that there’s a reason why some things never get flattered 😉

I’m not quite sure what “Newest things” shows. All the entries here usually have just a few flattrs, so I don’t think it’s as simple as “most recently flattered” (otherwise more popular things would show up too). However they populate this list, it’s another good way to discover items that you might not otherwise have stumbled across.

Both these lists are great when you’re in a random browsing mood – except for the fact that they’re too short. These should both be doubled to show 10 items.

All time top 5
At the time of writing, the list looks like this:

This is actually quite a shocking image because, for the first time in weeks, the number 4 and number 5 spot have swapped position! Other than that, this list has been pretty much the same for as long as I’ve been a Flattr member. There’s a positive feedback mechanism at work here: the top rated get additional visibility from appearing in this list, so are more likely to get flattered, so are more likely to stay on the list…

What’s most depressing is that only two of the entries here are for “real” content. The other things are all to do with Flattr itself. If it’s to flourish, Flattr needs to be a way to find (and fund) exciting and interesting content – not just a self-referencing collection of closed loops back to Flattr itself, or the few other things that manage to reach the top 5.

Personally I would lose this panel completely, replacing it with a “Random things” panel which shows entries selected at random, regardless of their existing popularity.

The sidebar has now been reduced to three panels (“Latest”, “Undiscovered”, “Random”), each showing ten items. I would also have a “More…” link on each of these to open a page full of items – ideal for those rudderless browsing sessions we all sometimes have.

Conclusion

I’ve deliberately steered clear of suggesting any radical changes, but instead focused on incremental changes that I feel could make the Dashboard a more functional and useful part of the Flattr site. Of course this is just my opinion – perhaps you do change your monthly Flattr amount regularly, or you love the Top 5 panel. Feel free to leave a comment with your own ideas for the Dashboard – and if you like my suggestions… well, there’s a little orange button just a short mouse move away that would appreciate your click 😉

Posted in Miscellaneous, Tech, Web. No Comments »

Mozilla Add-ons workshop, London 2010

Last night I went to the free Add-ons workshop that Mozilla hosted in London. It was an informative and interesting evening – well worth the trek down to London, even if it did then lead to a late-night trek back again.

Particular highlights of the evening were:

  • Myk Melez demonstrating that he’s a braver man that I am as he coded a small Jetpack extension as we watched – and it worked first time!
  • Tobias Leingruber’s wonderful presentation about his artzilla.org website and the creation of Firefox extensions as artistic works. Easily the funniest presentation of the evening.
  • Paul Rouget’s amazing demos. His French accent was a little thick at times – especially when he got excited. But the fact that he did get excited is telling in itself. Keep an eye on hacks.mozilla.org, especially as we get closer to the release of Firefox 4, as I’m sure most of his demos will appear there at some point.

There was also a stand with some free Firefox merchandise – mostly badges, pens and lanyards – but I did pick up a sheet of Foxkeh stickers for my girlfriend who is a big fan of the cute character, and uses the Foxkeh monthly desktop backgrounds on her computer (you might want to read this if you’re an English rather than Japanese speaker):

I’ve often wondered why the EU and US arms of Mozilla don’t make more use of Foxkeh in their marketing. He gets commented on by a lot of people that see my girlfriend’s desktop, which inevitably leads to conversations about what Firefox is, and how it differs from Internet Explorer. A mascot that leads to spontaneous discussions like this is surely something that should be used more widely.

Update: Chris Heilmann’s blog covers this event in more detail, and includes some videos of Paul Rouget’s demos.

Although many aspects of these demos will only become available in Firefox 4 (or nighties and pre-release versions thereof), it’s worth noting that SVG clipping, masking and filtering of HTML (including Ogg Theora video) works right now in Firefox 3.5, as demonstrated by my own post on using Inkscape filters in Firefox.

Posted in Tech, Web, XUL. No Comments »

Fixing online safety where it counts

Facebook’s in the news again as yet another country wants them to add a “safety” or “panic” button to the site so that users (especially children) can easily report any improper contact from other users. This time it’s Australia asking for it, but a similar row erupted a few months ago with Facebook’s UK operation.

The trouble is that these law enforcement and child protection agencies are trying to address the problem in the wrong place. Facebook is an obvious target because of its size, and because it has definitely been the source of improper contact in the past. But what of the many other websites out there which allow inter-user communication – from forums, through IM proxies, all the way up to the social networking sites of which Facebook is just one example (albeit the biggest)?

Trying to get buttons added on a site-by-site basis is a Sisyphean challenge – no sooner has one site gained a button than there is another growing in market share which needs to be similarly adorned. No, adding buttons to sites is not the right solution. Instead they need to be added to the browser.

Adding the panic button to the browser itself isn’t as straightforward as it sounds. There would need to be agreement on how it works: Would the browser become responsible for submitting an abuse report to the authorities? If so, it would require some sort of API to obtain relevant information from the site itself. Or would it simply call a web service on the site, triggering an abuse report from that end, and hooking into whatever abuse reporting system the site already has in-place.

My preference would be for both. Hitting the button would call an API on the site, triggering any well-behaved site to store a log of relevant details, and returning an identifier to the browser. The browser itself would submit an incident report to the relevant authorities which includes the returned identifier (so that the two reports can be reconciled if needed), and attaching a screenshot, copies of cookies, or other pertinent data. The user would be able to review this information before sending it, and add their own notes. This isn’t too different to the automatic crash reporters that most browsers include now, except that the more sensitive nature of the information would require some additional safeguards.

The beauty of this approach is that the authorities only have to deal with the relatively small pool of browser vendors, not the much larger ocean of websites. If a website doesn’t support the API then a report can still be submitted, it just means slightly less evidence being available. The authorities might still need to bring a little pressure to bear on individual websites to support the API, but as this has no visible impact there’s likely to be less resistance than there is to adding a button to every page on a site.

By building this into the browser itself it’s immediately available on all sites regardless of size. Adults could opt to not show the button at all, while browsers and extensions that target children (such as Kidzui or Glubble) could enforce its visibility at all times. Consistent button design and default placement across browsers would make it easy to educate children about the button’s use without needing to get specific about any one browser.

So stop pestering Facebook with this, because the day after they give in and implement a safety button, some other bright star of the online world will hit the headlines with improper contacts. Fix the issue where it really needs fixing: at a place in the software stack that can address it for all websites, not just one.

Posted in Miscellaneous, Web. No Comments »

Losing the http:// is a good thing

Chromium – the developer builds of the code that eventually becomes Google Chrome – was recently changed to not show the “http://” that precedes normal web URLs. This has, of course, led to bug reports and much discussion about the validity of this change.

I’m going to conveniently skip the copy-and-paste issues that seem to have got most people in a tizzy, and assume that fixes will come in time to both Chromium’s clipboard routines, and target programs’ parsing routines. With that elephant in the room delicately draped with a tablecloth and rendered invisible, I’ll get to my real point: I think this is a great move, and I hope that other browsers follow suit.

Most of the web consists of “normal” http sites. Users don’t care – and generally don’t understand – what the “http://” bit of a URL means, and it rarely gets typed by hand since browsers started assuming it by default several years ago. Most advertisers don’t bother to specify it: we hear “visit bbc dot co dot uk forward-slash news” with no sign of the “http colon forward-slash forward-slash” preceding it. It’s the appendix of the web world; a vestigial organ which has no real benefit, but causes a load of grief when it goes wrong (gets mis-typed in this case).

Most importantly, however, suppressing the display of “http://” means that other protocols will stand out a whole lot more. It’s another flag to indicate that you’re on a secure site (https://) alongside the oft-overlooked padlock and colour-coding. It’s an indication that you’re not in Kansas (or on a normal website) anymore when downloading files (ftp://). And if any other interesting URL schemes get rolled into the browser in future, it will show them up for the not-http protocols they are.

Anything which removes complexity for normal users and manages to make secure sites stand out a little more is a good thing in my book.

Posted in Tech, Web. No Comments »

Playing with SVG filters on HTML content

Note: The technique described below only works in Firefox 3.5 and above (or products using the same rendering engine). It isn’t part of any formal spec (though it would be a great addition to one of them), and could potentially get removed with a future Firefox release.

Introduction

One of the lesser known tricks that you can do with Firefox 3.5 and above, is apply SVG clipping paths, masks and filters to HTML content. You can read more detail about the technique here:

http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

That’s all very nice and impressive in theory, but in practice actually creating an SVG filter to do the job you want is a less than intuitive process. For some common uses – such as drop shadows – you’re better off using the CSS3 native code, such as box-shadow and text-shadow. But other effects really do need the power of SVG filters.

Luckily there’s an easier method for creating filters than coding them by hand: Inkscape. This is an Open Source vector graphics editor which uses SVG as its native file format. It’s a powerful program – certainly powerful enough that I use it to create my webcomic, The Greys – and it not only has a user interface for creating filter chains but, more importantly, it has a lot of good filters pre-defined.

To be fair, the UI for creating and modifying filters leaves a lot to be desired and is only a little better than coding them by hand. It would be a lot better if it were possible to select one of the intermediate filter steps in order to see the effect of the filter up to that point, as that would make it easier to understand how some of the more involved filter chains work. As it stands it’s a functional but somewhat inelegant way to set up filter chains without having to remember which filter primitives take which parameters.

Thankfully version 0.47 of Inkscape introduced a Filters menu which contains dozens of pre-defined SVG filter chains. Applying one of these filters is as simple as selecting a target object in the main Inkscape window and choosing the filter that takes your fancy. Below you can see the results of duplicating a line of text a few times and applying a handful of filters straight from the menu.

Basic Code

So we’ve got a browser that can apply SVG filters to HTML content, a blog entry describing how to do it, and a whole load of ready-made filters, just ripe for the picking. How do we combine these into one fancy HTML page? First of all, let’s start with a basic bit of HTML using the simplest of SVG filters, “feBlur”:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>

<svg xmlns="http://www.w3.org/2000/svg" height="0">
  <filter id="f1">
    <feGaussianBlur id="blur-filter1" stdDeviation="5"/>
  </filter>
</svg>

<style>
  .blur { filter:url(#f1); }
</style>

<h1 class="blur">This is an example of SVG filtered text</h1>

</body>
</html>

Save this with an “xhtml” extension (it needs to be XHTML, not just HTML, because we’re mixing XML languages using different namespaces – if you want to serve this online, you’ll need to make sure you use the correct XHTML mimetype). Then load it into Firefox >= 3.5 and you should see something like this:

Okay, let’s dissect the code so that it’s easier to work out what goes where as we move forward. First there’s the usual XML preamble and opening HTML tag. Next comes an SVG section which contains the filter itself. This is the most significant change from the original post linked above: rather than declaring the SVG namespace at the top of the page and then prefixing every SVG element, I’ve chosen to declare the default namespace on the SVG element itself. This means that the child elements don’t need to be prefixed – which will save us a lot of time when we start to introduce more complex filters. The filter is given an ID of “f1” so that we can refer to it later. Not much later, as it happens…

The next section is a simple CSS style rule which attaches the filter with an ID of “f1” to any element with a class name of blur.

Finally there’s the actual HTML – in this case an H1 tag to give us some big bold text to work on, as some of the filters don’t have much of an effect on thin small elements. To make extra certain you could, of course, add some additional styling to the .blur CSS declaration to ensure big bold fonts, but I’m trying to keep the markup clear of extraneous extras here.

Okay, that’s not too tricky. An SVG filter with an ID, a stylesheet to map that ID to a class, and some content that has that class. So what happens if we want to apply a more complex SVG filter to the text? Let’s start by creating an Inkscape file that uses it…

Getting Filters from Inkscape

Let’s fire up Inkscape and create a new SVG document containing our filter of choice. By default Inkscape starts with a blank canvas, so we just need to add some content and a filter to it. Because we’re aiming to style some HTML text, it makes sense to test Inkscape’s filters using a text object – but you can use any other Inkscape object, or even drag an image into the page, if you prefer:

0) I’m starting at zero because this is a non-essential pre-requisite step that will just make your filters a little easier to copy-and-paste later. In Inkscape select Inkscape Properties from the File menu, then find and select the SVG output section on the left. Make sure the Inline attributes option is checked, and set the Indent, spaces setting to something low (I use 2). These changes ensure that your filters don’t end up taking up dozens of lines in your text editor by putting each attribute on a separate line, and that any deeply-nested filter chains don’t go flying too far off the right of your screen.

1) Select the text tool from the toolbar on the left:

2) Using the toolbar at the top of the canvas, set some parameters for your text. Here I’ve chosen to use Arial as the font, with a size of 40px, left aligned, and emboldened. Setting the font size to something fairly large, and making it bold, both mean that there’s a larger drawn area for the filter to work on – some of the filters appear to have little or no effect if your target object is too small or thin.

3) Click on the canvas and type something.

4) Switch back to the selection tool (the arrow icon at the top of the toolbar on the left), and make sure your text is selected. If you’re not certain, click well away from it on the background of the canvas to de-select it, then click on the text to select it.

5) Pick a pre-defined filter from the Filters menu to try out. For our purposes we’ll use Leopard fur from the Materials sub-menu. You should see something like this:

6) Save the file, ensuring that you pick “Plain SVG” as the file format. If you inadvertently leave it as “Inkscape SVG” it won’t cause any problems, but you’ll have some unnecessary cruft in your file that you’ll have to work round or ignore later.

If you’ve been following along at home your file will look like this (it will be a bit different if you used another filter, and a lot longer if you skipped step 0):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="744.09448" height="1052.3622" id="svg3528">
  <defs id="defs3530">
    <filter color-interpolation-filters="sRGB" id="filter4196">
      <feTurbulence baseFrequency="0.143" numOctaves="5" type="fractalNoise" id="feTurbulence4198" />
      <feColorMatrix result="result1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -3.45" id="feColorMatrix4200" />
      <feComposite in2="SourceAlpha" operator="in" result="result3" id="feComposite4202" />
      <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 6 0" id="feColorMatrix4204" />
      <feMorphology result="result3" radius="1.8" operator="dilate" id="feMorphology4206" />
      <feGaussianBlur result="result3" stdDeviation="1" id="feGaussianBlur4208" />
      <feGaussianBlur result="result4" stdDeviation="2.7" id="feGaussianBlur4210" />
      <feComposite in2="result3" operator="out" result="result1" id="feComposite4212" />
      <feColorMatrix result="result3" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 6 0" id="feColorMatrix4214" />
      <feFlood result="result2" flood-opacity="1" flood-color="rgb(209,151,45)" id="feFlood4216" />
      <feComposite in2="SourceGraphic" operator="in" in="result2" result="result91" id="feComposite4218" />
      <feComposite in2="result91" operator="atop" in="result3" result="result3" id="feComposite4220" />
      <feGaussianBlur stdDeviation="7.2" in="SourceAlpha" id="feGaussianBlur4222" />
      <feDiffuseLighting result="result92" diffuseConstant="1.91999996" surfaceScale="10.60000038" id="feDiffuseLighting4224">
        <feDistantLight azimuth="225" elevation="48" id="feDistantLight4226" />
      </feDiffuseLighting>
      <feBlend in2="result3" mode="multiply" result="result3" id="feBlend4228" />
      <feComposite in2="SourceAlpha" operator="in" result="result3" id="feComposite4230" />
      <feTurbulence result="result92" baseFrequency="0.106" numOctaves="3" id="feTurbulence4232" />
      <feDisplacementMap in2="result92" scale="4.5" xChannelSelector="R" yChannelSelector="G" in="result3" id="feDisplacementMap4234" />
    </filter>
  </defs>
  <g id="layer1">
    <text x="53.20932" y="308.90967" id="text3538" xml:space="preserve" style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;filter:url(#filter4196);font-family:Arial;-inkscape-font-specification:AlArabiya Bold"><tspan x="53.20932" y="308.90967" id="tspan3540">Some Test Text In Inkscape</tspan></text>
  </g>
</svg>

Phew! There appears to be a lot going on in there – but that’s just because I’ve used a particularly complex filter. In practice we just want to copy the filter section into our HTML file, add a CSS rule to map it to our HTML and add some corresponding HTML. It doesn’t matter which filter you use in your Inkscape file, the basic steps are the same:

1) Start with the XHTML example file at the top of this page. We’ll add the new filter to it, but I’m sure you can work out how to completely replace the existing one if you want to
2) Copy the filter code from the SVG file. This is everything from the line that starts with <filter… to the line that ends with <filter/> – including the start and end lines themselves
3) Paste the filter code into the HTML document below the existing filter (i.e. just below the existing <filter/> line)
4) You can give the filter a shorter, snappier ID if you want – or stick with the Inkscape-generated one. In this case Inkscape has generated “filter4196” (at the end of the <filter… line), so I’ll replace it with “f2”
5) Duplicate the CSS line which currently maps the “blur” class to the “f1” filter. Edit the duplicate line with a new class name and the right ID for the new filter – in my case I’ve picked a class of “leopard” and changed the filter ID to “f2”
6) Add some HTML using the class you defined above
7) Save your XHTML file, and load it into Firefox

Here’s what my final file looks like:

<html xmlns="http://www.w3.org/1999/xhtml">
      
<body>

<svg xmlns="http://www.w3.org/2000/svg" height="0">
  <filter id="f1">
    <feGaussianBlur id="blur-filter1" stdDeviation="5"/>
  </filter>
  
  <filter color-interpolation-filters="sRGB" id="f2">
    <feTurbulence baseFrequency="0.143" numOctaves="5" type="fractalNoise" id="feTurbulence4198" />
    <feColorMatrix result="result1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -3.45" id="feColorMatrix4200" />
    <feComposite in2="SourceAlpha" operator="in" result="result3" id="feComposite4202" />
    <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 6 0" id="feColorMatrix4204" />
    <feMorphology result="result3" radius="1.8" operator="dilate" id="feMorphology4206" />
    <feGaussianBlur result="result3" stdDeviation="1" id="feGaussianBlur4208" />
    <feGaussianBlur result="result4" stdDeviation="2.7" id="feGaussianBlur4210" />
    <feComposite in2="result3" operator="out" result="result1" id="feComposite4212" />
    <feColorMatrix result="result3" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 6 0" id="feColorMatrix4214" />
    <feFlood result="result2" flood-opacity="1" flood-color="rgb(209,151,45)" id="feFlood4216" />
    <feComposite in2="SourceGraphic" operator="in" in="result2" result="result91" id="feComposite4218" />
    <feComposite in2="result91" operator="atop" in="result3" result="result3" id="feComposite4220" />
    <feGaussianBlur stdDeviation="7.2" in="SourceAlpha" id="feGaussianBlur4222" />
    <feDiffuseLighting result="result92" diffuseConstant="1.91999996" surfaceScale="10.60000038" id="feDiffuseLighting4224">
      <feDistantLight azimuth="225" elevation="48" id="feDistantLight4226" />
    </feDiffuseLighting>
    <feBlend in2="result3" mode="multiply" result="result3" id="feBlend4228" />
    <feComposite in2="SourceAlpha" operator="in" result="result3" id="feComposite4230" />
    <feTurbulence result="result92" baseFrequency="0.106" numOctaves="3" id="feTurbulence4232" />
    <feDisplacementMap in2="result92" scale="4.5" xChannelSelector="R" yChannelSelector="G" in="result3" id="feDisplacementMap4234" />
  </filter>
</svg>

<style>
  .blur { filter:url(#f1); }
  .leopard { filter:url(#f2); }
</style>

<h1 class="blur">This is an example of SVG filtered text</h1>
<h1 class="leopard">This is another example of SVG filtered text, now with leopard print!</h1>

</body>
</html>

And here’s what it looks like when I load it into Firefox:

You can rinse and repeat this process to add as many SVG filters as you like to your HTML content. Some work better than others, and some work better on images than text (yes, you can apply SVG filters to images in your HTML as well). The fact that inkscape provides an extensive library of pre-defined filters, and an opportunity to see them in action and even tweak them if you want to, means that producing the right filter for your needs is a lot easier than it would otherwise be.

Multiple Filters On One Object

It’s quite common to use multiple classes on a single element in HTML. The CSS rules cascade, with identical CSS properties overriding each other. Set the “font-size” in one selector, and it can be overridden by “font-size” in another. The same thing applies to the “filter” property that we’re using here. Initially you might think that you can add both leopard print and blur by using both classes:

<h1 class="leopard blur">This is an example of SVG filtered text</h1>

…but in practice one of the “filter” properties will override the other, so only a single filter gets applied (which one depends on how your CSS rules are written). The filter property can only take a single value, not a list of multiple values, so you can’t resolve the issue there, either.

If you want to use multiple filters on a single object, then unfortunately you have little choice but to construct an über-filter which combines all the filters you want to use into a single SVG filter element. It’s not as flexible as being able to apply multiple filters, but it’s also not as difficult as it sounds.

1) Create a document in Inkscape as above, adding your first filter
2) Add subsequent filters from the Filters menu – these will be appended to the first filter
3) Save the file and proceed as above, copying the über-filter from the Inkscape file into the XHTML file

In this way you can experiment with different combinations and ordering of filters within Inkscape before finally exporting your file. You can tweak each filter rule’s parameters in Inkscape’s filter editor and see the results applied immediately. This is a far more effective way to play with this capability than repeatedly changing the settings in the XHTML file and reloading the page in Firefox.

Conclusion

It’s common to see images used to replace text on websites, especially for headings. A good HTML coder will also add various tweaks and hacks to make the heading still work in text-only browsers or screen readers, not to mention making it visible to search engines. All this is a lot of extra work, which needs to be repeated every time a new heading is needed or an old one needs to be changed.

Many of these images are just text with a few stock Photoshop filters applied – exactly the sort of thing that could be achieved with SVG filters. By using SVG filters on HTML content the text remains as text – with all the accessibility and indexing advantages that implies. Unfortunately you have to weigh up these advantages against the enormous disadvantage of this technique only working in Firefox.

I can only hope that this functionality is made available in some (near) future versions of WebKit (Safari, Chrome, Konqueror) and Presto (Opera). I don’t hold out much hope for Internet Explorer, but as Microsoft has recently joined the SVG working group, there’s always a chance. In the meantime it’s an interesting application of technology but, like a lot of cutting-edge HTML, it’s not really practical for use on the web at large.

Posted in Tech, Web. 2 Comments »

Easy easing gets easier; hard easing stays hard

I’ve just been reading about CSS Transitions, which are part of the CSS3 draft specification, and which has been experimentally implemented in Opera, Webkit (Safari, Chrome and Konqueror amonst others) and in nightly builds of Firefox (with documentation on the ever useful devmo). CSS transitions provide a declarative way to animate CSS properties – in other words an easy way for a web page developer to say “this menu item should smoothly change from red to green, and get 3 pixels taller when the user puts their mouse over it”. As such they will be a great step forward in helping to make the web a prettier, more friendly place. Unfortunately it’s missing some of the most useful easing functions.

An easing function is essentially a curve which defines how the speed of the animation changes over time. Consider an element moving 100 pixels in 100 seconds. With a linear easing function, after 10 seconds the element will have moved 10 pixels, after 73 seconds it will have moved 73 pixels – it’s a simple 1:1 relationship between time and the value being animated (position, in this case):

In the CSS transitions spec, the easing function is always considered as starting from (0,0) and ending on (1.0,1.0), so the graph sticks to these figures. In practice you can think of the graph as showing time running from 0 to 100% of the transition period on the x-axis, and the relative value of the transition running from 0 to 100% on the y-axis. By changing the shape of the easing curve it’s possible to create animations which seem to accelerate or decelerate, which often gives a more pleasing result. In adddition to “Linear” the spec defines the following easing functions: ease, ease-in, ease-out, ease-in-out:

In addition to these basic easing functions, you can specify a custom function. In practice what you’re actually defining is the location of the two bezier control points that affect the easing function, but it does mean that you can go some way outside of the default curves if you really want to:

But here’s where the restriction comes in. Your custom function actually only specifies the location of two bezier control points – and they have to be within the range 0.0 to 1.0. You can’t have an easing function with extra intermediate points in it, and you can’t have an easing function whose value goes above 100% or below 0%. What that means, in practice, is that you can’t have an animation that appears to overshoot its destination before sliding back into place:

It also means that you can’t have an animation that overshoots its destination value, then undershoots, then overshoots, eventually rippling to a halt:

And you can’t create a bouncing ball animation:

You know that rebounding effect that you get when you scroll too far on an iPhone menu? You can’t re-create that. Perhaps you’d like to code your e-commerce site with a bounce effect as people drop things into their shopping baskets. Nope, you can’t do that either.

Yes, technically it’s possible to string several animations together by writing some script to catch the “transitioned” event and then trigger another animation. The devmo page even gives an example of doing exactly that to continuously animate a box with text in. But really that’s a crap workaround when the real solution is for the spec to allow more sophisticated easing curves.

It’s great that web developers will soon be able to trivially animate CSS values using simple easing functions. It’s not so great that they can’t trivially use more complex easing functions. We live in a world where mobile phones have user interfaces which pulse, bounce and ripple, providing visually stimulating feedback. Is it too much to ask for our browsers to easily allow the same?

Posted in Tech, Web. No Comments »