After some tinkering, here’s how I did it:

• Install Wine. I suggest not using the latest 0.9.60 release since my Foxit (and Office 2003) install crashed when being started after upgrading from 0.9.59. This means you’ll have to install using the .deb packages, as detailed below. If you want to downgrade from an existing install, you’ll have to use the command line dpkg to install 0.9.59.
  1. Download the Wine 0.9.59 .deb package for your processor type from the WineHQ archive.
  2. Just double-click the file to install it using the GDebi Package Installer.
  3. You might face a dependency problem if you’re using Ubuntu Hardy since the libldap2 package has been superceded. Just download the necessary file from here as described by post #16 in an Ubuntu thread. It’s also a .deb file, so install it as per the above. Then repeat the Wine installation.
  4. You’ll need to configure Wine now, but I’ll leave you to the expert hands of the Ubuntu documentation for that. Once you’re done, move down for the remaining instructions to install Foxit Reader.
• Install Foxit Reader 2.3.
  1. Download a copy of Foxit Reader 2.3.
  2. Just double-click the setup file and install as per the usual Windows application, i.e. Next… Next… Finish. If the double-clicking doesn’t work, use the console and enter wine FoxitReader23_setup.exe after entering the directory you saved your setup file in.
  3. Now, to make sure you can use Foxit as the default PDF reader application by using the guide at SODEVE.

Hope that works for you, as it did for (happy) me. Yay for commenting features and tabs. What else would you need anyway? EDIT: I forgot that the commenting features are part of the Pro Pack. But you can easily get a free copy by completing an offer for other services. Just make sure you don’t overstay the offer’s welcome.

In any case, to each his own, and if you’re reading this post, I’ll presume you have all intention of getting VMW 6.5 to work on the just-released Hardy (same procedure with the betas actually).

1. As per the Ubuntu documentation, you will first want to install the necessary dependencies via:
   sudo apt-get install linux-headers-$(uname -r) build-essential gcc-3.4
2. Download a free copy of the software at the VMWare Community website. Take note of the serial key.
3. Download the any-any-update as well.
4. Untar your downloaded copy via:
   tar zxf VMware-workstation-e.x.p-84113.i386.tar.gz
5. Also untar the any-any-update the same way as above. Change into the any-any-update directory and enter
   sudo ./runme.pl.
6. Here’s a crucial bit to tackle a networking bug that many Hardy (beta only? I got it when I was using the beta, so I’m not sure if you’ll get it with the final release) users get with the current VMware 6.5 Beta release (build 84113).
   • Change directory via
     cd vmware-distrib/lib/modules/source/.
   • Untar the vsock.tar file via
     tar zxf vsock.tar
   • Enter the vsock-only directory via: cd vsock-only
   • You’ll want to edit the Makefile.kernel file, so: sudo gedit Makefile.kernel
   • Comment out a few lines by adding a # in front of them. Here are the lines after being commented out:
     #vm_check_build = $(shell if $(CC) $(CPPFLAGS) $(CFLAGS) $(CFLAGS_KERNEL) \

#$(EXTRA_CFLAGS) -Iinclude2/asm/mach-default \

#-DKBUILD_BASENAME=\”$(DRIVER)\” \

#-Werror -S -o /dev/null -xc $(1) \

#> /dev/null 2>&1; then echo “$(2)”; else echo “$(3)”; fi)
   • Exit gedit, go back to the previous directory via cd .. and tar the folder back into vsock.tar via tar -cf vsock.tar vsock-only.
7. Then, run the VMware install script:
   export CC=/usr/bin/gcc-3.4 && cd vmware-distrib && sudo ./vmware-install.pl
   Note that this is actually 3 commands, with only the last one being relevant if you’ve already changed into the vmware-distrib directory (and maybe the first one, though I didn’t need it).
8. You will be prompted on whether you want to run vmware-config.pl, which you should do. All the defaults should be fine (i.e. just keep pressing enter). Note that if you accidentally type no, you can always run the configuration script by entering /usr/bin/vmware-config.pl.
9. To complete the networking hack above, run vmware-networks --postinstall ws,0,1 as per this forum thread.
10. Run VMWare Workstation via your Main Menu, or by entering vmware or /usr/bin/vmware in the console.
11. You will be prompted to compile some modules, which is okay. After that’s complete, enjoy your copy of VMWare Workstation 6.5 Beta!

Some FAQs:

• Debug mode slows VMWare 6.5 Beta down. Can we turn it off?
  Well, we’re not supposed to, but a post here describes how to do it if you want to. There is a noticeable speed increase for me (i.e less laggy when using a couple of apps), even though I’ve allocated the full 2 cores + 1.5GB RAM to my Win XP guest OS.
