boogdesign blog

• Git - SVN Crash Course - An introduction to the Git version control system targeted at Subversion users.Tags: Development; Tools; Tutorial; 
• Understanding vertical-align, or "How (Not) To Vertically Center Content" - A good explanation of the sometimes confusing vertical-align property.Tags: CSS; Layout; Tips; HowTo; 
• Prototype JavaScript framework: Prototype 1.6.1 released - This release adds support for IE8 and Chrome.Tags: BlogPost; Prototype; Javascript; Framework; 
• Mark Finkle’s Weblog » Fennec – Of Screens and Orientation - Practical examples of CSS media queries, in this case for controlling an XUL UI.Tags: BlogPost; CSS; FirefoxExtensions; Tips; 
• HTML 5: The Markup Language - A guide to the upcoming HTML standard specifically for content authors (as opposed to browser makers or coders).Tags: HTML5; Web; Standards; Documentation; 

There was a post on WebDesign-L today asking about angled text, which reminded me of the excellent Text Rotation with CSS a few months back on snook.ca. Jonathan focussed on the IE only BasicImage filter to provide an alternative to the (also proprietary but future standard) -webkit-transform and -moz-transform properties to rotate text. That's fine as far as it goes, but BasicImage can only rotate in increments of 90°. Jonathan mentions the alternative, the Matrix filter, but says "the coordinates still don't make any sense to me."

Now, WebKit and Gecko also support matrix transformations, so I'm thinking if I can only work out what the co-ordinates mean we might have the basis of a more general purpose solution. So I looked at the Wikipedia examples of linear transformation matrices and then the Mathamazement introduction linked to from the MDC page. If you can hear a loud whooshing sound right now, that's the echo of a load of math stuff flying completely over my head...

However, all was not lost - if we go back to the MSDN Matrix transform article you'll see there's some example code. With something to hack around I thought I had a much better chance of figuring out how things worked. I started off with the fourth sample, it uses Javascript to animate the Matrix transform, rotating and expanding a div element.

I modified the code a bit, but I'll take you through the key points before I show you what I finished up with. First of all, the Matrix transform needs to be defined on the element in question before you can script it:

<DIV ID="oDiv" STYLE="position:absolute;
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
		onfilterchange="fnSpin(this)" >

The animation is powered by fnSpin which calls two subsidiary functions, fnResize to resize the image and fnSetRotation to rotate it. Here's the original code for the rotation:

//oObj input requires that a matrix filter be applied. 
//deg input defines the requested angle of rotation.
var deg2radians = Math.PI * 2 / 360;
function fnSetRotation(oObj, deg)
{    rad = deg * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    oObj.filters.item(0).M11 = costheta;
    oObj.filters.item(0).M12 = -sintheta;
    oObj.filters.item(0).M21 = sintheta;
    oObj.filters.item(0).M22 = costheta;

}

So here's it all nicely laid out with all the hard math stuff already done for us. The basic math stuff is it's converting the degrees into radians, then using sine and cosine functions to calculate the four matrix values. So now I'm thinking I can reverse engineer this function to work out what the matrix values will be for any angle. I started off with modifying the fnSetRotation so that the matrix values were visible on the page - adding four text inputs and these lines:

    document.getElementById("fM11").value = oObj.filters.item(0).M11;
    document.getElementById("fM12").value = oObj.filters.item(0).M12;
    document.getElementById("fM21").value = oObj.filters.item(0).M21;
    document.getElementById("fM22").value = oObj.filters.item(0).M22;

Then I added a button which rotates the element to 45° when clicked (warning, IE only):

The next step was to make the page work cross browser, accept a value for the input number of degrees and, for bonus credits, generate the relevant CSS for copy and pasting. First of all I cleaned up the output a bit with toFixed method as, when the values got close to zero, they end up in exponent format rather than just rounding to 0. This gave me numbers I could plug straight into a CSS template, for example here's the declaration to rotate an element by 45°:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);

