Home / Blog
Smooth image resizing in Internet Explorer with CSS
With the advent of Firefox 3, which introduced the Cairo image library to its rendering engine, web developers now have access to smooth image scaling within the browser. This means you can take an image larger than you need and resize it with CSS to fit - especially useful in producing fluid expandable layouts for variable resolutions [more on that another time].
Sadly there's always a caveat, and as usual that caveat is Internet Explorer. The dynamic image scaling in IE has always been ugly. After some application of google-fu to solving this problem, I discovered a fix for IE7. There is a little-known proprietary setting (isn't there always!) - that for some reason wasn't applied as the default - that allows you to access the 'interpolation mode' of the browser resize.
The page at MSDN explains the two methods of use - an MS proprietary CSS selector:
img { -ms-interpolation-mode : bicubic; }And the Javascript method:
object.style.msInterpolationMode = "bicubic";If for some reason you like the terrible standard rendering method, you can of course set these values back to 'nearest-neighbor'.
There are still some issues with this method. Firstly it doesn't seem to work on png at all (see tux below). Secondly, it can end up rendering some gifs a bit too smooth (see MCFC badge below). For me it's at its best when resizing jpegs (including scaling up!), and most noticeable when they're Jpegs with text. The Lolcatters will be happy.
So - a quick demo for those of you browsing in IE7 - here's some samples in Jpeg, gif and png format, with text and images to demonstrate the difference this makes. In the example I've used inline styles, but to implement this in general you would just put the following in your stylesheet:
img { -ms-interpolation-mode : bicubic; }
If you don't have access to IE7, here's a screencap of the example.
Jpeg
Gif
Png
In Firefox 2 this should still look ok, and will be great in FF3. For those of you still in IE6 land there's nothing I can do for you. The lack of PNG transparency, and apparently only a 15% market share means I've abandonded IE6 for non-commercial projects - hell you must be used to seeing a pretty ugly web anyway. The hacks that exist to 'fix' IE6 are too cludgy to use without a financial reason.
This fix will be useful for usage in anything with lots of random sized images - such as in my CSS Vertical Align 'neat thumbs' example.
CSS | posted by Tom - 2008-08-26 23:28:41
comment on this post | (0) comments already
Cross Browser CSS Vertical Align
I have frequently been asked, when converting people from Dreamweaver + Tables to pure CSS layouts, how to emulate the vertical alignment behaviour seen in table-cells. Due to Firefox's lack of support for inline-block, and IE's lack of support for table-cell, this has been a pretty intractable problem. I had a cause to have a bash at it today - given the task of creating neatly laid out image thumbnail galleries from unknown-sized images, without resorting to server side image-sniffing, and have cobbled together the following solution:
Pure CSS Thumbnails From Random Sized Images
I should point out here for the purists that it is not _pure_ css. It uses a single 'expression' for IE6 to get around the lack of Max-Height - a truly insoluble item I believe. It also relies on a couple of lesser known -moz selectors for FF2 which for some reason lacked inline-block. These are: display: -moz-inline-box and -moz-inline-stack.
For the rest, I think you are better looking at the example, which has heavily commented CSS included.
As a quick demo, here's some of what you can do:
Image 01
Description
Image 02
Description
Image 03
Description
Image 04
Description
Image 05
Description
Image 06
Description
Image 07
Description
Image 08
Description
Image 09
Description
CSS | posted by Tom - 2008-07-10 22:35:32
comment on this post | (0) comments already
Union Filesystems for MythTv
I have had a MythTv system running for some years now, having wanted one ever since I chanced across an install in the downtown Toronto apartment of a guy who was donating me an old box (200Mhz Pentium, without even a CD-ROM drive) for linux experimentation.
Myth is a free/open source DVR, or 'TiVo for tightarsed techies', which functions primarily as a video and music centre, but also for photo galleries, RSS reader, weather etc. Similar to Windows MCE but more powerful and as a consequence slightly more painful to maintain.
This maintenance is often refered to by the concept of 'WAF' or "Wife Acceptance Factor", as failure to achieve WAF has been the undoing of many a techie project over the years. Thus any glitches or limits in functionality that may affect WAF are high on the list of things to iron out. I have managed to convert our entire house to a pure Ubuntu shop with minimal flaws, but I dread the occasional call I get at work when the Myth box has overheated and shutdown, and I still need to walk through some manual (vnc / mount) type things to get it back up.
One longstanding WAF issue relates to video folders in MythVideo. As the amount of media has increased, it has spread from the Myth backend to some nfs mounts on other boxes, and the horribly hackish way that had been achieved was folders symlinked as "Newer","Newest" etc., containing subdirectories of TV shows and movies, all showing up as separate trees in the root of the video section, and making navigation somewhat painful.
I was thinking of reorganising my files to accomodate this, copying all shows on one drive, documentaries on another, etc. This had the obvious flaw of relying on predetermining how large a given collection would grow, as well as just being pretty ungraceful. Raid/LVM was not an option, due to the multiple machines housing the files, and additionally without proper redundancy you run the risk of losing all files with a single disk failure. Buying new boxen was also not, due to the financial necessities that having an infant brings.
Then I encountered UnionFS. The idea sounded great - multiple filesystems / structures can be conjoined in to one tree, with the filesystem 'overlay' essentially representing them as one to the OS. Thus I could have 3 folders in different physical locations, all labeled 'TV', containing different content, and UnionFS would make one large 'TV' folder containing all of the files.
This seems to be a server technology that has primarily been used for the liveCD/diskless set, to enable such clever things as nonexistant root partitions being mounted from elsewhere. As such you would think it would be fairly well set up, documented, and reliable. Apparently not. Documentation is sparse, implementations sparser still, and apart from being installed as default in Ubuntu Gutsy I couldn't get much further than a basic single mount command to play with. As for known bugs, much was made of using read-only branches as there are horrors which "could even RESULT IN DATA LOSS", which is fine as these various disks are already accessible by the different machines adding content, and the test I did with a few simple local folders seemed ok. Until I added nfs into the mix.
On mounting a remote filesystem, and attempting to ls the tree, I was initially fine until I listed the 'Movies' directory. At this point the vnc server hung (and apparently the box). ssh was locked out. There was an almighty kernel 'oops'. Apart from the general swearing, a few key phrases from the resulting messes I encountered follow:
- Unable to handle kernel NULL pointer dereference
- call trace
- sys_readahead
- mount: special device none does not exist
- on attempt to umount - "device is busy"
To cut a huge story slight less huge, I gave up after a few hours googling. I then tried aufs, "Another Union File System" as it is called, in the great tradition of badly named unix programs. This is supposed to be installed by default in the next Ubuntu LTS release (Hardy Heron), but then again, UnionFS was released in Gutsy and was pretty broken. Now I am no slowpoke these days with linux, but I couldn't even work it due to lack of docs. "unknown filesystem type aufs" was one of the many errors I encountered, and following some compile-hell, I gave up.
Finally I encountered funionfs. This is mentioned as an afterthough on FUSE (Filesystem in Userspace), and as apparently is so with all of these union file systems, is horrendously documented, and relies on much prodding to check if it will work. The mount syntax is essentially similar to the other two discussed, but the crux of all of this ended up with the following simple method to get conjoined filesystems across nfs shares in Gutsy:
tom@Bender:~$ sudo apt-get install funionfs
tom@Bender:~$ mkdir ~/Myth
tom@Bender:~$ sudo mount -t fuse -o dirs=/mount/Zoidberg/Myth:/mount/Nibbler/Myth:/home/tom/Videos -o allow_other funionfs#NONE /home/tom/Myth
I am posting this in the hope it may increase WAF in your vicinity. The end-result is pretty damn seamless, and will make adding new media a simple process, even with fresh filestores. This sort of transparent filesystem joining is something I hope will become increasingly easy and transparent in the future, with Apple's grey(white) boxes and networked optical drives etc currently leading the way in the super-user-friendly variety. Gutsy and MythBuntu are not the best of friends right now, and I will approach Hardy with trepidation due to the inevitable breakage that will occur. That said, Linux has come a long way since I tried net-installing a floppy-bootstrapped slackware on a P200 some years ago due to a machine which didn't even have a CD-ROM drive.
*Update* Funnily enough, just a couple of days after posting this I see that Myth Tv 0.21 has added a feature called "Storage groups". This suggests that it does a similar function at the application level, but I cannot yet find sensible docs to figure out if this is a better solution.
linux | posted by Tom - 2008-03-10 14:40:14
comment on this post | (0) comments already
Safari On Windows
Safari For WindowsIn a brief moment between projects today, I had a glance at the beeb's RSS feed, only to see "Apple announces Windows browser". So on I click, assuming I'll see some roadmap for a Safari Windows port as has been rumoured on and off for years. But No! No roadmap, but a full public beta.
Is it surprising that they have ported it? No, it's been rumoured for a while, and frankly anything that makes the Windows user more comfortable with Mac UI design will ease transitions. Well, that's as maybe, but what surprised me about this was that it was done totally by stealth. I am a bit of a news junkie, and always keep up to date with a huge range of tech site news - /., el Reg, and more frivolous ones - boingboing, digg etc. I haven't even heard a rumour of this until it drops on the BBC (via Jobs at a SanFran apple dev. conference).
Why do I care that they did a stealth release? Well, essentially no matter how well coded a browser is, there's always its own little quirks. As a webdeveloper, it helps to know the quirks for all browsers above a ~1% market share. The more browsers, the more competition which is great, but I prefer to pick up their idiosyncrasies as they gradually gain mindshare. Firefox was a good example, Opera has always been around, and now that Ubuntu is pushing forward on the desktop, it's worth taking a look at whether that has issues (Media integration with Firefox being one).
With this release though, there's a certain instant Mac fanbase trapped at work on Windows PCs who will jump at it. Then there's the inevitable... Jobs is a great marketer, so he wants a good marketshare what does he do? Integrate some minor part of iTunes into Safari, and BLAM. 5-10% marketshare from the iPod fanboi contingent.
First in my line of weird quirks?
For some reason unbeknownst to me, the default font that Safari chooses is a rather illegible "Brady Bunch" font from the depth of my font repository.
tech | posted by Tom - 2007-06-11 12:26:04
comment on this post | (0) comments already
Warning - visiting this web site may harm your computer!
Try this link, and click the top result: http://www.google.com/search?q=bugs+lyrics+lyricsandsongsYou should find that rather than immediately getting the lyrics to Pearl Jam's 'Bugs', you get a warning about potential bugs. If it is not operating in your local google, this link should show you the google error page I am getting.
___
Warning - visiting this web site may harm your computer!
You can learn more about harmful web content and how to protect your computer at StopBadware.org.
Suggestions:
* Return to the previous page and pick another result.
* Try another search to find what you're looking for.
Or you can continue to http://www.lyricsandsongs.com/song/817.html at your own risk.
Advisory provided by Google
____
Now I'm not sure where I stand on this. On the good side, this stops people from maliciously infecting machines if the user is foolish enough to use IE on the open internet - the online equivalent of procuring prostitutes in phuket without prophylactics - or they compulsively click "Yes please download my dodgy software"
The obvious 'con's of this are it is purely reliant on the quality of Badware.org's data, potentially open to abuse by interested parties, and also opens doors to further censorship potentially in the future...(Warning - visiting this web site may harm your Mind! - immediately occurs.)
I won't enter into a tedius discussion of potential liabilities GOOG could face as a result - that can be left to Slashdot - but I will say if you're worried about censorship of your search results, then Google is already doing that (although under litigious duress usually).
In all I'd still say it falls under 'do no evil'...but probably going to annoy me more than anything, as I'm now (apart from one sandboxed testing machine at work) a pure Ubuntu operation, so it's one more click for no gain.
If it cleans up the interweb a bit though, a good thing, though people will no doubt always find idiotic ways to infect themselves.
web | posted by Tom - 2006-11-24 11:57:21
comment on this post | (0) comments already
powered by Walsham Blog v.0.1