• VMWare is just slow in general in any guest OS. Make sure you’ve installed VMWare Tools via the VM menu.
• Unity doesn’t work. You might have to disable 3D acceleration in your virtual machine’s settings.
• I can’t get VMWare to recognise my Windows Mobile 5/6 device. There are a few solutions to this and since I’ve pretty much applied all of them, I’m not sure which will work for you. I suggest just trying them out one by one till your phone syncs. Solution 1 (check post #3); Solution 2 (see post #11); Solution 3 (check post #4, then post #1)
• Other Issues, e.g. VMWare Tools installation problems? Refer to the Ubuntu documentation on VMWare, check the official VMWare 6.5 Beta User Manual, and/or participate in the VMWare Beta Forum. Here’s another Ubuntu thread that might help if all fails (read the Possible Fixes section).

Switcher is an alternative, but it works only with Vista + Aero and doesn’t seem to introduce any new features compared to DExposE2 (except maybe for personalisation). Oh yes, almost forgot to say that both applications are absolutely free.

I’ve tried both in my WinXP VMWare guest OS and they work fine, though they’re pretty much unnecessary since I’m no longer using WinXP as my primary OS. Compiz Fusion can handle all my Expose needs (and more) in Ubuntu.


]]> http://blog.zmang.com/dexpose2-full-featured-expose-clone-for-windows/feed/ http://blog.zmang.com/ubuntu-804-almost-possible-to-dump-windows/ http://blog.zmang.com/ubuntu-804-almost-possible-to-dump-windows/#comments Thu, 24 Apr 2008 19:25:58 +0000 ZMAng http://blog.zmang.com/?p=103 A crashing Windows XP installation and plain lethargy to reinstall the system pushed me to bring Linux back to the fore on my primary PC. As a one-time Mandriva (Mandrake) user, I was tempted to pick it up again (especially for the pre-packaged Synce for my WM6 mobile), but decided to go for the ubiquitous Ubuntu. 8.04 Beta seemed stable enough, so…

Weeks later, Hardy Heron didn’t disappoint and I’ve found replacements for almost everything I normally use. Of course, I cheated a bit by using VMWare Workstation 6.5 Beta for some “irreplaceable” applications (here’s a guide on how to install it in Hardy).

• Browsers: Firefox 3 Beta 5, IE 6/7 (via Wine) for web design chores
• Downloading-related: Deluge for uTorrent, Firefox’s DownThemAll for Flashget (yeah, not a real replacement, but works okay enough), XChat for Sysreset
• Media Playing: Amarok for MediaMonkey (MM is still a number of steps ahead though), there’s VLC for Linux as well, and mplayer somewhat handles what VLC cannot. Still prefer Zoom Player + CCCP on Windows, but this will do for now.
• Web Dev-related: PuTTY for Linux exists and so does FileZilla. Geany for Notepad++, kdesvn for TortoiseSVN (partially…)
• Office-related: MS Office 2003 via Wine to replace MS Office 2007. Foxit Reader via Wine (it’s faster for me and more up-to-date in terms of features than the Linux version). See this guide on getting it installed in Ubuntu.
• Graphics: GIMP for Photoshop CS3 (yeah right, see below)
• Eye candy: Avant Window Navigator for ObjectDock. Compiz-Fusion for everything else.
• Security: Firestarter for Zone Alarm, no real need to replace NOD32 yet.
• Misc. Gnome-DO for Launchy, Snippits for Texter, K3b for Nero/Alcohol, FreeMind for MindManager (which I still prefer, but beggars can’t be choosers), there’s Pidgin for Linux, Ubuntu has its own Terminal Server Client and VNC viewer, plus Wine/VMWare for everything else.

Only a few things still bug me:

• Syncing with my HTC TyTN still fails miserably. Synce installs, so so does SynceKPM, but when it comes to OpenSync/Multisync, hell breaks loose.
• Linux (in general) still lacks a PDF viewer that is full-featured enough for an avid PDF e-book reader like me to survive on. Primarily, I want need highlighting and the rest of the commenting feature set. Maybe I’m not searching hard enough, but if so, do give me a hint. Until then, Foxit Reader works great.
• Adobe Photoshop is pretty much irreplaceable. Well, there is GIMP, and it is definitely good enough for the average home user, but just isn’t powerful enough.
• I want Ultramon! Compiz-Fusion’s Place plugin isn’t reliable enough yet. And how do I assign different wallpapers for different monitor screens?
• OpenOffice and its open-source alternatives just aren’t compatible enough with Microsoft Office. Yes, you can install MS Office via Wine, but only up to Office 2003 reliably (there is an Office 2007 install guide, but I haven’t been able to get it to work).
• And… I guess I’m too hooked on MS Outlook to run far from it. Kontact, Evolution, and etc. just don’t cut it for me (though they are certainly excellent applications in their own right).
• Oh yeah, something like TortoiseSVN for GNOME would be nice…. Kdesvn works fine for now, but something that integrates better with Nautilus would be great (so would icon overlays; and no, switching to KDE for that is just not right :)).

