Accessible Non-Standard Fonts in WebSites

Lets face it – the web is limited, web sites are created for different browsers, video modes, operating systems, but to be even more frustrated we have to use the same old, boring fonts. For a special project I needed more artistic and out of the box general feeling(not the standard Verdana, Times new Roman and Arial) and since creating pictures was not an option (due to SEO and Accessibility reasons) I found different approach – sIFR – a collection of Adobe Flash and Javascript files. Generally the idea is designing the page as usual, include the Javascript file, edit the flash file to include your fancy font and point out in the HTML which headings you want replaced – and it is all SEO Friendly and Accessible since search engines and screen readers still see your original headings.

More instructions can be found on sIFR’s homepage and if you are still curious check out the demo

October 20, 2007 · Peter

Install Adobe Flex Builder Alpha on Debian

After bumping my head against the monitor for couple of minutes i have successfully installed Adobe Flex Builder Linux Public Alpha on my Debian Unstable Linux. Here is the procedure:

  1. wget http://download.macromedia.com/pub/labs/flex/\
    flexbuilder_linux/flexbuilder_linux_install_a1_100207.bin

  2. apt-get install eclipse sun-java5-bin

  3. update-alternatives –config java
    (set /usr/lib/jvm/java-1.5.0-sun/jre/bin/java to be used)

  4. run the installer

Enjoy

October 7, 2007 · Peter

Nvidia Driver Version 96.43.01 is Patched too

We received couple of requests for the legacy drivers too, so here you go guys : http://grizach.servebeer.com/nvpatch

Also we summed the access logs from all the mirrors and we found out that we have more than 10 000 downloads.

Cheers

October 7, 2007 · Peter

IE6 PNG Transparency Fix with Javascript

As always when I need to use some transparent images cursing Internet Explorer 6 is inevitable so i wrote a quick javascript fix. Again mootools was the preferred framework because the ease of use.

function fixPNG(){

 $$('*').each(function(el){

 	var imgURL = el.getStyle('background-image');

 	var imgURLLength = imgURL.length;

 	if ( imgURL != 'none' && imgURL.substring(imgURLLength  - 5, imgURLLength  - 2) == 'png'){

 		el.setStyles({

 			background: '',

 			filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"

 		});

 	};

if(el.getTag() == 'img' && el.getProperty('src').substring(el.getProperty('src').length  - 3) == 'png'){

 		var imgReplacer = new Element('input', {

 			'styles': {

 				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + el.getProperty('src') + "')",

 				'position': 'relative',

 				'background': 'transparent'

 			},

 			'title': el.getProperty('alt')

 		});

imgReplacer.setStyles(el.getStyles('padding','margin','border','height','width'));

 		imgReplacer.setProperties(el.getProperties('id','class'));

 		imgReplacer.disabled = true;

 		el.replaceWith(imgReplacer);

 	};

 });

}

if(window.ie6){

 window.addEvent('domready', fixPNG);

}

Fix description: First I’m looking for all tags that have background-image style and replace it with Microsoft AlphaImageLoader filter, then I search for all tags and replace them with (img src used for style background image again using the MS filter). I used input since it is inline element but still has height and width – like the img tag.

PS. If you use any links in area with PNG used for bg put the links in div with style=”position:relative” else they will not be clickable due to the MS filters

and as always example: IE6 PNG Transparency Fix with JavaScript

October 3, 2007 · Peter

Nvidia Driver Version 100.14.19 is Patched

Again on nvpatch home page you can find the most recent Nvidia driver patched for linux kernel 2.6.21

Enjoy!

September 26, 2007 · Peter