So now I thought it would be a fairly straightforward task of plugging these values into the Mozilla format:

-moz-transform:  matrix(a, b, c, d, tx, ty)

The tx and ty are for translation, so I just set them to zero, then plugged M11, M12, M21 and M22 into a, b, c and d respectively. Unfortunately, it didn't work! The element was reflected in respect to IE in Firefox for certain rotations.

Someone who actually understands what's going on with the matrices could probably explain what's happening (probably I have the co-ordinate system the wrong way up?) but I fell back on trial and error and eventually decided that swapping b and c worked. See my final matrix calculator here - input an angle in degrees, click the button and see the CSS code for achieving it in IE, Gecko and WebKit.

Some things I noticed but didn't have time to investigate fully:

• IE seems to rotate around the center, Firefox and Chrome seem to rotate from top left. There's a -moz-transform-origin and equivalent WebKit property to control things in those browsers, not sure what equivalents IE offers.
• Other CSS declarations are applied after the transform in IE, while they seem to be applied before the transform in Firefox and Chrome (ie. if you add 200px padding to the top of an element, Firefox will rotate around a point 200px above the 'start' of the element, IE will apply 200px padding after the transform).
• Using the rotate syntax in Gecko and WebKit is a lot simpler, but if you want to rotate stuff in IE too using a similar format in all three might be more simple in the long run? Especially if you want to script it.

In my post on CSS3 a few months back I mentioned some issues I had getting -moz-border-radius to clip content that it contained. After my writing the post the question came up a couple of times on stackoverflow, first from Brandon Wang and later a similar one from dougoftheabaci. Here is a simple example of the problem, the CSS is uncomplicated:

.target {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

With that class applied direct to an img element it looks great in Safari and Chrome:

But it doesn't work so well in Firefox:

Today I came across the Applying SVG effects to HTML content article on the MDC wiki, one of the things it discusses is using SVG as a clipping mask for HTML elements. It occurred to me that it ought to be relatively straightforward to use a clipping mask to create the rounded corner effect directly on an img element in Firefox.

So I started off with the example code from the article, removed the circle, made the rectangle full size and used the rx and ry attributes to round the corners:

<svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
        <svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
    </svg:clipPath>
</svg:svg>

Then use a CSS class to apply it to my image:

.target { clip-path: url(#c1); }

It didn't work at first, but then I realised I'd created my document with a .html extension rather than .xhtml - to allow mixing of SVG into XHTML the document must have content type application/xhtml+xml. Once I fixed this the effect was exactly as I'd hoped:

Here is the full code. Of course, embedding it all this way isn't going to work for any browser other than Firefox 3.5, and serving application/xhtml+xml is going to break Internet Explorer, so it's not really a practical solution in it's current state. It's more useful to break the content into separate files, then the SVG can be served as image/svg+xml while your HTML is text/html. This final example works across browsers and will round the corners of the image in Chrome, Safari and Firefox.

• Clamato: A Smalltalk Dialect for JavaScript - A self-hosting Smalltalk compiler written entirely in Javascript.Tags: Javascript; Smalltalk; Web; Development; 
• ADUni.org: ArsDigita University Curriculum - Lecture notes, course work and (in some cases) videos of the lectures for a web focussed Computer Science course.Tags: Computing; Mathematics; Lecture; 
• The Value of Web Site Usability Evaluations — Cre8pc Cre8pc Usability & Holistic SEO - Get the most out of your usability consultant by being aware of the options available.Tags: BlogPost; Usability; 
• 20 tips for writing for the web | FatDUX | blogging about user experiences - Tips for producing good web copy.Tags: BlogPost; Web; Writing; Tips; 
• Wait till I come! » Blog Archive » Tutorial: scraping and turning a web site into a widget with YQL - Use YQL and Javascript to pull content out of any web page.Tags: BlogPost; Tools; Javascript; Tutorial; 
• svgweb - Google Code - Support in Internet Explorer for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript.Tags: SVG; Javascript; Library; IE6; IE7; IE8; 

• Kirk's Rants: Software Developers Should Never Have Dress Codes - Analysis of the real reason behind corporate dress codes.Tags: BlogPost; Development; Management; 
• HTML5 Microdata JavaScript - Gitorious - A Javascript implementation of the HTML5 Microdata DOM API.Tags: HTML5; SemanticWeb; Javascript; Library; 
• Software is hard | Extending Prism - Extension development differences for Mozilla Prism.Tags: FirefoxExtensions; RIA; Tutorial; 
• Software is hard | nsITraceableChannel, Intercept HTTP Traffic - Intercept HTTP requests from within a Firefox Extension.Tags: BlogPost; FirefoxExtensions; Networking; 

• Rands In Repose: The Book Stalker - The love of books as an antidote to Web 2.0 fueled, attention limited, Twitter driven relationship.Tags: BlogPost; Books; Culture; 
• Blind Search - Compare search engine results without being influenced by branding.Tags: SEO; Commentary; Tools; 
• Accessibility Color Wheel - Pick foreground and background colour combinations which meet the WCAG 2.0 accessibility guidelines.Tags: Web; Accessibility; Colour; Tools; 
• The Definitive Guide to htaccess Techniques: Do’s and Don’ts | Noupe - Easy guide to common .htaccess tricks.Tags: Apache; Tips; 
• CSS Layout - 100% height - Single column layout that is always at least 100% of the viewport height but will push the gooter down as the content gets longer.Tags: CSS; Layout; Example; 
• css-template-layout - Project Hosting on Google Code - An implementation, using Javascript, of the CSS3 Template Layout module.Tags: CSS; Web; Design; Library; jQuery; 
• Firefox Extension Development Tutorial :: Preferences - Create and use settings from within a Firefox extension with the Preferences Service.Tags: FirefoxExtensions; Development; Tutorial; 

• How long is it going to take? - Accurately estimate the length of any project, no matter how many lines of code are required and what developer and soft drink machine resources you have available.Tags: Development; Tools; Humour; 
• Text Rotation with CSS - Perform element rotation using CSS even with IE6Tags: BlogPost; CSS; Web; Design; Tips; 
• ZURB – Super Awesome Buttons with CSS3 and RGBA - Nice 3D effect buttons using CSS3 features.Tags: BlogPost; CSS; Web; Design; Tips; 
• Screenjelly - What's on your screen? - Record a short screencast and share it with the world.Tags: Web2.0; Online; Videos; Tools; 
• Open Source - Dimdim: Web conferencing for everyone. Dimdim provides free, open source collaboration for online meetings, eLearning, desktop sharing, education, unified collaboration, webinar, web meetings and more. Available in free hosted or GPLv3 do... - An Open Source alternative to tools like WebEx and GoToMeeting.Tags: Web; presentation; communication; Tools; 
• HTML5 drag and drop in Firefox 3.5 – 0xDECAFBAD - On overview of and introduction to the HTML5 drag and drop API.Tags: BlogPost; HTML5; Javascript; Firefox; 
• How I Explained REST to My Wife - A straightforward introduction to REST presented as a dialogue (warning: may not work on real world wives).Tags: REST; Tutorial; 
• Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog - On overview of the various standards efforts to provide fonts which can be downloaded into web browsers while still allowing font foundries to make a living.Tags: Web; Typography; Standards; BlogPost; 
• Why I am Not a Professor - The decline of the British university system.Tags: Learning; Standards; Culture; Government; 

Last week I re-designed the home page of my personal website as the previous version was quite plain looking, mostly because I'd never gotten around to updating it. I had a visual theme for most of the sub-pages, a strong graphic as a background 'column' on the left and side, with the graphic differing by section. My idea was to reuse these graphics on the front page, except randomly select two of them each time the page loaded.

Since they were background images, I couldn't add a dynamic element in the page itself to contain them. I could perhaps have defined several new CSS classes to apply to the body element and then inserted a class name with PHP, but with six images, picking two, that means 30 class names which seemed inelegant, plus would be a bit of a pain if I later added an new section. So instead of making the page itself dynamic, I decided to make the CSS dynamic instead.

From a coding point of view the implementation is very straightforward. You rename your CSS file to be .php and make sure you return the correct content type in the header by adding this as your first line:

<?php header("Content-type: text/css"); ?>

I then just declared an array with all my images in and use a built in PHP function to give me two random images:

$bg_images = array('vertical_essays.jpg','vertical_default.jpg','vertical_books.jpg','vertical_football.jpg','vertical_writing.jpg','vertical_blog.jpg');
$bg_keys = array_rand($bg_images, 2);

Then in the CSS itself I just select the appropriate image:

html {
	background-image: url('/image/<?= $bg_images[$bg_keys[0]] ?>');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom left;
}
body {
	background-image: url('/image/<?= $bg_images[$bg_keys[1]] ?>');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom right;
}

After getting this working I then decided it would be fun to have my main navigation boxes have a background colour related to the images which are shown. The DeGraeve.com Color Palette Generator lets you generate a palette of colours from any image, so I put each of my background images into it and got a set of 'vibrant' and 'dull' colours for each image. I stuck this into another array, using the image names as keys and simply alternating vibrant and dull colours into an array value:

$colours = array(
    'vertical_essays.jpg' => array('#440','#553','#670','#332','#9b7','#eee'), 
    'vertical_default.jpg' => array('#560','#452','#02d','#36a','#8a7','#995'), 
    'vertical_books.jpg' => array('#720','#532','#d10','#a64','#d90','#a85'),
    'vertical_football.jpg' => array('#581','#564','#8a3','#785','#9c5','#eee'),
    'vertical_writing.jpg' => array('#644','#c73','#f20','#e82','#f30','#ded'),
    'vertical_blog.jpg' => array('#732','#644','#c30','#965','#c96','#cbb')
);

I could then set the background and border colours of the navigation boxes using the two random keys I'd already generated. To keep it simple I just had the left two boxes take colours from the left image, and the right box take colours from the right image:

#nav li.cv {
	background-color: <?= $colours[$bg_images[$bg_keys[0]]][0] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[0]]][1] ?>
}
#nav li.writing {
	background-color: <?= $colours[$bg_images[$bg_keys[0]]][2] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[0]]][3] ?>
}
#nav li.gameplan {
	background-color: <?= $colours[$bg_images[$bg_keys[1]]][4] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[1]]][5] ?>
}