For now, VMWare Workstation 6.5 (the current beta is free) with a WinXP guest OS works well enough for all the above needs. Now all I need is for Unity mode and graphics acceleration to work reliably under GNOME. Would be nice if I could assign more than 2 cores to it too, but that’s unlikely enough for a desktop product.

Now, enough ranting and back to scheduled exam revision.


]]> http://blog.zmang.com/ubuntu-804-almost-possible-to-dump-windows/feed/ http://blog.zmang.com/off-to-the-airport-and-beyond/ http://blog.zmang.com/off-to-the-airport-and-beyond/#comments Tue, 19 Sep 2006 06:34:12 +0000 ZMAng http://blog.zmang.com/off-to-the-airport-and-beyond/ In a few hours, I’ll be off to the KL International Airport with my mom and bro via uber-Dad Transport Services. The flight’s at 7.30pm, but considering the high likelihood that we’ll be overweight, allocating some time to rearrange our luggage seems like a logical choice.

So, if nothing goes wrong, we’ll arrive at Heathrow Airport in like 15 hours or so. But for now, you might just want to have a look at the luggage we’re carrying on board:

Yeah, this isn’t all of it.


]]> http://blog.zmang.com/off-to-the-airport-and-beyond/feed/ http://blog.zmang.com/aol-xdrive-5gb-free-storage-online-backup/ http://blog.zmang.com/aol-xdrive-5gb-free-storage-online-backup/#comments Sat, 16 Sep 2006 09:07:43 +0000 ZMAng http://blog.zmang.com/aol-xdrive-5gb-free-storage-online-backup/ For starters, let me state that I’ve been a pretty happy user of Box.net for file storage/sharing, and Mozy for online backup for the past few months or so. Despite that, I’ve been trying to find a hybrid file storage/backup service comparable in quality to the Box.net-Mozy combo. One also charging the irresistable price of $0.00, of course.

My first stop was Streamload’s MediaMax, which based on the past few weeks, looks pretty good. But details on that in another post.

Let’s plunge into AOL’s latest offering instead: 5GB of online storage/backup free of charge on Xdrive. From the outset, it’s clear that AOL has decided to play the number game since all other online storage services, except for MediaMax (25GB), cap their free plans with at most 2GB of storage. A good thing? It depends - first and foremost on the bandwidth limits we’re going to be hit with. Unfortunately, there isn’t even a single reference to the word “bandwidth” throughout the site.



But raw numbers aren’t everything. So, let’s examine interface and functionality next. Web-wise, Xdrive’s UI is pretty slick - though this results in relatively load times for me - against MediaMax for example. And just because I’m picky, I’m also going to call out the unnecessary opening of a new window (by default) to launch the Xdrive file manager. FYI, Box.net doesn’t do it, and neither does MediaMax. Moving on, pictures, music and video have their own sections. And this distinction is more than just visual. While you’re able to share your pictures, videos and other “normal” file types, e.g. documents, publicly, you can’t do the same with the music. Clearly, copyright infringement is an thorny issue AOL wants to address as early as possible.



PC-wise, the Xdrive Desktop impresses. That is, if you manage to login to your account. I failed to do so on my own account, so the opinions that follow are derived from the software’s general interface and feature set, plus a close friend’s experiences. Unlike Box.net or MediaMax, Xdrive maps a drive to Windows, so you can treat your online drive pretty much like your local one. This makes it easy to sync highly-used files (simply drag ‘n drop), though it still falls short of the automatic real-time synchronisation of local files and folders I’m dreaming of (MediaMax comes close on this point).



File backup has all the critical features you might expect. You can choose files to backup based on the folders they are in or their file type. And you can schedule automatic backups on a daily basis. It would be nice to see the ability to filter via both folder and file type like Mozy though. As it would be nice to see the automatic backup frequency upped to “several hours” - with consideration to CPU and connection utilisation - like how Mozy does it.

On both Xdrive’s web and desktop interfaces, however, lie one unique feature: Skip the Download (also called Archive This). Via a plugin, or through your web file manager, you can download a file online right to your Xdrive, i.e. a server-to-server transfer, rather than download it to your PC and upload it back to your online drive. AOL touts this as the perfect feature to “…quickly archive your blog postings, profile pages and more directly.”

