With LibraryHack and the State Library of WA day of hack approaching, I needed a demo, a quick look at the datasets that the State Library of WA made available. I settled on the Krantz and Sheldon architectural photographs. As this was a small set of photos, I did not have to search through a whole collection of 50,000 images looking for a suitable theme, as this dataset already had a theme, the work of Krantz and Sheldon in Perth in the 1960s and 1970s. Fortunately most had some basic geolocation data, such as addresses.

The original concept was to produce an animation, using CSS3, HTML5 and javascript, showing the Krantz and Sheldon photographs alongside the current Google Streetview. I have not had the chance to animate the sequence yet, so it currently manual.

The first problem was finding the right tool for the job. Fortunately a quick search turned up Using Google Maps to show a streetview of a house based on an address by Jordan Clist.

The javascript allows you to give it an address in and returns both a google map and street view image for most locations. I say most locations, because some locations will not return street view images for an address. Even though a street view does exist for that building, it just does match the address, like 16 Hensman Street, South Perth.

The next issue was while you could get a StreetView for an address, the image does not always suit your needs. A quick look at the javascript found 3 variables you could pass StreetView to change the angle, pitch and zoom. So the javascript was quickly modified to allow me to pass the heading, pitch and zoom variables to StreetView and return a image that more suited my needs.

The next process was the time consuming one. Pumping addresses into StreetView then manually adjust the heading, pitch and zoom to get the preferred view. I quickly found:

• not all addresses return a StreetView;
• some addresses return great images of trees obscuring buildings;
• you can get a StreetView from corner … and … and ;
• often it was necessary to go up or down the street and adjust the heading to get a suitable image.

Still it is far from perfect, it is almost impossible to replicate the original viewpoint of the Krantz and Sheldon photographs from StreetView. Not all photographs had addresses, and you could not get images of all building from StreetView. It would of been better to go take photos of all the building from the original viewpoint. Still if you want to see the current results, the square version for Safari, Chrome, Webkit, Opera and Firefox 3 and the funky circular version for Firefox 4 and IE9.

When I was creating the Krantz and Sheldon architectural photographs meets Google Streetview mashup, (more posts to follow on that). I decided that as the Krantz and Sheldon archive was from the sixties that instead of rectangular images, the images should be circular, which should of been a piece of cake using border-radius CSS3 property. As the dimensions of each photograph was different, the only way to achieve this was to make sure each image filled a fixed size containing div. The easiest way to do this was to fix the width of each photograph, then give it a negative left margin so it was centred. Then apply overflow: hidden to the div so only portion of the photograph would be visible. I then applied border-radius to the containing div and perfectly circular images in my the browser I was testing in, Firefox 4.

Off course the world is not perfect, on Library Hack day, I had to use another computer and Chrome to show the concept to crowd. The circular images where replaced with square images, even though the containing divs had a circular drop-shadow. Webkit browsers, Opera and Firefox 3 can not deal with a border radius applied to contents of an element with overflow: hidden. Instead you the overflow is only hidden outside the rectangular box.

So nice concept, but flawed implementation until the browsers catch up. The circular version for those using Firefox4 or IE9, of wish to see round shadows from square obects in Safari, Chrome and Opera.

Boilerplate is not a template or framework, just a set of tools to get that site developed quickly. I know I will be making use of most of it in the near future.

However, you can easily fake it for backgrounds of block elements in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The filter gradient places a alpha channel colour gradient over the background. So as long the background is transparent, the start and end colours the same and the alpha (aa) channel a value greater than 0 (fully transparent) and FF (fully opaque), you get a block element in IE with a RGBa background. You can see an example of RGBa in action in IE

The simplest way is including in your CSS
background: transparent ;
background: rgba(255,0,0,0.5) ;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

Which is clean and simple, even it does deliver you invalid CSS. There are two problems, if a browser does not support RGBa and is not IE, (eg FF2) the block element background will be transparent. I do not think that is a major issue right now. There are a handful of browsers outside IE in use that do not support RGBa. My main concern is future proofing, the next major version of IE (the beta is due within a year) will support RGBa (as well as HTML5 and some CSS3 according to sources) and as usual will maintain backwards compatibility with earlier versions of IE. So you will get a semi transparent background colour overlaid with a semi transparent gradient.