Here is the end result:

As you can see, generating your CSS with PHP is just as easy as generating HTML with PHP. Even with my fairly simple minded implementation of the idea you can achieve some nice tricks. However, there are some drawbacks I ran into:

• Because you're now editing a PHP file, you might have some trouble persuading your auto-completing CSS editor to recognise what's going on
• You're now going to have to handle caching yourself, as your CSS is no longer a static file - not much of an issue for a small site like mine, but could be an unnecessary overhead on a large site
• Once you've added background colours to the mix you have to consider your text and link foreground colours, I just settled for a light grey with light blue links which worked OK (but not great) on all the colours - could be a bit of a maintenance problem in the future (and a readability problem now)

Fortunately, there are possible ways round all these issues, especially if you were considering this technique for a serious site rather than a one page vanity domain You could always use your PHP to generate the appropriate set of colours for you from a given base colour - this saves you having to work out text, non-visited and visited link colours for each background colour. For bonus points, you could probably add the code which extract the base colour from the image in the first place to end up with a completely flexible solution. The first two issues both have the same solution - use an actual CSS file as a template, thus preserving the editor features, but use a server-side pre-processor to deliver the file to the web. This allows you, among other thing, to extend CSS with variables as well as taking care of all the cache issues for you.

• WPS: PostScript for the Web - A postscript interpreter implemented using javascript and the HTML5 Canvas API.Tags: HTML5; Javascript; PDF; Library; 
• CSS Colors: Take Control Using PHP - Use PHP to generate your CSS, which allows a number of refinements - variable names for colour schemes and automatic generation of palettes from base colours.Tags: PHP; CSS; Colour; Tools; 
• Color Palette Generator - Generate a colour palette from any image, gives two sets of colours - 'dull' and 'vibrant'.Tags: Web; Design; Colour; Tools; 