Overall, I believe Xdrive has the potential to be a formidable contender to current file storage and backup services. Once some of the improvements I’ve suggested actually materialise (just maybe, AOL might want to setup an API too), it’s certain that AOL will have a strong offering at their hands, especially given some of the unique features Xdrive provides.

P.S.: One peculiar(ly irritating) problem I noticed was the recurring inability to log into my account, leaving me with this:



I hope I’m the only one getting this problem, because it really, really sucks.

Update: I can login via the Xdrive Desktop now - not sure why.


]]> http://blog.zmang.com/aol-xdrive-5gb-free-storage-online-backup/feed/ http://blog.zmang.com/rm150-us42-fish/ http://blog.zmang.com/rm150-us42-fish/#comments Fri, 15 Sep 2006 19:18:36 +0000 ZMAng http://blog.zmang.com/rm150-us42-fish/ RM150 fish. I’m never forking out the money for one of these. But then, I’m no fish lover. P.S.: What’s the math on this? RM13/kg implies that we’re talking about an 11kg fish!

]]> http://blog.zmang.com/rm150-us42-fish/feed/ http://blog.zmang.com/microsofts-zune-is-in-the-house/ http://blog.zmang.com/microsofts-zune-is-in-the-house/#comments Thu, 14 Sep 2006 20:20:20 +0000 ZMAng http://blog.zmang.com/microsofts-zune-is-in-the-house/ The much hyped (or is it the opposite?) Zune has finally been unveiled, with pictures (yep, iPoddish, but then the iPod was Creative-ish anyway) and full tech. specs. of the first device available everywhere. 30GB hard disk, FM tuner, 3-inch screen, video playback and… wait for it… wireless connectivity via 802.11b/g. Amazing, or plain overkill?


Well, I’ve to admit I’m still divided on that, but then so is the interweb - with a reader poll running on GigaOm on the issue. Anyway, the main reason for my lack of exuberance over the wireless connectivity is its sheer power sucking nature. First and foremost, I’d want my MP3 player to last enough hours to survive a normal day at least. Wireless comes second. Period. (But then, my stance on this could be influenced by my ownership of a PDA - which already has wireless connectivity and has relatively lousy battery life.)

And if you thought that was all Microsoft had up their sleves, you are sorely mistaken. The Powers That Be at Redmond have decided to make Zune Web 2.0 via a social sharing system. Apparently, you’ll be able to share the songs on your Zune with another Zune via wireless - though the transferred media is valid for only 3 plays or 3 days, whichever comes first. An irritating restriction, so I wouldn’t be surprised if the first hack that comes out for Zune addresses it.

Pricing hasn’t been revealed yet, and the only date that has been revealed is “this holiday season”.

Update: Apparently, the Zune is “big and clunky”, and is “a little heavy” too. A big turn off for me, even though this isn’t surprising given its feature set.


]]> http://blog.zmang.com/microsofts-zune-is-in-the-house/feed/ http://blog.zmang.com/philippines-trip-unfulfilled-potential/ http://blog.zmang.com/philippines-trip-unfulfilled-potential/#comments Sun, 10 Sep 2006 08:43:27 +0000 ZMAng http://blog.zmang.com/philippines-trip-unfulfilled-potential/ Remember that huge list of tourist spots I outlined for the recent self-planned trip to Manila, Philippines I went on? Well, it seems my skepticism at visiting all those places was more accurate that I suspected. Oh yes, before making the jump to my rant, you might want to catch the photo set for this trip first (yeah, I lost some a lot of photos yet again, urghh… stupid software!).



It was entirely possible to pack everything into the actual schedule really, but various unforseen circumstances destroyed my “well-laid” plans. Who would have thought University Santo Tomas was closed to outsiders due to the Philippines’ tight security policy? And how many people would have realised that the National Museum was almost inaccessible via taxi during weekdays (think KL traffic)? Last but not least, I underestimated the size of some of these places (e.g. Chinese Cemetery). Physical limits reign supreme after all.



Bah. Overall, it was a nice trip though. Much better than I expected considering that capital cities of any country tend to be dead boring (unless you see shopping as your life’s dream). If there’s anything I’d complain about, it would be the fattening food (at least, where I went)! Meat seemed to be everywhere, and let’s just say they were tempting enough for me to break my diet.

