Different browsers have different “default” styles, which makes it a challenge to even make text appear the same way across all of them. When you want to accomplish this, there is a well known CSS trick that I’ve been using for a long time:

html {
    font-size: 100%;
}

body {
    font-size: 62.5%;
}

These rules will make 1em = 10px; font-size: 1.2em is the same as 12px. The method is particularly useful on sites where you want to let the user scale all content using links on the page. The links will adjust the base size on the body element which is inherited to all child elements.

This works for font scaling, but as I discovered, it is inaccurate when setting widths and heights of elements. 96em is NOT exactly 960px. I set out on the interwebs to research and found another method in a comment to an article about font sizes and ems:

html {
    font-size: 1.25em;
}

body {
    font-size: 50%;
}

Apparently, IE doesn’t allow for percentages with decimals, so 62.5% is floored to 62%. This isn’t a big deal for text, but when using it for dimensioning other elements, it’s a deal breaker.

The method above will set 1em = 20px for the html element and then halve this by setting the font size to 50% on the body.

This way is new to me, but after testing it in all major browsers (IE6 included), it seems to work. As you may understand, I’m not really sure about this, so I’m reaching out for you here. Do you have experience using any of these methods to set font and element sizes? Or do you have other methods? Will the latter method always work and in all browsers? Please use the comments if you have any input.

Get the plugin from SourceForge or read Grant Skinner’s installation guide to install it from within Flex Builder.

Firefox 3.5 as well as many smartphone browsers like Mobile Safari include a JavaScript API to geo-enable your web applications. Using it is pretty simple, and it gives us the ability create a completely new range of services utilizing the user’s current position. We can use it to position yourself on a graphical map or use yr.no’s weather API to get the weather right where you are.

In the following example, I will try to determine the user’s address by using Google Maps’ new Reverse Geocoding API. I haven’t included all my code in this post, but I will share upon request.

See the demo here

Since there’s still just a few browsers supporting geolocation, we need to check the current browser for the navigator.geolocation object. If it exists, we’ll call its getCurrentPosition function to get the user’s latitude and longitude:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, fail);
}

This triggers Firefox’ location notification bar (or the iPhone’s location dialog) which will ask you for permission to give your location to this web page. After you accept, devices with built-in GPS will give the browser access to these data while other devices will use local WiFi networks and IP address information to try and guess your location.

These values can now be used to retrieve your address from Google Maps:

http://maps.google.com/maps/geo?q=<lat>,<lon>&output=
   <xml_kml_csv_or_json>&sensor=<true_or_false>&key=<api_key>

We can either get our results through a direct JavaScript request using JSON or by getting an AJAX result using a server-side script. In my case I’m using the AJAX approach to let a PHP script retrieve, parse and format the data:

function success(position) {
    $("#location").load("location.ajax.php?lat=" +
        position.coords.latitude + "&lon=" +
        position.coords.longitude);
}

Addresses from Google Maps’ Reverse Geocoding API are ordered from best to least matches and categorized by accuracy. In this example, I’m just printing them all out.

See the demo here

Download geolocation demo source code

References

• Mozilla: Location-Aware Browsing
• hacks.mozilla.org: geolocation in Firefox 3.5
• Google Maps API Services: Reverse Geocoding

I’m eagerly awaiting to see if the ActionScript part of this engine will provide a full-feautured set of physics tools, or if we still have to use 3rd party tools like Box2DFlashAS3 (which is great btw.) for advanced runtime physics.

Screenshot of Making Waves Labs using Safari 4

This blog is not just a place for new content. It is also our test bench for presentation. CSS3 is currently a buzz word around front-end developers, and it provides new possibilities to make the path from design to website much more straight-forward and joyful. Even if it’s still in its early stages, all web browser makers (all except Microsoft) have teamed up to make this a future standard. Opera, Firefox, Safari and Chrome already support a great number of the properties/selectors, and because not everybody will see all features today, CSS3 will degrade gracefully for users with less-than-optimal software.

We have started off here on Making Waves Labs taking advantage of some of CSS3′s visual modules; borders, backgrounds, text effects and font-face. Since most of the CSS3 properties are standards in development, the browser makers support them with browser-specific prefixes. Safari and Chrome use -webkit-, Firefox is using -moz-, while Opera has -o-. I am using -webkit- in my examples below.

Borders

Making rounded corners and/or drop shadows is a tedious job. It is increasing the desirability of your website significantly, but it’s time-consuming to make graphics and onion-nested html markup to make it possible. With CSS3 it’s just a couple of lines of text in the CSS:

-webkit-border-radius: 10px;
-webkit-box-shadow: 0 5px 10px #ccc;

Drop-shadows have no alpha property in CSS3, so if you want to make natural looking shadows, you will have to bring the shadow color closer to your background color.

Read on about border-radius and box-shadow.

Backgrounds

Gradient backgrounds are also time-consuming, and sometimes even impossible using previous technology. With CSS3, you can add linear or radial gradients like this:

Gradient backgrounds are currently only supported by Safari 4 and Chrome, but you can add an additional fall-back color for other browsers:

background: #01a6de; /* fallback */
background: -webkit-gradient(linear, left top, left bottom,
            from(#01a6de), to(#1d7fb0));

Read on about CSS gradients.

Text effects

You can also add drop-shadows to text. By using a color lighter than your background without blur, you can even emboss your text in the page:

text-shadow: 0 1px 0 #fff;

Read on about text-shadow.

Font-face

The @font-face selector makes the browser render custom fonts natively, regardless if the user has them installed to their OS or not. Be careful though. The font files are located on your server as they are, and not all fonts are licensed for this kind of use. Good sources for free fonts for web are webfonts.info and Font Squirrel.

@font-face is currently what I find hardest to use, and for two main reasons. Firstly the number of glyphs in the open available fonts can be very limited, and often you don’t know which letters are included without having to test them yourself. The English alphabet is always there, but if you want to use local letters, you may struggle to find a font that both fits your design and writes well. The second reason is that most of these fonts aren’t optimized for screen presentation and different browsers render the fonts differently. Even if your OS render text with anti-aliasing, custom fonts may come out blocky and ugly.

Read on about @font-face.

This is just scraping the surface of what CSS3 is, and can be. We will continue testing it out and hopefully present the results here. For more updates and information on CSS3, css3.info is a great source.

UPDATE  Oct 22, 2009

Deep Blue Sky has compiled a summary of CSS3/HTML5 support in the current browser market.

Flash ads must be 50K or smaller in size and utilize Flash versions 4 – 8. All Flash ads should support the clickTAG variable.

Even if my ads met these requirements, they would not get accepted by the upload tool. The error message I got was “An error occurred. Please try again later”. Thank you. Very helpful!

I started eliminating code, and finally after removing all references to Tweener, it worked! After some more searching, I found another page called Follow our requirements for Flash image ads. It seems the Tweener package includes calls to Math.random(), and by Google’s second requirements page, random numbers are strictly forbidden.

The lesson is: Even if you have found some requirements, it doesn’t mean you have found them all. And please stay away from Math.random().

Following is a compilation of procedures, findings and experiences from my tests. No conclusions are reached yet. I’ll leave those to a later post.

Setup

1. Download and install JAWS 7.0.
   JAWS is currently available in version 9.0, but the JAWS scripts for Flex are only supporting version 6.0 and 7.0.
2. Download and install JAWS scripts for Flex (1.5 or 2.0)
3. Enable accessibility in your Flex compiler:
   Edit the flex-config.xml file so that the <accessible> attribute is set to true:
<mxml-compiler>
...
<accessible>true</accessible>
...
</mxml-compiler>
This file is usually located in:
   C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\flex-config.xml

Coding

Flex-components have built-in support for SRs, but the help text is often not very descriptive, and some components (eg. checkboxes and radiobuttons) aren’t read at all. Therefore it’s more safe to prepare every interactive component with a descriptive name for the SR to read.

Following is a function to ease the addition of accessibility text to components:

private function addAccessibility(comp:UIComponent, name:String):void {
comp.accessibilityProperties = new AccessibilityProperties();
comp.accessibilityProperties.name = name;
comp.accessibilityProperties.forceSimple = true;
comp.accessibilityProperties.noAutoLabeling = true;
}

To make forms best suited for accessibility, use mx:Form for the entire form and mx:FormItems for every input component:

<mx:Form>
<mx:FormItem label="First Name">
<mx:TextInput id="txtFirstname" />
</mx:FormItem>
...
</mx:Form>

Usage

Compile your movie and display it in IE with JAWS running in the background. Even if JAWS supports both IE 6.0, IE 7.0, Firefox 2.0 and Netscape® Communicator 4.5, JAWS+Flex/Flash only works in IE. The accessibility technology in Flash Player is built upon Microsoft Active Accessibility (MSAA) which is only available to JAWS from IE.

When the flash movie has loaded, JAWS will start reading through all of the content from start to end. Activate Forms Mode in JAWS by hitting NUM PAD SLASH or ENTER. You can now press TAB to select a button or an input field, JAWS will first try to read the accessibility text associated to the current element. If no such text exists, only the default text is read, describing the label and the type of element.

Issues

• Even if Flex’s components are made accessible, there’s a lot of known issues related to SRs. These problems comes from the SR implementation, not Flex.
• SRs don’t know when content in your movie has changed (new popups, windows, pages, etc), and there’s no way to tell them.
• Bug: You can’t use form headings <mx:FormHeading label="x"/> for forms. These will erroneously get read as the label to the following input component.
• Like stated before, accessibility in Flex is limited to some very strict conditions:
  • OS: MS Windows
  • Browser: Internet Explorer
  • Sreen Reader: JAWS version 7.0

Further Reading

Adobe: Flex Accessibility
WebAIM: Creating Accessible Macromedia Flash Content

Example applications from Adobe:
Blog Reader
Explorer