The solution, is to provide a stylesheet to all browsers and an extra stylesheet to IE8 and below with conditional comments. So your CSS will have:
background: fallback color RGB or hex ;
/* background colour for browsers that are not IE that do not understand RGBa */
background: rgba(R,G,B,a) ;
Your HTML will include (note don’t try and cut and paste from here as grab the text file instead):
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/xtras/ieonly.css" media="screen" />
<![endif]-->
And ieonly.css file include:
background: transparent ;
/* needed to clear the background colour */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88ff0000', EndColorStr='#88ff0000');

If you don’t believe me and do not have IE6, here is the screenshot. And I was not the first one to suggest this method for implementing RGBa in IE, Hedger Wang did some time ago, and even suggested using canvas to provide the transparent background to FF2. I only found his example while finalising this post.

I will not submit it, because Dave has not accepted any new submissions almost two year, my demo is far from the visual standard of most other design and I broke one major rule the CSS does not validate.

There are no hacks in the CSS just lots of browsers specific declarations like:

-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.66);

And even worse Microsoft specific declarations, which break the W3C rules for CSS

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#AA666666', Positive='true');

As I said in my presentation, the important thing to know about validation, is why your code does not validate, if you know that, then validation is irrelevant.

What I learnt is enough from probably a dozen blog posts, so hopefully I will be writing lot in the next few weeks.

The aim is to show how you can use CSS2 and CSS3 to improve the experience of visitors using modern browsers, while not blocking access to those people still using older browsers like IE6. I want to convince the audience, that you can build sites that do not have to look the same in all browsers.

I will be looking at what CSS2 and CSS3 you can safely implement now. The main provision it must not break IE6. It does not have to work in IE6, just have a safe fallback position.

The presentation is not aimed at people who read Surfin Safari, CSS3.info or similar sites and then go off an experiment with what they have been shown. That is what I do

I know I will be covering those I covered indepth before like opacity/transparency and <a href=http://nickcowie.com/2008/font-face/”>@font-face. Are there any other CSS2 or CSS3 properties you would like to see me cover? Otherwise I might go all shock and awe with transitions ;-)

So this is what I created to clean up Word HTML, you paste the HTML is to the editable div, hit the button and if you are using Internet Explorer the converted HTML is copied to your clipboard. So you can paste the clean HTML (note it is HTML code) straight into the CMS editor in HTML mode or WordPress.

Note, while you can use JavaScript to add to the clipboard with Internet Explorer, you need to use Flash to copy the contents to the clipboard for other browsers. I have not do that yet. Mainly because Internet Explorer is the corporate browser and this was created for work.

So have a look under the hood, see how it works, take the code and modify it for your own use. It appears to be working for what I need, but maybe needed to be modified for your situation.

*** does not currently work in IE8, I need to investigate further ***

The specs for :first-letter pseudo-element state:

These are the properties that apply to :first-letter pseudo-elements: font properties, … ‘line-height’, … margin properties, padding properties … UAs may apply other properties as well.

Width and height are not properties that have to be applied to first-letter. Only the WebKit family (Safari, Chrome etc.) apply these properties. The main issue is line-height which could be used to control the vertical size of the first-letter pseudo-element, as according to the specs.

To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter

Internet Explorer, Webkit and Opera have chosen not to apply line-height and unless one is specified, a :first-letter pseudo-element will inherit line-height from the parent element. Firefox has chosen to apply a line-height to all first-letter elements equal to the height of the element and you have no method of changing it. This automatically aligns the top of the floated :first-letter pseudo-element in the parent block element.

Because the line-height is the height of the type, you get different line-height for different characters eg a, t and p. Which makes it virtually impossible to use lower case letters to produce drop caps like effects.

So you need to reduce the line-height of first-letter to the cap height of your chosen typeface then use margin-top or padding-top to vertically align the top of first-letter with the top of the remaining text. Not only is this more complicated than just changing line-height, you need to do two calculations instead of one. Internet Explorer applies margin and padding to floated :first-letter pseudo-elements differently than other browsers. By fixing the :first-letter pseudo-element in place after applying line-height then applying margin and padding to it, which does not effect surrounding elements.

Five different browsers rendering floated :first-letter pseudo-elements with slightly different properties. Chrome produces the same results as Safari. Note IE8b2 does strange things to backgrounds both colour and images of the:first-letter pseudo-element.

So to get a cross browser drop cap effect using :first-letter pseudo-element that vertically aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns correctly in Firefox and in Opera or a WebKit browser, and then using conditional comments for an IE only stylesheet remove margin-top and change line-height to correctly vertically align the type.

It would of been a lot easier if Mozilla Corporation and Microsoft read the CSS specifications the same way as everybody else and applied the same rules.