Anyway, back to veggies and prep for the flight to UK for me…


]]> http://blog.zmang.com/philippines-trip-unfulfilled-potential/feed/ http://blog.zmang.com/shorty-vs-sidepath-the-difference/ http://blog.zmang.com/shorty-vs-sidepath-the-difference/#comments Sun, 10 Sep 2006 08:18:48 +0000 ZMAng http://blog.zmang.com/shorty-vs-sidepath-the-difference/ It seems the cloning trend has entered self-hosted redirection services as well. I’d love to know what advantages newly-launched paid software Sidepath has compared to the slightly more established free software Shorty. Anyone?

And let’s not forget that Shorty’s feature set seems much more robust, e.g. multiple URL generation methods. Of course, I’m basing this on Sidepath’s demo movie and my personal install of Shorty, so correct me if I’m wrong.

One last thing: Where’s the working online demo of Sidepath? Before forking out US$10.75, I’d definitely like to try it out first. Funny that Shorty has a working demo, eh? Not that I’d need one though since it’s free.

P.S.: Yep, it’s most likely that this is a case of two competitive products launching at about the same time.


]]> http://blog.zmang.com/shorty-vs-sidepath-the-difference/feed/ http://blog.zmang.com/synchronizing-google-calendar-and-microsoft-outlook/ http://blog.zmang.com/synchronizing-google-calendar-and-microsoft-outlook/#comments Fri, 08 Sep 2006 12:47:58 +0000 ZMAng http://articles.zmang.com/software/synchronizing-google-calendar-and-microsoft-outlook/ Well, we’ve heard it a thousand, maybe a million times: It’s only a matter of time before Google Calendar (gCal) rules the online calendar sphere. For certain, it’s a solid application, and comes integrated with Gmail too. But great as it is, one issue still prevents that from happening: gCal + Microsoft Outlook synchronization. Yes, a perfect two-way sync.

It’s honestly surprising that Google engineers haven’t bothered to whip up a MS Outlook plug-in for this purpose, but rather than continue dreaming, let’s look at the various methods that have been introduced by independent developers instead:

• RemoteCalendars (RC)
  An open source plug-in for Outlook 2003, RC provides you the necessary functionality to subscribe and sync with remote calendars, such as gCal. However, getting it to work right isn’t a walk in the park. You will want to refer to a step-by-step setup guide, which should then be followed with publishing instructions over at the official documentation. Even then, you mileage may vary.

• ScheduleWorld + SyncML/Funambol Outlook Plugin
  This approach involves using ScheduleWorld (SW) - a free web service (at the time of writing) - as the middleman between gCal and Outlook. For step-by-step instructions, refer to a detailed guide on this approach. Note, however, that you no longer need to copy your calendar’s Private iCal Address to SW as SW automatically pulls your calendars via your gCal User ID and password. Also note that SW does not automatically/periodically sync with gCal (though a script to do that seems to be available).

• CompanionLink for Google Calendar (CLGC)
  A pay-for software (US$29.95 at the time of writing), CLGC is an independent software which allows you to synchronize gCal with most, if not all, of the latest mobile devices and Personal Information Managers (PIMs) available. However, not only is it not free, it seems to be bug-ridden as well. Moreover, you can only sync your default gCal at the moment, so syncing multiple calendars via CLGC is currently out of the question. So, like RemoteCalendars, your mileage may certainly vary. Therefore, it is suggested that you try their evaluation version first before purchasing a copy.

Clearly, a perfect two-way syncing solution for gCal and Outlook has yet to be developed. So, any developer that does come up with one will certainly be blessed with gratefulness (both verbal and monetary).


]]> http://blog.zmang.com/synchronizing-google-calendar-and-microsoft-outlook/feed/ http://blog.zmang.com/short-pre-uni-vacation-to-philippines/ http://blog.zmang.com/short-pre-uni-vacation-to-philippines/#comments Fri, 01 Sep 2006 13:30:09 +0000 ZMAng http://blog.zmang.com/short-pre-uni-vacation-to-phillippines/ In a few hours, I’ll be off to Manila, Philippines for a 4-day, 3-night vacation with my family - courtesy of AirAsia’s uber-discounted plane tickets (~RM30 pax excluding airport tax). It’s a completely self-planned trip (yep, by poor me), so I’m expecting quite a few problems to crop up, and a lot of walking given the lack of a tour bus.

I’m taking it as target practice for future trips when I’m over at the UK, so I’ve tried to pack the itinerary as tight as day tours do it:

1. Day 1:
   Not much can be done here since it’ll be at least 3pm when we reach Manila.
   • Quezon City Area
   • Chinese + North + La Loma Cemetery
   • Ortigas Center
     • SM Megamall
     • Robinson’s Galleria
     • Shangri-La Plaza