• CSS Colors: Take Control Using PHP - Use PHP to generate your CSS, which allows a number of refinements - variable names for colour schemes and automatic generation of palettes from base colours.Tags: PHP; CSS; Colour; Tools; 
• Color Palette Generator - Generate a colour palette from any image, gives two sets of colours - 'dull' and 'vibrant'.Tags: Web; Design; Colour; Tools; 
• lilyapp - Project Hosting on Google Code - Lily enables users to build programs graphically by connecting functional modules to fetch and direct the flow of data, play sound or video, add interactivity or display results. Lily programs can be shared with other Lily users, installed as Firefox add-ons, run as standalone apps using XULrunner, or (with some limitations) be embedded in a web page.Tags: Javascript; Firefox; FirefoxExtensions; Development; 
• A Community-driven Proposal for Developing HTML5 - Manifesto for changing the HTML5 standardisation process.Tags: HTML5; Standards; Commentary; 
• A List Apart: Articles: Unwebbable - Is it time to give up the idea that all web documents should be HTML documents and so constrained by HTML semantics?Tags: BlogPost; HTML; XML; Web; Commentary; 
• A List Apart: Articles: The Inclusion Principle - Create accessible websites through the inclusion principal.Tags: BlogPost; Accessibility; Web; 
• Web 2.0 how-to design style guide - Scratchmedia London web designers - Analysis and tips on the essential elements of the "Web 2.0" style.Tags: Web; Design; Tips; HowTo; Web2.0; 
• html5-now - Google Code - Dean Edward's library to add HTML5 support to non-compliant browsers.Tags: Javascript; HTML5; Library; 

• What's Wrong With Copy Protection - An excellent essay on why allowing corporations to limit our freedoms through technology is a bad thing.Tags: Essay; Politics; Economics; Freedom; Community; 
• Activating Browser Modes with Doctype - A complete reference to compatibility modes and doctype declarations across all the major browsers.Tags: HTML; XML; Browser; Standards; Reference; 
• Recess PHP Framework - A RESTful PHP Framework.Tags: PHP; REST; Web; Development; Framework; 
• Accessible drag and drop using WAI-ARIA - Opera Developer Community - Tags: BlogPost; Web; Accessibility; Javascript; HTML5; 
• perfection kills » Blog Archive » How well do you know prototype (part II) - Example code for common uses of Prototype.js.Tags: Javascript; Prototype; Tips; 
• Guidelines -- Web Writing that Works - Guidelines for writing clear and readable web content including a section on reducing cognitive burdens which is important for communicating to readers with learning disabilities.Tags: Web; Writing; Tips; Accessibility; Usability; 
• A List Apart: Articles: Introduction to RDFa II - Second in an introductory series on RDFa from Mark Birkbeck.Tags: BlogPost; SemanticWeb; RDFa; 
• FontStruct | Build, Share, Download Fonts - Online font creation tool, download as TTF.Tags: Typography; Tools; 
• Fontifier - Your own handwriting on your computer! - Transform a sample of your handwriting into a font - how beneficial this will be may depend on how readable your handwriting is...Tags: Typography; Tools; 
• Baseline Rhythm Calculator - Calculates font sizes and line heights for all main elements from a base font size that can be copied into your stylesheet.Tags: CSS; Web; Tools; Typography;