2. Day 2:
   Here’s where the heavy lifting happens.
   • Iglesias ni Cristo
   • University of Santo Tomas
   • Malacanang Palace
   • Intramuros Area
     • Fort Santiago
     • Manila Cathedral
     • San Augustin Church
     • Casa Manila
   • Rizal Park
   • National Museum
   • Manila Bay
3. Day 3:
   A whole day for the out-of-town stuff - mainly Tagaytay and the Taal Volcano really.
   • Tagaytay Area
     • Peoples Palace of the Sky
     • Taal Vista Hotel
   • Taal Volcano
4. Day 4:
   Back to Clark Airport for the flight home.

Let’s see how much we actually manage to cover…


]]> http://blog.zmang.com/short-pre-uni-vacation-to-philippines/feed/ http://blog.zmang.com/updated-photo-sets/ http://blog.zmang.com/updated-photo-sets/#comments Thu, 31 Aug 2006 14:13:59 +0000 ZMAng http://blog.zmang.com/updated-photo-sets/ Finally took the time to upload a few photo sets that have been on my hard drive for weeks/months now. They include a set of photos for a 1-day trip to Bukit Tinggi, another set for a trip to Penang, plus one more for a visit to PC Fair II 2006. Now, if only I could find the time to annotate, or even just title those photos…

]]> http://blog.zmang.com/updated-photo-sets/feed/ http://blog.zmang.com/web-based-css-optimization-tools/ http://blog.zmang.com/web-based-css-optimization-tools/#comments Sat, 26 Aug 2006 03:21:24 +0000 ZMAng http://articles.zmang.com/web-design/web-based-css-optimization-tools/ Even if you are not an accessibility freak, reducing the total size of your web pages (both internal and external components) is always win-win. Not only will your site load faster for your users, you save bandwidth. There are a number of different approaches that can be pursued, but we’ll only look at CSS optimization in this article.

In particular, we’ll be looking at web-based tools that automatically reduce the size of your CSS files - whether by removing whitespace, removing comments, and/or merging classes and attributes. In alphabetical order, they are:

• CleanCSS
• Clean Compress
• CSS Optimiser
• CSS Tweak
• Flumpcakes CSS Optimiser
• Icey’s CSS Compressor

Article under construction.


]]> http://blog.zmang.com/web-based-css-optimization-tools/feed/ http://blog.zmang.com/text-replacement-techniques/ http://blog.zmang.com/text-replacement-techniques/#comments Thu, 24 Aug 2006 23:59:17 +0000 ZMAng http://articles.zmang.com/web-design/text-replacement-techniques/ One of the greatest handicaps web designers are afflicted with is in the area of typography. Besides being limited by a small stable of universal fonts, the lack of anti-aliasing support in most browsers renders text styled using mere CSS and HTML highly limited in quality (a.k.a. ugly). This isn’t going to change in the long term, so it goes without saying that web designers will have to persist with traditional typefaces - at least for large blocks of body text - for accessibility purposes.

What about large headlines though? Given their limited quantity on a single page, shouldn’t there be a means to produce beautiful text using custom typefaces? For most web sites, hand-created images are used to replace the underlying plain text headline. While complete typographical customisation is afforded, three problems come to mind.

One: Separation of style and content. Plonking down a plain <img> tag with your hand-crafted image means that your image location will have to be defined within your structural markup, rather than the preferred external stylesheet. Two: Accessibility. Using CSS to define a background image instead results in no alternative text when images are turned off given the lack of an alt attribute. Three: Manageablity and flexibility. Every headline you want to replace with an image will have to be managed individually. Images created by hand and tags assigned by hand. Any change in typeface will require a change in the individual replacement image.

Enter modern text replacement techniques. Some of these attempt to solve all three problems, while others focus on only the issue of accessibility. All, however, ensure that you have an effective, standards-based means to stamp down typography you dictate - completely. There are three categories of methods which comprise modern text replacement methods: Image-based, Javascript-based or Flash-based text replacement.

Image-based Text Replacement

For the most part, these techniques tackle the issues of separation of style and content, as well as accessibility in replacing text with images - both problems highlighted above. But before you assume there is a finished and perfect product ready for instant implementation, here’s how the image replacement camp looks like (in some order of development):

1. Classic Fahrner Image Replacement (FIR)
   First popularised by Douglas Bowman (with his original tutorial), this technique is the building block upon which almost all image replacement techniques thereafter have been developed. It has since been deprecated, though the concept remains important to know.

   Fundamentally, classic FIR involves nesting one set of tags within another, using the inner set of tags to hide the text we intend to substitute, and using the outer set to display the image. While no particular tags are required, most nest a <span> tag within a header tag (e.g. <h1>) - with display:none assigned to the <span> and background-image assigned to the header.

   Its weaknesses: Not screen-reader friendly, second tag required (i.e. <span>), plus nothing is rendered when users turn off images, but enable CSS in their browsers.

2. FIR + ALT Text
   Given that the lack of ALT text is the key cause of screen reader inaccessibility (in comparison with the use of a conventional <img> tag), Radu Darvas proposed the use of an additional transparent .gif to hold ALT text. View his original source code.

   Its weaknesses: Besides the requirement of an additional <span> tag like in classic FIR, this method also requires the use of a third html tag, i.e. <img>, to hold the transparent .gif. There is thus little difference between this method and merely plonking down an <img> tag with the replacement image itself.

3. Leahy/Langridge Method
   Two designers, Seamus Leahy and , independently devised an enhancement using overflow:hidden, which allows us to drop the second html tag, i.e. <span>. Screen readers surprisingly show text replaced through this method.

   Its weaknesses: Nothing is shown when images are turned off, but CSS turned on. Hack required to get it working in Internet Explorer 5.

4. Text Shifting Methods
   Three somewhat similar methods using text shifting have been discovered. One by Radu Darvas using a very large negative margin-left, and another by Mike Rundle of Phark using a very large negative text-indent (see Phark Revised which adds a height declaration to squash a Safari bug). The third method at Stuff and Nonsense uses a very large negative letter-spacing. All methods show the replaced text in screen readers.

   Its weaknesses: Again, nothing shows when images are off and CSS is on.

5. Z-Index Method
   By applying a negative z-index on the inner html tag, i.e. <span>, text can effectively be hidden in simple layouts, and yet show in screen readers. It also solves the problem when images are off and CSS is left on.

   Its weaknesses: This method only seems to work on simple layouts. In more complex layouts where multiple elements are nested, the negative z-index puts the element too deep to be visible. Moreover, this method still requires the additional <span> tag.

6. Gilder/Levin Method
   Solving the problem when images are off and CSS is on, and yet working in screen readers as well is a method devised by Tom Gilder and Levin Alexander. This, along with the text shifting methods above, are among the most promising techniques.

   Its weaknesses: Still requires a second html tag, i.e. <span>. Transparent images cannot be used since they won’t hide the replaced text. Code is arguably more complicated than the text shifting methods above.

Of all the methods, only the Gilder/Levin method and text shifting methods tackle two out of three of the main weaknesses addressed here (screen reader accessibility, images off CSS on, extra html tag) without introducing any new major problems into the picture. The former ensures text is shown in screen readers and also when images are turned off and CSS is on. The latter is also screen reader accessible, but does not show anything when images are off and CSS on. However, it does not require the additional <span> tag.

This would thus imply that, in general, the Gilder/Levin method is the most optimal image-based text replacement method available at the moment, considering that it solves the two major accessibility problems, while only leaving us with an additional <span> tag.

Javascript-based Text Replacement

Javascript-based techniques hope to reduce the dependency of image-based CSS techniques on a key assumption: Screen readers can’t handle certain CSS rules, and thus show the hidden text normally replaced on conventional PC screens.

• Javascript-centric FIR
  Pretty much the first full attempt to bring in Javascript to compensate for FIR’s traditional weaknesses, this method by Peter-Paul Koch requires only a small amount of Javascript (~1kb) to handle the text replacement normally done by CSS. Like the image-based text replacement methods above, this one still requires you to manually create the replacement images yourself - unlike the methods outlined below.

  Its weaknesses: Requires Javascript to be turned on.

• Dynamic Text Replacement
  As an extension for the Javascript-centric FIR method outlined before this, this method brings in automatic generation of the replacement image using PHP (plus the GD library). A lot of detail has been taken into consideration to ensure a robust technique, including print-friendliness and flicker-freeness.

  Its weaknesses: On the client-side, it requires Javascript to be turned on, and imposes an ~8kb script overhead. Server-side, it requires PHP, with the GD library installed.

• Scalable Jens Image Replacement (sJIR)
  Built upon the framework of scalable Inman Flash Replacement (sIFR), sJIR attempts to remove the Flash component required in sIFR (leaving only Javascript as the remaining client-side requirement). As a result, sJIR has almost similar requirements to the Dynamic Text Replacement method. Therefore, your final choice between them pretty much depends on personal preference.

  Its weaknesses: On the client-side, it requires Javascript to be turned on, and imposes an ~8kb script overhead. Server-side, it requires PHP, with GD and libfreetype libraries installed.

Flash-based Text Replacement

Only one method exists within this category, but it is one of the most promising text replacement techniques available today. Although it requires Flash client-side, the strong browser compatability of Flash and its high adoption rate ensures that this method can be depended on in production-level sites. Scalable Inman Flash Replacement (sIFR) is currently stable at version 2, though version 3 is already in beta at the time of writing of this article.

Its weaknesses: Requires both Flash and Javascript client-side, and imposes a ~8kb script overhead, as well as a 5-20kb font .swf overhead. Cannot be used in high volume due to the processor overhead involved. Requires Flash developer-side to generate font .swf files (though repositories of free .swf font files are available online).


]]> http://blog.zmang.com/text-replacement-techniques/feed/ http://blog.zmang.com/what-web-applications-do-you-use/ http://blog.zmang.com/what-web-applications-do-you-use/#comments Wed, 23 Aug 2006 13:18:15 +0000 ZMAng http://blog.zmang.com/what-web-applications-do-you-use/ According to Ryan Carson’s feature at Vitamin, the “Busy Professional” crowd uses a whole bunch of web applications, from Basecamp to LinkedIn. As a simple extension, let’s explore what pre-university / university students use instead.

On first thought, the hippest among the uni crowd (at least in the US) come to mind. Facebook, YouTube, MySpace, and what else? Maybe Flickr among the more early adopter-ish or Backpack for tech-ier note takers. And just maybe, Digg.

Generally, even though students tend to be less restricted by time, they use as limited a set of web apps as “Busy Professionals”. They follow their friends for social web apps, and have yet to reach the stage where most web apps become (truly) useful in their daily life (think LinkedIn and Basecamp).

Me? Well, here’s my list:

• Pageflakes: Who doesn’t have a start page these days?
• Bloglines: How else to follow a couple hundered RSS feeds?
• Gmail: ‘Nuff said.
• meebo: All my reasons in my review.
• Flickr: Blogger, early adopter, geek. Why else am I using it?

Yep. No, social networking space on my list (e.g. Friendster, Xanga, etc.).

So, what about you?


]]> http://blog.zmang.com/what-web-applications-do-you-use/feed/ http://blog.zmang.com/benefits-of-good-site-design-in-spreading-messages/ http://blog.zmang.com/benefits-of-good-site-design-in-spreading-messages/#comments Sat, 19 Aug 2006 22:31:47 +0000 ZMAng http://blog.zmang.com/benefits-of-good-site-design-in-spreading-messages/ It’s pretty much a given that a striking design gives you a better chance of catching the (highly limited) attention of a stray web surfer. And when you want to pass important messages that would rarely pique the curiosity of a normal web denizen, good web site design become all the more important.

Take humanitarian issues. We turn a blind eye offline, so it isn’t a surprise that we do pretty much the same thing online. But bring in a first-class design (heh, try to pull web designers on pro bono), and eyes might just linger a little longer on what you’re trying to say. Of course, there’s also the simple fact that good design implies good communicative ability - not just flashy images - and that CSS galleries like CSS Beauty and CSS Mania become a source of free traffic.

An excellent example of what I’m talking about? Project Rescue. Know anything about what they do? Probably not, so check out their site. You might stay just long enough given the site’s good looking, yet simple and effective design.


]]> http://blog.zmang.com/benefits-of-good-site-design-in-spreading-messages/feed/ http://blog.zmang.com/i-love-stripes-and-rounded-boxes/ http://blog.zmang.com/i-love-stripes-and-rounded-boxes/#comments Sat, 19 Aug 2006 22:07:04 +0000 ZMAng http://blog.zmang.com/i-love-stripes-and-rounded-boxes/ You might have noticed that this blog is now a lot more “stripey” than before. There are light stripes, dark stripes, plus rounded striped boxes for modern browsers (Read: non-IE). It’s just a few changes here and there to keep things fresh.

More importantly, I needed a test bed for some rounded boxes implementations, and decided to try out one using the :before and :after CSS suffixes. While this method is not completely cross-browser compatible (yep, IE again), it seems to be one of those requiring the least XHTML markup - though it’s highly unlikely I’ll ever use it again.

For one, you still need to ensure you have at least one more hook (e.g. another div) within the containing div if you want to apply any sort of overall padding onto your rounded box. Applying padding onto your containing div will mess with the rounded edges. Let’s not forget you’ll still have to use 4 images - one for each corner.

As such, I might as well use ThrashBox or Søren Madsen’s implementation over at A List Apart. Both are completely cross-browser compatible, support gradients, and the former only requires one image.

Of course, I could be missing something. Is there really any reason to use :before and :after for your rounded boxes?


]]> http://blog.zmang.com/i-love-stripes-and-rounded-boxes/feed/