User Agent Man

Cross Browser CSS Transforms – even in IE

zoltan — Tue, 09 Mar 2010 05:00:05 +0000

An example of a page using the CSS Transform property and cssSandpaper. Visible in most major browsers, including Internet Explorer. Layout based on work done by Paul Hayes in his article 3D Cube using CSS transformations

The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object.

When I first saw sites using transform, I looked at the underlying code and tried to produce pages using transform in all browsers. Although Firefox, Opera and Webkit based browser support it via vendor-specific prefixes (using -moz-transform, -o-transform and -webkit-transform respectively) Internet Explorer doesn’t support it at all. I didn’t like that, so I took out my JavaScript whip, beat Explorer into submission and made it do my bidding (but not without getting a few mental bruises of my own).

Before I start talking about the details of my solution, let’s take a look at a few examples of it in action. The following code has been tested with Firefox 3.5, Safari 4, Chrome 4, Internet Explorer 6 and higher.

(The examples also work on my copy of Opera 10.5, although I have seen it fail on other installations – I will update this post when I find out why).

cssSandpaper to the Rescue

I saw the design potential of using CSS transforms and was frustrated at Explorer’s lack of support. I originally tried a non-JavaScript solution which involved creating CSS rules that combine transform with an IE technology that does something similar: the DXImageTransform.Microsoft.Matrix CSS filter.

I then, to steal a phrase from Russel Peters, started to Hurt Real Bad:

the syntax of transform is very obvious:
```
#myObject {
   transform: rotate(40deg) scale(2.0);
}
```
but the IE filter code is quite intimidating:
```
#myObject {
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=1.5320888862379554, M12=-1.2855752193730787,
        M21=1.2855752193730796, M22=1.5320888862379558);
}
```
The scary numbers that the DXImageTransform.Microsoft.Matrix filter uses requires knowledge of matrix and vector mathematics. Even though there is a great Wikipedia article on the subject, even the mathematically gifted wouldn’t want to do the calculations to do a simple rotate in CSS (I would like to note here that even though I have a university degree in Mathematics, I hate doing arithmetic inside my head. If you don’t believe me, watch me figure out a tip at a restaurant sometime. I’m not kidding).
although it is possible to have a list of transformations using transform, the DXImageTransform.Microsoft.Matrix filter only allows one transform matrix. In order to implement multiple transforms using one filter, a designer would have to convert all the transforms into matrices and multiply them together. Again, as ugly as I am when I first wake up in the morning.
when rotating, skewing, or doing any other transformations on objects using the transform property, the center of the object remains fixed. However, the Matrix filter doesn’t keep the centre of the transformed object fixed, as seen by the illustration below:

Rotate using CSS transform Rotate using IE Filter

See the above example in action (compare IE with the other browsers to see the difference for yourself)

I was about to give up on my endeavor until I read Weston Ruter’s clever CSS Gradients in Canvas article, which implements gradients in older versions Firefox and Opera. What I really liked was how he used the CSS from a web page to place the canvas gradients in the page (as opposed to using CSS classes to indicate where the gradients should go). I then thought it would be a great idea to do the same with CSS transforms – why not have JavaScript find out which objects are transformed by reading the style sheets containing the transform rules, and if the browser is Internet Explorer, apply the Matrix filter, while translating the image so that the center is maintained. How hard could it be …….. right?

After a few obsessive months of coding, coffee drinking and Asprin popping (as well angrily asking myself on several occasions why the &@$! I would wanted to do this in the first place), I created cssSandpaper.js, a library that implements transform (and some other CSS3 properties) as consistently as possible in all browsers. It uses many ideas from Ruter’s gradient script, as well as sylvester.js, James Coglan’s brilliant matrix and vector math library.

The code is currently in a beta stage, but I think that it’s in good enough shape that developers can start to play around with these really cool effects today and have it work in almost any browser.

Browser Differences

After I finished cssSandpaper and played around with transforms, I found some slight differences in the way browsers handled them:

If you transform an object with scrollbars, it is possible to scroll the object in most browsers in most cases. However, in the cube page I mocked up, I noticed the following behaviour:
- the left facing side of the cube isn’t easily accessible in IE.
- the scrollbars don’t appear at all in Opera.
- the scrollbars are not quite clear in Chrome for Windows, although one can still scroll the sides if you can guess where they are.
- Firefox 3.5 for Mac puts the scrollbars in strange places (this has been fixed 3.6).
In Internet Explorer, the text is selectable but sometimes it takes a few tries to figure out how to do it (try selecting text with IE in my cube mockup and you’ll see what I mean).
When selecting text within Firefox, the text tends to jump around ever so slightly for some odd reason (this is quite a subtle effect that it is probably not noticeable in most instances).
It looks like Internet Explorer takes the block of HTML, converts it to an image and then does the transform (I’m not sure .. I’m guessing). As a result, the text in certain situations will look a little blurry, especially if scaling is involved.

As to be expected, the rendering of the transformed text in the other browsers slightly differs:

	Explorer 6.x+	Safari 4.0+	Opera 10.0+
Windows
Mac OS X	Not Applicable		Doesn’t support transforms yet (as of version 10.50)
Linux	Not Applicable	Not Applicable	Doesn’t support transforms yet (as of version 10.50)

Using cssSandpaper

After downloading the archive you must put the following tags into the head of your document after all of your style sheet declarations (this is to ensure the JavaScripts will run after the style sheets are loaded):

You can then use the transform property in your web pages. Note that since the specification for the transform property is finalized by the W3C, I decided to use the vendor-specific prefix -sand- before each CSS3 property it supports.

The following is a description of how to use transform, as well as two other CSS3 properties that cssSandpaper supports, box-shadow and gradient.

Download version 1.0 beta of cssSandpaper

-sand-transform

Description

Transforms allow developers to rotate, scale, and skew blocks of HTML via CSS.

Syntax

#container {
   -sand-transform:  ;
}

where can be a space separated list of the following functions:

Function	Purpose
`rotate(angle)`	Rotates HTML elements. `angle` can be in degrees (e.g. rotate(30deg)) or radians `rotate(1.3rad)`
`scale(sx[, sy])`	Scales HTML elements. `sx` and `sy` are numbers, where `1` represents the original size, `2` represents twice the size, etc. Note that if `sy` isn’t specified, it is assumed to be equal to `sx`. Similar functions are `scaleX(sx)` and `scaleY(sy)`.
`skew(ax[, ay])`	Skews the object around the x and y axes by the specified angles in degrees or radians. If `ay` isn’t provided, it is assumed to be `0deg`.
`matrix(a, c, b, d, tx, ty)`	Applies a 2D transformation matrix comprised of the specified six values. If you aren’t familiar with linear algebra and matrix arithmetic, this function will be hard to understand. For further information, you may want to read Wikipedia’s Transformation Matrix article, although if you are mathematically challenged, you may run away from your computer screaming. If you are familiar with matrix multiplication, note that c and b are reversed. This follows the way Firefox has implemented this method (i believe WebKit based browsers reverse these numbers).

Note: non-Explorer browsers support the translate function as well. I have not been able to find a way to make this work IE at this time, due to a technical issue with the IE’s Matrix filter property (for those who want details, I use sizingMethod='auto expand' when using the Matrix filter which doesn’t support translations, and using sizingMethod=’crop’ is not suitable to emulate the transform property). For this reason, the tx and ty values of the matrix() function are not supported as well.

Examples

-sand-box-shadow

Description

box-shadow allows us to take a block level element and put a shadow underneath. There can optionally set a blur factor to give a warmer effect to the shadow.

Syntax

#container {
   -sand-box-shadow:    
;
}

Note that in IE, the blur-radius is not supported, due to a lack of support in IE’s DropShadow filter.

Examples

Box-Shadow Example

-sand-gradient

Description

Gradients are gradual blends of color, and can be linear or radial:

Syntax

#container {
   background-image: -sand-gradient(, , , , , ..., )
}

The type can be linear and gradient, although Internet Explorer doesn’t support radial gradients at this time, due to limitations in IE’s gradient filter. Internet Explorer also only supports simple linear gradients (i.e. only horizontal and vertical and only two colours).

A more detailed explanation can be found in the section regarding gradients of the W3C’s working draft of CSS Image Values Module Level 3

Examples

Gradients Example Page

Other Known Issues

Currently, when a users changes the font-size in IE, the layout gets a little messed up. This will be fixed in a future release.
Scripting in IE cannot be done via the usual obj.style.transform. There is, however, an alternative way of scripting the cssSandpaper supported properties which will be outlined in a future blog post (I don’t mean to keep anyone in suspense … it’s just that I feel like I’ve spent too much time on this post and I want to get at least this part out the door :-) ).
Opera 10.5 sort of works. It works on my copy, but not on another copy I’ve seen. I don’t know why yet, but I will find out soon and post and update when I do.
Weston Ruter’s gradient script has more features. I will incorporate them in a future release.

Future Work

cssSandpaper will eventually be about more than just transforms – I would like to be able to support other advanced CSS topics (maybe even animations, if it is possible). It probably has a few bugs in it – I would really appreciate anyone letting me know if you find any (my e-mail address is at the top left part of the page).

If anyone would like to get contribute code or do testing, I would love the help too. :-)

Acknowledgments

I would like to thank Weston Ruter for his CSS Gradients in Canvas script, since I stole many of his ideas with his permission (I will be implementing more of the advanced features of his script in a future release of CSS3Sandbox). I would also like to thank James Coglan for building Sylvester so I didn’t have to.

Downloads

Download version 1.0 beta of cssSandpaper

Cross Browser HTML5 Drag and Drop

zoltan — Mon, 11 Jan 2010 03:52:17 +0000

Update (Feb 3, 2009):

A bug in Webkit seems to be the culprit in the permissions form example below not working correctly in Safari 4. The code has been updated to work around this bug and the article below has been updated. Thanks to russbuelt for pointing this out.
Apparently, an example made by Apple which I reported not working in Safari does work in Safari 4.0.4 for Mac OS X. Thanks for Scott Straker for this information.

Image Credit: Flickr user svartling

HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers. Mozilla, Apple and Microsoft all have pages describing how to use it, but their examples seem to work only in their particular browser (~~Apple’s example doesn’t even work in their own!~~ Updated, Jan. 11, 2009: Although I have not been able to get this example working on Safari 2.0.4 and 3.1.2 for OS X and 4.0.4 for Windows, I have received word that it works on Safari 4.0.4 on OS X). Remy Sharp’s great article Native Drag and Drop was a good place for me to start — however, the examples didn’t work in Internet Explorer. I also thoroughly enjoyed JavaScript guru Peter-Paul Koch’s humorous and lengthy rant about cross-browser drag and drop headaches where he uses creative and colourful language to describe what he thought of the standard, the browser manufacturers, and the WHAT-WG.

When normal people see the author of the Compatibility Master Tables respond negatively to a web technology, they would probably assume it would be a good sign to stay away from it.

However, I am not normal. With a name like Zoltan, how could I possibly be normal? (and yes, it is my real name).

So, I decided to find out for myself how bad HTML5 Drag and Drop really is. Almost immediately, I understood Koch’s reaction – the browser vendors have not implemented all the same features, and there are even a few quirks in how the features that are implemented work. However, after doing a lot of research, I found a common denominator that works well, with the help of a small bit of JavaScript that smooths out the edges. Despite the implementation flaws, Future-proof HTML5 Drag and Drop is not too hard for developers to use in their own applications. This article will explain how to do this step by step with many examples along the way. By the time you are done, you will be able to write useful drag and drop scripts of your own like in this example:

See an example of HTML5 Drag and Drop in action.

Advantages Over Existing Drag and Drop Implementations

Koch mentioned in his blog post that “Web developers MUST NOT (in the sense of RFC 2119) use HTML 5 drag and drop. They should use old-school scripts instead”. I would argue that developers should use HTML5 drag and drop for the following reasons:

JavaScript Framework Independent: Most other (but not all) drag and drop implementations are tied into 3rd party frameworks like Dojo, Prototype or jQuery.
Built-in Browser Support: HTML5 Drag and Drop is supported in Firefox 3.5+, Chrome 3.0+, Safari 3.0+ and Internet Explorer 5.0 (Note: that is not a typo — HTML5 Drag and Drop is based on work done by Microsoft in 1999). Because it is part of HTML5, I assume Opera support should be inevitable.
Integration With Other Web Applications: the HTML5 specification will allow developers to produce drag and drop scripts that work across frames, and across browser windows.
Integration With Non-Web Applications: the HTML5 specification also allows users to drag and drop data to and from non-web applications

The Basics of Drag and Drop, Step by Step

In order to save other developers from the headaches I got deciphering cross browser drag and drop, I present the following guide that shows how to do in five easy steps. Every step will describe a set of related concepts, and will show examples, most of which are built on code from previous steps. At the end of each step, I will discuss any issues and interesting bits I came across.

Step 1: Defining a Draggable Object

First you need to define the HTML nodes that you want to drag. Firefox requires that these nodes have their draggable attribute set to "true", Internet Explorer requires that the node must be an tag with (the href attribute set) or an tag.

This is a draggable item

To show how this works, I have written a very simple page with a the above markup in the :

Test #1: A Simple Draggable Object

This is a draggable item

Try to drag the red box around. You will see the draggable object cloned in every browser except Explorer and Chrome.

Go back to the User Agent Man HTML5 Drag and Drop article

Note that this HTML page has two scripts in the :

EventHelpers.js: this script implements cross-browser event handling routines without the need for a JavaScript framework. All the examples in this article use it, but feel free to refactor all the code in this article to use a third party framework like Dojo, jQuery or whatever framework you like.
DragDropHelpers.js: among other things that I will get to later, will activate dragging on draggable="true" objects in Safari and Chrome using a built-in copy of Dean Edwards’ cssQuery. It does this by inserting the following CSS code into the HTML document:
```
[draggable=true] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
```
The first two rules allow the dragging of the draggable="true" nodes, while the last two prevent the user from selecting the text within the node (which can cause some unexpected behavior in Webkit browsers). The -khtml properties work in older versions of Safari, while -webkit ones work in newer versions. Without these CSS properties, these nodes will not be draggable when using the Safari web browser

See Example #1: a draggable object

A couple of notes:

You’ll notice that when you hover the mouse pointer over the draggable item, it will change to (i.e. I the “move” cursor). This is not the default behavior of the web browser – it is something I added in DragDropHelpers, since I believe that it’s a nice visual cue to show users that an object is draggable (if you don’t want this behavior, it is possible to turn it off in your own scripts by setting DragDropHelpers.showMouseoverCue to false
How draggable objects look in the various browsers varies. Here are screenshots of how it looks in Windows web browsers (Note: although all screenshots were taken using Windows XP, similar results occur when viewing under Windows Vista or Windows 7):

Firefox (Windows XP) Safari (Windows XP) Explorer & Chrome (Windows XP)

Note the differences between these three browsers:
- Firefox for Windows shows a cloned version of the draggable object underneath the mouse pointer when the object is being dragged, while Safari displays a grey box with the text “This is a draggable item” written inside. Explorer and Chrome don’t show any effect at all (We will address this issue later).
- Since we have not established where we are going to drag our object, all Windows browsers will change the mouse pointer cursor to (a.k.a. the “not-allowed” mouse pointer). This is the expected behavior, and you will see later that it will help the user know where to drop the object.
On OS X, Firefox and Safari look similar to Firefox for Windows, except that the “not-allowed” mouse-pointer doesn’t show up:

Firefox (OS X) Safari (OS X) Chrome (OS X)

The Linux browsers don’t have the “not-allowed” mouse cursor either. Also, the cloned version of the draggable object isn’t transparent using the Linux version of Firefox, and Chrome under Linux behaves pretty much the same as on the other platforms (Note: all Linux testing was done using Ubuntu 9.10 using the standard Gnome window manager).

Firefox (Ubuntu) Chrome (Ubuntu)

The fact that Explorer and Chrome don’t have any visual dragging cues bugged me, so I put a “fix” inside DragDropHelpers.js which can be turned on by setting DragDropHelpers.fixVisualCues to true. Let’s look at a slightly refactored version of Example #1 where we insert the following code in the :
```
   
      Test #1: A Simple Draggable Object (with visual cues added to Explorer and Chrome)
      
      
      

      

   
   

      Test #1: A Simple Draggable Object (with visual cues added to Explorer and Chrome)

      This is a draggable item

      Try to drag the red box around.  You will see the draggable object cloned in all browsers.

      Go back to the User Agent Man HTML5 Drag and Drop article

   
```

See Example #1a, a draggable object with visual cue fix for Explorer and Chrome

Voila! The visual cue now shows up. I’ll explain how this works at the end of the article.

Step 2: Setting Events on the Draggable Object

Now that you have defined an object as draggable, you should attach some events to it so the browser knows what to do while it is being dragged. There are three events that a draggable object can fire:

Event name	Description
`dragstart`	Fires when the user starts dragging of the object.
`drag`	Fires every time the mouse is moved while the object is being dragged.
`dragend`	Fires when the user releases the mouse button while dragging an object.

A developer would attach these events the way they would any other JavaScript event – I use EventHelpers.addEvent, but one could use jQuery’s bind() method, prototype’s Event.observe() or whatever you favourite framework provides for event handling. Developers can also use the old school inline events (i.e. ondragstart="somefunction();">This is a draggable item), but I try to stay away from using those to seperate document structure from behavior.

Let’s take the example in step 1 and change it so we can log when these events happen to the toDrag node:

Example #2: a draggable object with events attached

Try to drag the red box around. This page will tell you if the object is currently dragging, and will log all dragstart and dragstop events

Is dragging: no

Event now firing:
Go back to the User Agent Man HTML5 Drag and Drop article

This is a draggable item

In the 02-dragObjectWithEvent.js script, the dragEventNotice node will be used to report whether the user is dragging the object around, and the eventNotice will be used to log what events the user has fired:

var dragObject = new function () {
   var me = this;

   var dragNode;
   var eventNoticeNode, dragEventNoticeNode;

   /* runs when the page is loaded */
   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      /* The node being dragged */
      dragNode=document.getElementById('toDrag');

      /* The nodes that report to the user what is happening to that node*/
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* The drag event handlers */
      EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      EventHelpers.addEvent(dragNode, 'drag', dragEvent);
      EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);
   }

   /*
    * The dragstart event handler logs to the user when the event started.
    */
   function dragStartEvent(e) {
      eventNoticeNode.innerHTML =
         sprintf("%s: Drag Event started.
%s",
            new Date(),  eventNoticeNode.innerHTML);
   }

   /*
    * The drag event reports to the user that dragging is on.
    */
   function dragEvent(e) {
      dragEventNoticeNode.innerHTML = "Currently dragging.";
   }

   /*
    * The dragend event logs to the user when the event had finished *and*
    * also reports that dragging has now stopped.
    */
   function dragEndEvent(e) {
      eventNoticeNode.innerHTML =
         sprintf("%s: Drag Event stopped.
%s",
            new Date(), eventNoticeNode.innerHTML);
      dragEventNoticeNode.innerHTML = "Dragging stopped."
   }
}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

Before we get to the drag events, a word about the coding conventions I use for this and all the other code examples in this article:

the var me = this line ensures that the script doesn’t confuse the this keyword of the object with the this keyword inside an event handler.
EventHelpers.addPageLoadEvent() (which is part of EventHelpers.js) will execute dragObject.init when the HTML has loaded. addPageLoadEvent() is based on code from Dean Edwards’ article The window.onload Problem – Solved!. It is similar to jQuery’s $(document).ready()method and prototype’s dom:loaded event.
This code uses a JavaScript version of sprintf() that I had mentioned in a previous blog post. I have used it in all the remaining examples because I think it makes the code a lot easier to read (however, it is not necessary in order to make HTML5 drag and drop work).

Let’s get back to the drag events — you’ll notice that I have set the dragstart, drag and dragend events. When this page is loaded, it will tell you if the draggable object is currently being dragged, and will log all dragstart and dragstop events on-screen. Click on the example link below and see for yourself:

See Example #2, a draggable object with events attached

Step 3: Setting Events on the Target Object

Step 2 showed us how we can drag an object around the screen and know when each drag starts and ends. Now we need to drop the object. Let’s define a drop target to be an object where draggable objects can be dropped. A drop target can have the following event handlers attached to it:

Event name	Description
`dragenter`	Fires when a draggable object is first dragged inside an object.
`dragover`	Fires everytime a draggable object is moved inside an object. Note: if you want to allow the draggable object to be dropped inside this object, you must cancel the default behaviour of this event handler.
`dragleave`	Fires when a draggable object is dragged out of an object.
`drop`	Fired when a draggable object is dropped into an object.

If you want an object to become a drop target, you must attach both the dragover and drop events to it. You may ask “I understand why I need to implement drop (after all, it is one half of the term “drag and drop”) but why do I need dragover?” As stated in the table above, the drop event will not fire unless you cancel the default behaviour of the event target’s dragover event. This point is really important and your scripts will not work correctly unless you do this.

You may ask “Why is there even a dragover event in the first place? Isn’t drag sufficient?” (In his article, Peter-Paul Koch asked this question a bit more emphatically that I did). The dragover event object does contain some useful information, such as the coordinates of the mouse pointer inside the event target, (When I created DragDropHelpers, this information allowed me to fix Explorer and Chrome’s visual cue issue that I mentioned in step #1). These coordinates are stored in the properties offsetX and offsetY, except in Firefox 3.5 which keeps these values inside of the event properties layerX and layerY. For convenience, DragDropHelpers includes a method called getEventCoords() that will use the appropriate property to get these values (Note: layerX and layerY are only accurate when the drop target’s CSS position propety is set to relative, absolute or fixed).

To show how to add drop functionality to your code, lets take the code from example #2 and add a drop target:

Example #3: a dragable object with a drop target

Try to drag the red box around and dropping it in the target object.

Is dragging: no

Event now firing:
Go back to the User Agent Man HTML5 Drag and Drop article

This is a draggable item

This is a "target" object

The drop target will be the

with an id of dropTarget. The 03-dragObjectWithTargetObject.js script is the same code in example #2 except we add two event handlers:

a dragover event that reports where the mouse is inside dropTarget
a drop event that reports when the drop happened.

var dragObject = new function () {
   var me = this;

   var dragNode, targetNode;
   var eventNoticeNode, dragEventNoticeNode;
   me.init = function () {

   	if (EventHelpers.hasPageLoadHappened(arguments)) {
   		return;
   	}	

   	dragNode=document.getElementById('toDrag');
   	targetNode=document.getElementById('dropTarget');
   	eventNoticeNode = document.getElementById('eventNotice');
   	dragEventNoticeNode = document.getElementById('dragEventNotice');

   	/* These are events for the draggable object */
   	EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
   	EventHelpers.addEvent(dragNode, 'drag', dragEvent);
   	EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);

   	/* These are events for the object to be dropped */
   	EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
   	EventHelpers.addEvent(targetNode, 'drop', dropEvent);

   }

   function dragStartEvent(e) {
   	showMessage("Drag Event started");
   }

   function dragEvent(e) {
   	dragEventNoticeNode.innerHTML = "Currently dragging.
";
   }

   function dragEndEvent(e) {
   	showMessage("Drag Event stopped");
   	dragEventNoticeNode.innerHTML = "Dragging stopped."
   }

   function dragOverEvent(e) {
   	var coords = DragDropHelpers.getEventCoords(e);
   	showMessage(sprintf(
   	   "Drag over event happened on node with id %s at coordinate (%d, %d)",
   	   this.id, coords.x, coords.y));
   	EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
   	showMessage("Drop event happened on node with id " + this.id);
   	EventHelpers.preventDefault(e);
   }

   function showMessage(message) {
   	eventNoticeNode.innerHTML =
   		sprintf("%s: %s
%s",
   			new Date(), message, eventNoticeNode.innerHTML);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

(Note: EventHelpers.preventDefault(e) does what you’d expect: it prevents the default behavior of the event handler, similar to prototype’s Event.stop() or jQuery’s event.preventDefault())

See Example #3: a dragable object with a drop target

Note that in the above example, the time that the draggable object’s dragend event fires and the time that the drag target’s drop event fires is not consistant among browsers. Safari and Chrome fire dragend first, while Firefox and Internet Explorer fire drop first.

The two other drop target events, dragenter and dragleave are not absolutely necessary for every script, but let’s add these events to example #3 anyway to see how they work:

var dragObject = new function () {
   var me = this;

   var dragNode, targetNode;
   var eventNoticeNode, dragEventNoticeNode;
   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      dragNode=document.getElementById('toDrag');
      targetNode=document.getElementById('dropTarget');
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* These are events for the draggable object */
      EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      EventHelpers.addEvent(dragNode, 'drag', dragEvent);
      EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);

      /* These are events for the object to be dropped */
      EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
      EventHelpers.addEvent(targetNode, 'drop', dropEvent);
      EventHelpers.addEvent(targetNode, 'dragenter', dragEnterEvent);
      EventHelpers.addEvent(targetNode, 'dragleave', dragLeaveEvent);
   }

   function dragStartEvent(e) {
      showMessage("Drag Event started");
   }

   function dragEvent(e) {
      dragEventNoticeNode.innerHTML = "Currently dragging.
";
   }

   function dragEndEvent(e) {
      showMessage("Drag Event stopped");
      dragEventNoticeNode.innerHTML = "Dragging stopped.";
   }

   function dragOverEvent(e) {
      var coords = DragDropHelpers.getEventCoords(e);

      showMessage(sprintf(
         "Drag over event happened on node with id %s at coordinate (%d, %d)",
         this.id, coords.x, coords.y));

      EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
      showMessage("Drop event happened on node with id " + this.id);
      EventHelpers.preventDefault(e);

   }

   function dragEnterEvent(e) {
      showMessage("Drag Enter event happened on node with id " + this.id);
   }

   function dragLeaveEvent(e) {
      showMessage("Drag Leave event happened on node with id " + this.id);
   }

   function showMessage(message) {
      eventNoticeNode.innerHTML =
         sprintf("%s: %s
%s",
            new Date(), message, eventNoticeNode.innerHTML);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

See Example #3a: a drop target with dragenter and dragleave event handlers

(Note that in Firefox 3.5, a dragleave event will fire just before a drop event, which the other browsers don’t fire dragleave when dropping).

Step 4: Passing Data Between the Draggable and Target Objects

Once a draggable object is dropped into a drop target, the two objects can pass information between them using the drop event’s dataTransfer property. This property has two methods, setData() and getData(). In order to pass data between the two, a developer must use setData() during one of the draggable node’s drag events (e.g. dragstart). The drop target can then receive this data during one of it’s events using the getData() method.

Method Description

Method	Description
`setData(dataType, data)`	Sets the data that can be shared between the draggable node and the drag target. Parameters `dataType` – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’. `data` – The data that is going to be set.
`getData(dataType)`	Gets the data that was previously set by `dataTransfer.setData()`. *It can also get data that was set by a `dataTransfer.setData()` call from another page, another browser window, and another vendor’s web browser on the same machine.* It also can get data that was set by a drop event of another desktop application (for example, Windows WordPad). Parameters `dataType` – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’.

setData(dataType, data)

Sets the data that can be shared between the draggable node and the drag target.

Parameters

dataType – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’.
data – The data that is going to be set.

getData(dataType)

Gets the data that was previously set by dataTransfer.setData(). It can also get data that was set by a dataTransfer.setData() call from another page, another browser window, and another vendor’s web browser on the same machine. It also can get data that was set by a drop event of another desktop application (for example, Windows WordPad).

Parameters

dataType – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’.

setData() takes one string parameter, which is the data you want to share between the draggable object and a drop target.

Let’s take the code from step #3 and mix it up a bit: instead of having one draggable object, let’s make four. I have taken four photos of the Beatles from the Wikmedia Commons and made them draggable.



   
      Test 4: setData() and getData()
      
      
      

      

      

   
   

      Test 4: setData() and getData()

      
      
      
      

      Drop an image here to find out more information about it.

The script 04-setDataGetData.js uses dataTransfer.setData() and .getData() to copy the of the Beatle being dragged, as well as placing the alt attribute’s contents underneath the image.

var dragObject = new function () {
   var me = this;

   var targetNode;
   var eventNoticeNode, dragEventNoticeNode;

   var dataTransferCommentString;

   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      targetNode=document.getElementById('dropTarget');
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* These are events for the draggable objects */
      var dragNodes = cssQuery('[draggable=true]');
      for (var i = 0; i < dragNodes.length; i++) {
         var  dragNode=dragNodes[i]
         EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      }

      /* These are events for the object to be dropped */
      EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
      EventHelpers.addEvent(targetNode, 'drop', dropEvent);
   }

   function dragStartEvent(e) {
      e.dataTransfer.setData('Text',
         sprintf('
%s',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
      this.innerHTML = e.dataTransfer.getData('Text');
      EventHelpers.preventDefault(e);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

See Example #4: using setData() and getData()

As previously mentioned the data that is set in setData() can be read in other applications. If you are in Windows, open up WordPad and drag one of the images into it. You’ll see the data that was given to setData() during the dragstart event.

This interoperability with the operating system will allow developers to do some very interesting things which are out of the scope of this article. I will, however, want to explore this in future postings.

Step 5: Drag and Drop Effects

In a traditional desktop application, you can use drag and drop to copy objects, move objects, and create links to things. You can use the HTML5 drag and drop events to do this as well, but it would be nice to give the user visual cues to show what kind of action a draggable object can do, and what kind of action a drop target can accept. It would also be nice to only allow “copy objects” to only drop on drop targets that are programmed to accept them.

These features can be implemented using e.dataTransfer.effectAllowed on the draggable object and e.dataTransfer.dropEffect()on the drop target:

Method	Description
`e.dataTransfer.effectAllowed`	Sets the type of effect a draggable object is allowed to make. Valid values are `copy`, `move`, `link`, `copyMove`, `copyLink`, `linkMove`, `all`, and `none`.
`e.dataTransfer.dropEffect`	Sets the type of effect a drop target is allowed to accept. Valid effects include `copy`, `move`, and `link`.

When these are set correctly, drag and drop will only work when the draggable object’s effectAllowed and the drop target’s dropEffect are compatible. To illustrate this, let’s first change the dragstart and dragover events in example #4 to do the copy effect:

   function dragStartEvent(e) {
      e.dataTransfer.effectAllowed="copy"; 

      e.dataTransfer.setData('Text',
         sprintf('
%s',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      e.dataTransfer.dropEffect = "copy";
      EventHelpers.preventDefault(e);
   }

Example #5: matching drag and drop effects

Note that unlike example #4, the mouse pointer has changed from the copy icon (in Windows, ) to the move icon ().

Now let’s change the code so that the draggable object and the drop target don’t have matching effects:

   function dragStartEvent(e) {
      e.dataTransfer.effectAllowed="copy"; 

      e.dataTransfer.setData('Text',
         sprintf('
%s',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      e.dataTransfer.dropEffect = "move";
      EventHelpers.preventDefault(e);
   }

See Example #5a: unmatching drag and drop effects

You’ll see that the user is not able to drop the image on the drop target.

Update (Jan 28, 2010): There is a documented bug in Safari and Chrome for Windows where drag and drop will not occur if effectAllowed and dropEffect are set to move. This bug does not occur in the Mac editions of these browsers.

A More Complex Example

Let’s take all the information we have gathered and make a “real-world” script. Let’s say you were asked to create a “user entitlement” administration widget for a website. The widget will have three entitlement catagories: “Unassigned Users”, “Restricted Users” (e.g. users who have restricted access to the website) and “Power Users” (e.g. users who would have administration access to a website):

Screenshot of the user entitlement screen we want to implement

It should be rather easy for an administrator to drag and drop users back and forth between entitlement “buckets” in order to elevate or lower a users credentials.

Let’s go through the steps we established above to implement this script.

Step 1: Defining a Draggable Objects

First let’s take a look at the table in the HTML:


    
        
            Unassigned Users
            Restricted Users
            Power Users
        
    

    
        
            
            	Moe Howard
		Curly Howard
		Shemp Howard
            	Larry Fine
	    

            
            

            
            
        
    
    
	
	  Drag a user from this list to another list to change the
	  user's permissions.
	
	
	  Dragging user here will give this user restricted
	  permissions.
	
	
	  Dragging a user here will give this user power user access.

Unassigned Users	Restricted Users	Power Users
Moe Howard Curly Howard Shemp Howard Larry Fine
Drag a user from this list to another list to change the user's permissions.	Dragging user here will give this user restricted permissions.	Dragging a user here will give this user power user access.

(Note that the contents in the tfoot node are hidden by CSS).

Step 2: Setting Events on the Draggable Objects

The “users” are draggable objects. In the script, we find all these nodes using Dean Edwards’ cssQuery and set dragstart and dragend event handlers on each of them (Note: cssQuery allows us to select nodes by CSS selector, similar to the built-in functionality inside jQuery).

userNodes = cssQuery('[draggable=true]');
for (var i=0; i

It then keeps track of the current node being dragged in the object variable currentlyDraggedNode and makes that node transparent by making it a member of the draggedUser class, which the page’s stylesheet defines as transparent.

function userDragStartEvent(e) {
   currentlyDraggedNode = this;
   currentlyDraggedNode.className = 'draggedUser';
}

The dragend event removes the transparency of the currentlyDraggedNode:

function userDragEndEvent(e) {
   currentlyDraggedNode.className = '';
}

Step 3: Setting Events on the Target Objects

All the table cells in the are drop targets, so we use cssQuery again to grab all those nodes and set the appropriate events.

userListNodes = cssQuery('.userList');

for (var i=0; i

The most important event is the drop event handler. This event handler takes the currentlyDraggedNode, removes it from its current table cell (using removeChild()) and drops it into the drop target (using appendChild()).

function setHelpVisibility(node, isVisible) {
   var helpNodeId = node.id + "Help";
   var helpNode = document.getElementById(helpNodeId);

   if (isVisible) {
      helpNode.className =  'showHelp';
   } else {
      helpNode.className =  '';
   }
}

function userDropListEvent(e) {
   currentlyDraggedNode.parentNode.removeChild(currentlyDraggedNode);
   this.appendChild(currentlyDraggedNode);
   setHelpVisibility(this, false);
   userDragEndEvent(e);
}

They show the contents of the table cell below it by making it a member of the class showHelp. They also

prevent the dragover default behaviour so that drop events will fire in the drop target.

function userDragOverListEvent(e) {
   setHelpVisibility(this, true);
   EventHelpers.preventDefault(e);
}

The dragleave re-hides the contents of the table cell below it.

function userDragLeaveListEvent(e) {
  setHelpVisibility(this, false);
}

function userDragEndEvent(e) {
   currentlyDraggedNode.className = '';
}

Steps 4 and 5

We do not actually pass any data between the draggable object and the drag target — when the drop event occurs, the draggable object is moved from one column to another without the need of any dataTransfer data. The drag and drop effects were already handled in step 3, so we are all done.

See the above example in action

Drag and Drop Between Frames

Using the above information, it is also possible to drag and drop objects between frames (this is something that I don’t think any old school drag and drop script can do). I made an example below, and I leave it as an exercise to the reader to go through the code and figure out how it works.

See the inter-frame drag and drop example in action

Cross-Browser Issues I Have Seen

These are the cross-browser issues I know of so far. I will update this list with others I find in the future.

in Firefox 3.5, a dragleave event will fire just before a drop event, which the other browsers don’t fire dragleave when dropping.
the time that the draggable object’s dragend event fires and the time that the drag target’s drop event fires is not consistant among browsers. Safari and Chrome fire dragend first, while Firefox and Internet Explorer fire drop first.
According to Francisco Tolmasky, setData() cannot be called during drag events in Firefox. Hopefully this will be fixed in a future release of the browser.
DragDropHelpers implements a workaround for Explorer so it can drag any object around. However, I did not use this functionality in any of the examples because it exposes a problem with Safari not being able to drag an object correctly when the user initiates the drag on the text inside it. This problem doesn’t happen with text inside of links, but with text inside other nodes (like a
tag). I understand this problem has been fixed in the Safari nightly builds, so I left the functionality in the DragDropHelpers library for future use.
DragDropHelpers.js “fixes” the dragging visual cues in Explorer and Chrome by:
- making a transparent and absolutely positioned clone of a draggable object when it’s dragstart event is fired
- moving the cloned object near the mouse when the ’s drag event is fired.
- destroying the clone when draggable object’s dragend event is fired.
I didn’t turn it on by default because I am not sure when (or if) this problem will be fixed in Internet Explorer or Chrome. I also doesn’t work well when dragging objects from one window or frame to another, since the cloned visual cue can’t jump from page to page. Feel free to use it (or not) as you see fit.
As mentioned previously, because of a bug in Webkit, drag and drop will not occur if effectAllowed and dropEffect are set to move in Safari 4.0.4. Hopefully this will be fixed in a future version of Webkit.

Conclusion

HTML5 drag and drop will be an important part of our front-end toolkit. Even though the flavors that browser-vendors offer today are incomplete, it is possible to smooth out these flaws to produce useful web applications. What I have covered here only scratches the surface – there are more properties and methods that some of browsers offer that can be used to further enhance the drag and drop experience. But I have been working on this blog entry way to long, and my wife is giving me that “what the hell are you doing up at this hour” look, so I think I’ll stop here for now.

Download

DragDropHelpers, and all code used in this article can be downloaded below.

DragDropHelpers.js v.1.0a and sample code.

My Favourite Third Party JavaScript Libraries

zoltan — Tue, 22 Dec 2009 22:15:23 +0000

Source: remix of images created by

Source: remix of images created by Everaldo Coelho and Wikimedia Commons user S.Möller.

Blogging has been a powerful tool for me to publicize code that I have written. Not only can I announce code that I want to release, I am always complimented by the fact that others like to share what they read here as well. Over the years, however, I have found bits of code others have written that have found irreplaceable in my web developer toolkit. Some of them are popular, but others are either obscure or not talked about at all. In order to give back to those who have unknowingly helped me do my job in the last decade, I am publishing the first in what hope is a series of articles about 3rd party JavaScript libraries. If anyone else would like to add to this list, please feel free to do so in the comment area below – I’d love to hear what others find as useful as what I have listed here.

Object Oriented Timeouts

I start off with a script that has been around for a while but to my knowledge is hardly ever talked about. It concerns Timeouts – which are quite important in this day-and-age of the “nifty-Web-2.0-animated-fade-in-and-out-effect”. When I starting coding JavaScript back in the mid-1990’s, setTimeout() and setInterval() did what I needed them to do – pause the application logic for a specified amount of time. However, when I starting to use the object-oriented features of JavaScript, I found a few problems:

setTimeout()and setInterval() both lose track of scope when calling a method of an object
setTimeout()and setInterval() can only pass strings and numbers to methods, not an arbitrary object.
the function call passed to setTimeout()and setInterval()is passed as a string. Parameters of the function call must be inserted by using ugly string concatenation:

setTimeout('fadeInLayer(' + (n+50).toString() +')');

However, back in 2003, a user named “algorithm” on Coding Forums came up with a great solution for Object Oriented Timeouts. Timeouts can now be done with objects and with a more elegant syntax:

function AjaxDialogue() {
   var me = this;

   // declaration of Timer object.
   me.timer = new Timer(me);

   // a timeout function using the Timer object:
   me.fadeInLayer = function (n, layerOpened, onFadeInEvent){

      ....

      /*
       * This call will set the opacity level of the node layeredOpened to n
       * percent
       */
      CSSHelpers.setOpacity(layerOpened, n);

      if (n < 100) {

         /*
          * setting a timeout of 10 milliseconds on the *public* method fadeInLayer() with the
          * parameters n+50, layerOpened, and onFadeInEvent.  Note only the first parameter
          * is not an object.
          */
         me.timer.setTimeout('fadeInLayer', 10, n+50, layerOpened, onFadeInEvent);

      }
   }
}

The question is: who is this “algorithm” person? This is brilliant code and should be credited correctly. It should also have a better home than just a forum posting.

Calendar Widget

HTML5 will have date input tags (i.e. ), complete will pop-up calendars, but until it is implemented by all browser vendors, what is a developer to do when they want users to input dates in a user friendly way? The best calendar widget I have found is dynarch.com’s Ex-“Coolest” DHTML Calendar. Although they have a cooler version, I like the former one more because it was released under the GNU Lesser Public License, so it is free as in beer as well as in freedom.

Querystring Parsing and Ajax Form Data Submission

I always found it odd that there is no built-in method in JavaScriptto grab form data from the query string from a web page’s URL. Adam Vandenberg’s Querystring Object filled in this gap with a simple script that gets this job done. Suppose your web page had the following URL:

http://me.com/mypage.html?page=3&itemsPerPage=10&query=Biker+Babes

To tell JavaScript to retrieve the value inside the CGI variable query, use the following code:

var qs = new Querystring();
var message = qs.get('query');

But how about if you have data in a form and you want to submit it using Ajax instead of the traditional post-to-the-server-and-retrieve-from-the-server way? Matthew Eernisse’s formData2QueryString() will construct a query string from a form so you can use with the XMLHttpRequest Object.

var queryString = formData2QueryString(form);

req=new new XMLHttpRequest();

req.onreadystatechange(myFunc);

req.open("GET", "/path/to/ajaxCall?" + queryString, true);

Logging

In any language, logging and debugging are necessary when it comes to discovering what is wrong with your code. While debuggers like Firebug are great for stepping into code line by line and understanding why an algorithm isn’t working right, it is sometimes more desirable to dump variables into a log, especially when trying to debug race conditions. Logging is also useful when you are too lazy to open a debugger but you don’t want your code bogged down by window.alert()’s

My favourite JavaScript logger is Andre Lewis’ JSLog . It doesn’t rely on a specific JavaScript framework, and it also stays out of the way until I need it — it starts off as a small yellow box in the top left corner of the application’s page, and only shows up when I click on it.

Ajax History and Bookmarking

After Google Maps came on the scene, a few usability experts pointed out the drawbacks of a lot of “Ajax” Applications:

Ajax breaks bookmarking: when users click on a link that results in an Ajax call that changes the content on the screen, users may wish to bookmark the results, and will be disappointed to realize that they didn’t really bookmark the result of the Ajax call.
Ajax breaks browser history: when users click on a link that results in an Ajax call that changes the content on the screen, they may intuitively click the back button in order return to the page’s state, ande will be frustrated when this doesn’t happen.

Really Simple History (RSH): Ajax history and bookmarking library, developed by Brad Neuberg and Brian Dillard, fixes these issues by storing data inside an JavaScript “cache” so that application state can be bookmarked and so that the back button can be used to return your application to an earlier state. I have used this library on a number of Ajax heavy applications and it works extremely well.

Fixing IE

Although Dean Edwards’ /ie7/ is not perfect, it does fix a lot of CSS issues with elderly versions of IE. I use it as one of many utilities in my toolbox when working with Internet Explorer. It is an awesome piece of work and since Edwards is well known in the JavaScript community, the only thing I can really add that hasn’t been said before is “Rispek“.

sprintf()

I started off as a C programmer, and when I first started coding in JavaScript, I was happy with it’s “C-like” syntax. The thing I missed most from the C-world was (and is) JavaScript’s lack of a sprintf() function, which makes the task of formatting strings quite easy. sprintf() is more powerful and produces more human-legable code than using the + JavaScript’s operator.

K&L Productions has produced a very good version JavaScript implementation of sprintf that I use regularly. There are others, but this one is the most complete version I have found and works well enough that I haven’t found a reason to change it. Perhaps it would be worthy of a future blog post to compare implementations to see which performs the best.

Introducing: The Type Rendering Project

zoltan — Mon, 30 Nov 2009 17:05:58 +0000

Although this blog wasn’t meant to be a forum on just CSS font-embedding, it is a topic of great interest to me and has been the inspiration of a few articles here (my article on JavaScript font-smoothing detection being the latest). As a result, I have been very fortunate in meeting a lot of interesting and like-minded individuals who want to make the web a better place for typography.

One of the more vocal ones, Paul Irish, asked me to join a project that will allow developers to find ways to make web type look better right now. Other members include web font blogger Tim Brown of Nice Web Type and Ethan Dunham of the excellent font resource Font Squirrel. The result is The Type Rendering Project – we’ve set some goals and would like to open up dialogue with you to fulfill them. We’re asking for your participation, and lots of expert advice, to fulfill these intentions. If you are interested and are a Twitter user, follow us – and more importantly, tell folks you care about how type looks on websites.

How to Detect Font-Smoothing Using JavaScript

zoltan — Sun, 29 Nov 2009 19:41:50 +0000

Interested in making web typography look better?

Read about The Type Rendering Project!

Examples of font-smoothing and subpixel-rendering as performed by technologies like ClearType. Image Credit: Wikimedia Commons users Pandries and Kalan

In an earlier article, I mentioned that Boing-Boing had a few issues when they wanted to use @font-face embedding inside their website. In short, the problem was that some fonts look bad on computer monitors without font-smoothing enabled in the operating system. This brought on a lot of discussion as to whether there was a way to detect whether or not font-smoothing was being used using JavaScript. I initially thought there wasn’t a way, but after seeing a promising but incomplete method of detecting font-smoothing, I spent a few days devising a way to do it.

Internet Explorer Does Something Easily (For a Change)

Paul Irish mentioned to me and a few other colleagues that he came across a page using an Active X control that detects font-smoothing in IE. I was so hopeful … until I realized that this only works on browsers that have come into contact with Microsoft’s online Cleartype Tuner, which I visited with my copy of IE months before. If a users had never visited this page, the script would fail.

I was more disappointed because Googling “javascript cleartype” did not point to anything useful. However, searching for “javascript font-smoothing” pointed me to an article that told me about Internet Explorer’s screen.fontSmoothingEnabled property. This gives us what we need … but only in Internet Explorer. How on Earth can we detect font-smoothing in other browsers, and in non-Windows operating systems?

Canvas to the Rescue

Letter 'O' , Arial font, 32 px, rendered both without (left) and with (right) font-smoothing

I then thought about about the screenshots I made for the @font-face in Depth article. Can a browser render a black glyph and detect if there is some sort of non-black pixel colouring around the its edges of the glyphs? A human can tell the difference: if there are some non-black pixels around the edge of the glyph, it must be using font-smoothing.

But web browsers can do this too! Just have the browser draw a letter in black inside a canvas tag, and then have it sift through the canvas’ pixels to see if there are any that are not pure black or pure white (more accurately, have the browser check the alpha channel to see if there are any semi-transparent pixels, which have a value that is not 0 or 255). If there are no semi-transparent pixels, then the algorithm assumes that no font-smoothing is being used. I wrote an JavaScript routine that does this – it starts from co-ordinate (8,1) and scans left to right, to the bottom of the canvas (any point on near the top on the left-hand side of the canvas would have done as well).

The result is a JavaScript object, TypeHelpers, which implements this routine in one method, hasSmoothing():

var TypeHelpers = new function(){

   // I use me instead of this.  For reasons why, please read:
   // http://w3future.com/html/stories/callbacks.xml
   var me = this;

   me.hasSmoothing = function(){

      // IE has screen.fontSmoothingEnabled - sweet!
      if (typeof(screen.fontSmoothingEnabled) != "undefined") {
         return screen.fontSmoothingEnabled;
      } else {

         try {

            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement('canvas');
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise
            // Safari Windows does not report correctly.
            canvasNode.style.display = 'none';
            document.body.appendChild(canvasNode);
            var ctx = canvasNode.getContext('2d');

            // draw a black letter 'O', 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
               for (var i = 1; i <= 32; i++) {

                  var imageData = ctx.getImageData(i, j, 1, 1).data;
                  var alpha = imageData[3];

                  if (alpha != 255 && alpha != 0) {
                     return true; // font-smoothing must be on.
                  }
               }

            }

            // didn't find any non-black pixels - return false.
            return false;
         }
         catch (ex) {
            // Something went wrong (for example, Opera cannot use the
            // canvas fillText() method.  Return null (unknown).
            return null;
         }
      }
   }

   me.insertClasses = function(){
      var result = me.hasSmoothing();
      var htmlNode = document.getElementsByTagName('html')[0];
      if (result == true) {
         htmlNode.className += " hasFontSmoothing-true";
      } else if (result == false) {
            htmlNode.className += " hasFontSmoothing-false";
      } else { // result == null
            htmlNode.className += " hasFontSmoothing-unknown";
      }
   }

}

// if EventHelpers.js is included, insert the hasFontSmoothing CSS classes
if (window.EventHelpers) {
   EventHelpers.addPageLoadEvent('TypeHelpers.insertClasses')
}

Note the object also has an insertClasses() method. This method, when run, adds a class to the html tag:

hasFontSmoothing-true if font-smoothing is being used
hasFontSmoothing-false if it is not
hasFontSmoothing-unknown if the user agent is unable to tell

This makes it easy for developers who don’t want to mess with JavaScript code and just want to use CSS.

Also note the EventHelpers.addPageLoadEvent() call at the end of the code. This method (which is part of EventHelpers.js, included with the archive below) implements Dean Edwards’ window.onload alternative which doesn’t wait for all the objects in the page to be loaded. I use this implementation to execute TypeHelpers.insertClasses() when the page loads so any font-detection CSS rules will work right away. Please feel free to change this code to use the equivalent function call in Dojo, Prototype, jQuery, or whatever JavaScript code framework you prefer.

Example #1: JavaScript Font Smoothing Detection

Enough of theory … let’s look at it in practice! To show how to detect font-smoothing with JavaScript, I created a page that, when the page is loaded, checks to see if it can tell if font-smoothing has been implemented and tells the user. Here is the code that does this check:

function displayInfo() {

   var message;
   var isFontSmoothingOn = TypeHelpers.hasSmoothing();
   if (isFontSmoothingOn == true) {
      message = "This browser is using a font-smoothing technology";
   } else if (isFontSmoothingOn == false) {
      message = "This browser isn't using a font-smoothing technology"
   } else {
      message = "We could not detect if font-smoothing is being used."
   }
   document.getElementById('detectInfo').innerHTML = message;

}

window.onload = displayInfo;

See the above code in action

Example #2: CSS Font Smoothing Detection

As implied earlier, this library can help CSS use different fonts if the browser is using a font-smoothing technology. For example, using the following CSS will allow a browser to use the Droid Sans embedded font only if it using font-smoothing — otherwise, it will use Arial:

@font-face {
	font-family: "Droid Sans";
	src: url("/shared/fonts/DroidSans/DroidSans.eot");
	src: local("Droid Sans"),
	     local("Droid Sans"),
	     url("/shared/fonts/DroidSans/DroidSans.ttf") format("truetype");
}

body {
	font-family: "Arial", "Helvetica", sans-serif;
}

html.hasFontSmoothing-true body {
	font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

We can also serve special content to users depending on the way fonts are rendered on their browser. We first create content for all three scenerios (browser uses font-smoothing, browser doesn’t use font-smoothing, and the “we cannot detect” case) and wrap the content inside div tags using appropriate CSS classes:


    You browser is rendering this page
    with font-smoothing. Because of that, we will attempt
    to serve up the Droid Sans font to render this page,
    because we think it looks cool. If you are using a
    browser (such as Google Chrome) that cannot render
    downloaded True Type fonts by default, then the page
    will be rendered using Arial instead.



    Your browser is not rendering this
    page with font-smoothing. It is for that reason we have
    decided to use the plain old Arial font to render this
    page, because it is hinted for use for displays that
    don't employ a font-smoothing technology.



    We are not sure if your browser is
    rendering this page with a font-smoothing technology.
    It is for that reason we have decided to use the plain
    old Arial font to render this page, because it is
    hinted for use for displays that don't employ a
    font-smoothing technology.

Note all the div tags are members of the class initiallyHidden. This class will be used to hide all font-smoothing related content until the script kicks in.

However, all this will not work unless we use the following CSS code:

.initiallyHidden {
	display: none;
}

html.hasFontSmoothing-true .fontSmoothingMessage,
html.hasFontSmoothing-false .noFontSmoothingMessage,
html.hasFontSmoothing-unknown .unknownFontSmoothingMessage {
	display: block;
}

Of course, this whole soltution relies on whether JavaScript being turned on in the user’s browser. This should be kept in mind when implementing this solution.

See the above code in action

Download

All code used in this article can be downloaded below (Note: version 1.0 was missing the Droid Sans Fonts which have now been put into the archive. Thanks to John Faulds for pointing this out).

TypeHelpers.js v.1.0a and sample code.

With the help of Tim Brown, it was determined that the code detected font-smoothing correctly in the following browsers:

Internet Explorer 6 and up on Windows XP and higher.
Firefox 3.5 and higher on Windows XP and higher, Mac OS X 10.4 and higher, and Ubuntu Linux 9.10 (and probably lower)
Chrome 3.0 on Windows XP and higher
Safari 4.0.3 on Windows XP and higher and Mac OS X 10.4 and higher

This script cannot detect font-smoothing in any version of Opera (at the time of this writing, this includes all versions up to 10.10), since it cannot write text inside the canvas element in a way we can poll the pixels afterwards. If anyone can find a way of making it work with Opera, please write a comment below — I’d love to be able to support this browser.

Testing Caveats

Testing font-smoothing in most Windows web browsers is easy since it can be turned off inside the Display control panel. However, when using Safari for Windows, it is necessary to navigate inside Safari’s Appearance preferences and set the Font-smoothing option to Windows Standard. This is because by default, Safari uses it’s own built-in font-rendering engine which doesn’t seem to render aliased fonts. In Mac OS X, it seems anti-aliasing only works for fonts below a certain size, so aliased fonts don’t seem to be an issue with that operating system. In Ubuntu Linux I have yet to find a way of shutting of font-smoothing. If anyone knows a way, please let me know.

Twitter Security Issue Affects My Twitter Account.

zoltan — Sat, 21 Nov 2009 22:05:19 +0000

Today has been a lovely day, I must say. Someone has been using my account to send SPAM messages saying:

I make money online with google. i learned how here: ——

This message was followed by a link, which I am not going to post here for obvious reasons. I found out when two of my followers sent me a private message and gave me the heads up (thanks Paul and Sharon!). I was away at a rummage sale at the time, but I changed my password using my phone to see if that would stop it. I am not sure if it will, but we’ll see.

When I came home, I found a couple of articles that reassured me it was not just my account:

Twitter ‘I make money online’ scam on p2pnet.net
Spammy scams surfacing on Twitter, Facebook on C|Net

Although this doesn’t appear to by my fault, I want to express my apologies to my followers about this. I don’t know what caused this, but I’ll keep you posted on future posts, so I can potentially prevent this from happening to others. I would never send you spam, and this really annoys me like you wouldn’t believe.

Configuring JavaScript Applications With XML

admin — Wed, 28 Oct 2009 02:37:54 +0000

I have been hacking JavaScript for close to 12 years now, and love it. But just like anyone you have been enamored with for a long time, there are bound to be things that drive you crazy about the object of your affection. Sure, your feelings are stronger than when you first met, but sometimes, after you’ve had an a disagreement after a late night of coding, you catch yourself thinking “why in the world does she do things that way!?! Ridiculous! She is driving me crazy with her inflexibility!” You then calm down, and realize that despite her flaws, she is still the exciting, cool and can’t-live-without-her girl she was when you first met her – maybe even more so.

Okay, I don’t mean to equate JavaScript with my wife (that may result with me sleeping on the couch tonight). But sometimes the way JavaScript does things is pretty silly. You’d figure after all these years, some of these things would have changed, but they haven’t.

Long Strings in JavaScript

Take for example the way that JavaScript likes to handle long, multi-line strings:

var html = "NameAddressCity" +
"ProvincePostal CodeTelephone";

Concatenating strings is a pretty expensive operation, both in memory and processing time, and using concatenation it to describe a constant string doesn’t make too much sense. But putting this string on one line would make the code quite unwieldy to read. Plus it looks ugly. I may be a slob in real life (my coworkers and my family could go on for hours about that one) , but I love my code neat.

Hard-Coding Values into Scripts

Another problem I have with this method of defining strings is that we are hard-coding text into the script. This is not a problem unique to JavaScript by any means, but this breaks the Structure/View/Behaviour separation model that I like to follow when I code a web application. Furthermore, if we had two pages with the same content but written in different languages (like in Canada, where a lot of sites are in English and French) we either have to have two versions of our script, or have the script broken into two parts: one with all the general code in it and one containing the language specific code. While the latter is the more desirable of the two, it doesn’t lend itself to integrate well with some server-side web application frameworks like Java Struts.

Furthermore, I hate hard-coding any type of value (strings, integers, and any type of objects) directly into my scripts. Scripts should be flexible enough to be used in any type of situation – your table pagination script may work well with having ten rows on the page at the time in one situation, but in another, you may want 15 or 20.

One comment I hear all the time is “Why not use JSON”? JSON is great, but because it is based on JavaScript, it is still gets ugly when manipulating long strings.

Enter config.js to the Rescue

In fact, it was Struts that inspired me to write the config.js JavaScript library. If you aren’t familiar with it, Struts is a Java Framework that allows developers to configure their server-side web applications easily with a set of XML files. It seemed natural to do the same in JavaScript, given all the DOM and XML processing routines that it has at its disposal, so I built config.js to do this task. With this library, JavaScript developers can configure their own scripts using a block of XML. This block of XML can be either embedded inside the HTML document (via an HTML comment) or in a separate XML file of its own. And this configuration block can contain any number of strings, numbers, arrays or objects that a developer would need to get the job done.

For example, let’s say you had a JavaScript function that looked like this:

function submitFormEvent(e){
  var amount = document.getElementById("amount").innerHTML;
  var creditCardType = document.getElementById("ccType").value;
  var month = document.getElementById("month").value;

  var configString = "Submitting this order will charge " + amount +
    " to your " + creditCardType +
    " and will be received on your " + month +
    " credit card bill.  Are you sure you want to do" +
    " this?");

  if (window.confirm(configString)) {
    window.location = "http://www.mycompany.com/myApp/chargeMe.do";
  }
  return;
}

As you can see, the English literals are hard-coded in the script and there is a lot of string concatenation going on. One could refactor the script to use config.js to fix these issues in four simple steps:

Include the EventHelpers.js and config.js scripts in the of your document (EventHelpers.js is included with the config.js archive):
Insert an XML block that contains the hard-coded strings in an HTML tag with an id of config:

Refactor you code to use config.js routines:

function submitFormEvent(e){
      var amount = document.getElementById("amount").innerHTML;
      var creditCardType = document.getElementById("ccType").value;
      var month = document.getElementById("month").value;

      var configString = config.getScriptedValue(
          "myApp.confirmCharge.text",
          {
            amount: amount,
            creditCardType: creditCardType,
            month: month
          });

      if (window.confirm(configString)) {
          window.location = config.getValue("myApp.confirmCharge.url");
      }

      return;
}

Replace any window.onload calls in your code with config.addLoadEvent() to ensure that any code that relies on config.js is initialized after the XML block is loaded into memory:
```
config.addLoadEvent(exampleConfigForm.init);
```

That’s it! If you need to internationalize your application, use whatever internationalization framework your server side code uses – it should integrate well with config.js. I use it with Java Struts all the time.

See an example of the above code in action

Use config.js in All Your Scripts

Have more than one script on a page that you want to use config.js with? No problem! Add another block of XML inside the node right after your other scripts config information:

Now, all your configuration information for all your scripts can be in one place. Programmers can now develop the code with place holders for the text, and not worry about accidentally messing up the code when marketing or customer service wants to make some textual changes.

config.js can also handle HTML

You can even insert full HTML inside the configuration XML block using a CDATA node:



  
    As of @date@ we will not be supporting Internet
    Explore 6 or lower.  Please upgrade your
    installation of Internet Explorer, or install the latest version of one
    the many alternative browsers available.
    
  ]]>

This makes using an HTML node’s .innerHTML property even more fun! You longer do you have to hard-code long chunks of HTML inside your scripts. Try that with JSON!

Framework Independent

Config.js is not part of a JavaScript framework – you can use this library whether you use prototype, mootools, Dojo, jQuery or anything else that may come along. Please feel free to make improvements and changes on it – if you submit the changes back to me, I’ll incorporate them into the next official release.

More Information

There is way more to config.js than is explained here. Complete documentation for the library can be found here:
config.js manual page

Download

You can get full source here:

config.js v.2.0 and example code (zip format)

More @font-face fun

zoltan — Sat, 10 Oct 2009 00:53:36 +0000

My first post @font-face in Depth got a huge amount of unexpected attention. Thank you all for your comments and criticism. Since the post, there have been quite a bit of information I have read about and thought I should share.

SVG fonts for Opera and Chrome

Jonathan Snook wrote a great article regarding Opera 10 and Google Chrome supporting SVG fonts (Chrome can load them without any pesky command line switch!). He mentions how to convert TrueType fonts to this format using Batik, and that by removing all the elements inside the file’s XML can make the font smaller than the original TrueType file. Too bad the browsers don’t support this format.

Opera’s buggy implementation

I noticed after I launched my first @font-face article that Opera was not loading the fonts on my blog when users visited more than one page. It turns out that Opera 10’s implementation of @font-face is a little buggy. When you feed it a page with an embedded font, you may not see the embedded fonts properly, like in the screenshot below:

Opera sometimes doesn't load the font at all, and removes other styling (click to enlarge).

According to Opera, this happens when “specifying different weights and styles for a single font-family name”. Håkon Wium Lie, the company’s Chief Technology Officer , has described a work-around until the company can fix the problem properly.

I am debating whether to implement the work around on my site, or to wait for Opera to fix the problem and patch all Opera 10 installations via auto-update (I’m leaning towards the latter).

Performance Issues With Font Embedding

One of the comments on the last article came from Steve Souders who had performance concerns with font-embedding. Paul Irish came back with information showing the when browsers load the fonts, and what they do before the font is loaded. He also shows how to use JavaScript to make the loading behaviour consistent between browsers.

The performance issues with font-embedding is something I am going to be keeping an eye on, especially when it comes to font-services, which the OpenType site believes will be the future of web font distribution for commercial fonts. Although it doesn’t seem like much of an issue currently (my blog seems to load quickly), I don’t want to do anything that would slow down my web applications – especially if I am using them just to make the text look a little prettier.

Windows XP Rendering Issues

Boing-Boing had a bad experience with font-embedding. Turns out they got a lot of complaints when they decided to incorporate it into their website. The reason: some users didn’t have ClearType turned on, and the font Boing-Boing chose looked “like ass” without ClearType.

Below are screenshots of this site without ClearType on:

Internet Explorer without ClearType

Firefox without ClearType

The article stated that there are quite a few XP computers which apparently don’t have ClearType on by default. I wonder if there are any stats to back that up. If so, then developers embed fonts into pages should test that scenario as well. It does look different.

@font-face in Depth

admin — Sun, 20 Sep 2009 04:04:13 +0000

Update (Oct 13, 2009):

Please see the follow up article which explores SVG fonts,
Opera 10 issues, and more

Photo by marta.b (Source: Flickr)

When I told one of my co-workers how excited I was that almost all the major browser vendors now supported font-embedding in their products, I got the same reaction from her that Bert from Sesame Street got when he told Ernie how exciting he thought bottle cap collecting was (yes, gratuitous ridicule was involved). Now, while I can somewhat understand her disinterest (she is not a front-end web developer, but a Java programmer), I defend my enthusiasm by stating here that fonts are a really important part of web design, and the fact that we can now theoretically choose any font to embed inside our web pages and applications is something to celebrate.

Sure, workarounds such as sIFR and Cufón have existed for quite a while now, but they have drawbacks (they both are best used only for headings, and Cufón doesn’t do well at allowing copying and pasting its content). If you really want to embed fonts in your webpages, I believe that @font-face is the safest, future-proof option.

Why care about fonts?

My Java developer colleague may not understand why fonts are important, but she is a regular reader of The New Yorker. Even though its website doesn’t use @font-face embedding (the standard New Yorker font is embedded in site using images), the developers of the site obviously know why fonts are important:

Fonts identify who the content belongs to. Just take a look at the content and without looking at the URL bar, you know exactly where you are – that font is highly integrated into that organization’s identity and branding. Replace the New Yorker font with Arial and it’ll look like any old website.
Fonts given an emotional association to the content. The content has an air of authority because of the font it uses (after all, it looks like it was written by The New Yorker). It is the reason why phishing sites use the fonts, colours and logos of the banks they are posing as.
Fonts can help (or hinder) the legability of content. Scanning the content, you can tell where the article titles are, where the navigation is, and what section each of the articles belong to. This is all because of the way fonts are used on the site.

The New Yorker's website is a great example of how to use fonts effectively on the web.

The New Yorker uses images in order to display fonts. Using font embedding effectively would save on bandwidth, since one font download could be used for all the headings on the page.

Font formats supported

Firefox 3.5+ , Safari 3.1+, Opera 10+ and Internet Explorer 4.0+ all support @font-face embedding (Google’s Chrome 3.0 beta does as well, but users will have to start it up in a special mode to make it work in the short term). They all support the use of TrueType (.ttf) and OpenType (.otf) fonts … except for Internet Explorer which only supports the proprietary Embedded Open Type (.eot) format. There aren’t as many fonts available in this format and the tool Microsoft gives out that converts .ttf fonts to .eot, called WEFT, is quite frustrating to use, and even crashes on Vista. There is, however, an excellent command-line tool, ttf2eot, that does a much better job. Both WEFT and ttf2eot only convert TrueType to Embedded Open Type – if you want to convert an OpenType font to Embedded Open Type, it is necessary to use FontForge, a free font-editing tool, to convert the font to TrueType first, and then use ttf2eot to convert the resultant font to .eot format. Although this method is roundabout and results in loss of detail due to the way the font formats store information, it is the only way I know to do this conversion.

For more detail on how to perform .eot font conversions using ttf2eot and FontForge, check out Edward O’Connor’s great article How to create EOT files without Microsoft WEFT

Where to get fonts you can legally use in web pages.

Although it is now technically possible to embed almost any font inside a web page, it is important to remember that if you use a commercial font for this purpose, you must have a license to do this. Since putting a font on a website will allow anyone on the Web to download it, a lot of font foundries currently do not allow their fonts to be used for web page embedding. It is for this reason that the browser vendors have been reluctant to implement this technology into their products until recently (font embedding is part of the CSS2 specification, which has been around since 1998).

Luckily, there are a few sites that are sprouting up that have done the initial work for you by listing fonts that allow font embedding on web pages legally. The ones that I have visited include:

Font Squirrel’s @font-face page, which include @font-face kits that include an .eot as well as an .otf or .ttf font. Each kit also includes a stylesheet which can be linked directly into your document so you can use the font with minimal coding.
Smashing Magazine’s has an excellent article, 40+ Excellent Freefonts For Professional Design
Kernest.com hosts a whole slew of fonts that can be used for font-embedding.
Webfonts.info has a page dedicated to fonts available for @font-face embedding.

Note that whenever you use any font, make sure you check the license that comes with it. Some fonts, even if their license allows for font embedding, may not allow you to use it for commercial purposes. Others may, but only for a fee. To be safe, check the documentation that comes with the font.

How to insert a font into your webpage

Once you have a font that you’d like to insert into your webpage, you first have to declare it inside your CSS stylesheet:

@font-face {
	font-family: 'Droid Sans';

        /* for IE */
	src: url('/shared/fonts/DroidSans/DroidSans.eot');

        /*
         * for non-IE: first see if the font exists locally on the browser's
         * computer.  If so, use that copy of the font.  Otherwise, load it
         * from the server
         */
	src: local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

It is very important to note here that order counts. There are variations of this CSS syntax, but I have settled on this syntax for the reasons described in Paul Irish’s article Bulletproof @font-face syntax.

After you declare the font, you can use it inside any of your selectors as you would use any other font:

body {
     font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

Note that it is still necessary to use alternative fonts – this is so that user agents that don’t support @font-face will still show an appropriate, similar looking font.

Some font families are contained in not just one file. For example, Droid Sand has a bold variant that is stored in a separate TrueType file (the .eot file used by Internet Explorer in the above example contains both the regular and bold variants). The bold variant of Droid Sans can be declared correctly in your stylesheet like this:

@font-face {
	font-family: 'Droid Sans';
	src: url('/shared/fonts/DroidSans/DroidSans.eot');
	src: local('Droid Sans'),
	     local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

/* Bold declaration only for non-IE browsers */
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans Bold'),
	     local('Droid Sans-Bold'),
	     url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

Browser Differences

To effectively illustrate how differently browsers render embedded fonts, let’s compare them side by side:

	Safari 3 Windows	Firefox 3.5 Windows	Explorer 6 Windows
Title of this blog post
Close-up of the title of this blog post
Subheading from this blog post
Close-up of subheading of this blog post
Close-up of main text of this blog post

As you may see, there are some slight differences in the way that fonts are rendered in the various browsers:

Fonts displayed on Safari for Windows (and all browsers on the Mac) in my opinion look the nicest: they are nicely smoothed out and the text is quite easily read at smaller sizes. This is due to the way Apple products render fonts. Apple has always differed in philosophy with Microsoft on how to render fonts, and this difference is quite obvious when testing pages under the Windows operating system.
I have found that Internet Explorer does a poor job when displaying fonts converted from OpenType — the glyphs tend to be more jagged and some elements tend to be rendered thinner than they should be. GrauBlau Web, the font used in the headings of this page, is a converted OpenType font, and you can see this effect in the close-ups above. It does not occur in the main body of the text because Droid Sans is a TrueType font. There seems to be two reasons for this:
1. There was information loss when converting GrauBlau Web from OpenType to TrueType.
2. In Explorer, ClearType renders this font using subpixel anti-aliasing quite more severely than Safari, while other Windows browsers use vanilla anti-aliasing to get the job done. A friend of mine pointed this out, and he said that it’s because ClearType renders TrueType (and, it seems, Embedded Open Type) fonts with subpixel anti-aliasing, but OpenType for some reason isn’t. I don’t know the reasons why, but in this example it looks like it is true – if you look at all of the Explorer closeups,you’ll see the coloured pixels on the edge of all the glyphs, while in Firefox only Droid Sans (which is a TrueType font) has them.
Firefox only allows you to embed fonts that come from the same server, unless some special headers appear in the HTTP server response. Also, unlike the other browsers, Firefox users first see the page without the embedded font until the font is loaded completely, at which time the fonts suddenly appear on the page. While it can be argued that this is a good thing (the user can read the content immediately without having to rely on the special font), this may not what a web designer would consider desirable.

There are a few more differences, which are better outlined at the Web Fonts Wiki, which seems to keep its information up-to-date.

How to choose which fonts to use

Not having gone to design school, I cannot claim to be an authority on this subject, but I think it is safe to say that when choosing the fonts that you are going to use, it should be in sync with the mood and message you want readers to experience. Chuck Green’s article, Type palettes, goes into more depth on this subject, and Michael Martin of Smashing Magazine has a great article about Typographic Design Patterns and Best Practices. Although both of these articles don’t go into font-embedding specifically, they are still relevant reading.

It took me a long time to decide on the fonts I have used here on my blog. When designing the layout, I was going for two things:

I wanted the body text to be easy to read
I wanted the feeling of the whole blog to be friendly and not look like an academic paper

In the end I decided to use:

GrauBlau Web for the headers because it is narrow (which allows more text on a line), easy on the eyes, and since it is used on headers, the user notices it right away and thinks “Hey, this looks different!”.
Droid Sans for the main text because it was designed to be easy to read even on low resolutions and, in combination with GrauBlau Web, gave the site a nice, pleasant and friendly look.
Droid Sans Mono for the code listings since it was designed to compliment Droid Sans, and, I believe, looks a jillion times better than Courier (which everyone up to now has been forced to use due to a lack of nice looking monospace fonts installed on most computers today).

Again, I didn’t go to design school, but I think for the type of site this is (a blog about web technology), it suits its purpose rather well. I was tempted to choose more ornate fonts, but I didn’t think they suited the content.

Optimizing Font Files

Sometimes you may find that the font files are a little larger than you’d like. If you open up the font file in FontForge, you may find that a lot of the glyphs inside are not necessary for what you are doing (for example, if your pages are all in English, you might not want all the accented characters that the font contains). Use FontForge to delete the glyphs you don’t need and regenerate the font – you’ll see that you save quite a few kilobytes, especially in a Unicode font with lots of Japanese and Russian characters included.

Again, because of licensing issues, please ensure that the font license allows you to edit the font in this manner.

Conclusion

What is written here is just the tip of the iceberg. In the next few years, I expect to be reading several articles on the best way to use embedded fonts, from technical, usability, internationalization and design perspectives. Unfortunately, I also expect to see a lot of MySpace pages looking uglier than ever. Imagine! Now, teenagers around the world can have animated backgrounds, Black Eyed Peas songs playing on load, and have that crazy typewriter font on the main copy.

My God, what have we done ….

http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding

Optimizing PNG Files, for both Web and Print.

admin — Wed, 16 Sep 2009 04:06:30 +0000

The script included in this post can shrink your images down for easy handling.

Optimizing images is not only important for web applications, it is also important for reducing the size of print documents (e.g. Word Documents, PDFs, etc). This size is important not only when emailing them out, but also when embedding them into documents that you will be sharing with others.

PNGs should be used for drawn images and screenshots (for photographs, it is better to use the JPEG file format). It uses a lossless compression algorithm, so what you save in your graphics editor is exactly what your users will see. It also supports features like alpha channeling.

This article will show how to optimize images in this format.

A case study: Optimizing Screenshots

There are many times a web developer will need to produce screenshots of the work they do to send to clients. When I need to do this, I use the excellent Screengrab Firefox Addon, since it is so easy to use. I will first talk about how to take screenshots using this tool, and in the next section, talk about how to optimize the PNG files they produce. (Note: If you need to take screenshots using Internet Explorer, I would suggest using The GIMP’s screenshot feature to do this. There is a great simple tutorial on how to do screenshots with the GIMP at the The Networked Writing Environment at the University of Florida website).

Using Screengrab

After you install this tool, all you have to do is right click the document you want to take a screenshot of and you will get the following menu.

Right-click any web page
to produce a screen capture of any page.

How to reduce image data size

I created a script that would reduce this file size as much as possible. How does this script work:

It first uses ImageMagick to reduce the amount of colour-palette inside the image to 256, since Screengrab will usually create 16-bit images (which have millions of colours). This usually results in 25% reduction of the size of the image and the extra colours aren’t missed when these images are inside a Word Document because the physical dimensions of these images are smaller than the actual page itself.
It then uses two command line tools, optipng and advpng, to compress the image further. It uses these programs in a variety of ways to see which is the most optimal, and saves the smallest result. This usually results to a further 30-40% reduction is data size.

Together, it is possible to reduce an image to 50-70% of it’s original size. Not bad for a script done in my spare time.

An archive with this script and supporting files is available here. This archive includes:

reduceColours: the script that reduces the images to 256 colours.
compressPng: the script that optimizes the PNG image
optimizeImagesForPrint: the script that executes reduceColours and compressPng in one step.
optipng.exe and advpng.exe, the actual file compressors used by compressPng.

Note that in order to use this script under Windows, you must have Cygwin installed on your machine. If you don’t know how to do this, read Installing Cygwin. Make sure you install ImageMagick using the Cygwin installer, since is needed for the reduceColours script.

If you run Mac OS X, Linux, FreeBSD or any other UNIX variant, you should be able to run this script as long as you are comfortable with the command line. Note that you will have to download optipng and advpng separately, since the archive only contains the Windows binaries of these programs.

To run the optimizer, use the following syntax inside a bash shell:

optimizeImagesForPrint

It will create a directory called optimized that will contain all the optimized images. If you just want to reduce the images to 256 colours, or optimize 16-bit images without reducing the colours, use reduceColours and compressPng in the same manner.

Conclusions

Even though this article has focused on embedding PNG images into documents, the ideas here can be used when optimizing PNGs for the web. There may be cases where you don’t want to reduce the amount of colours — feel free to change the script to do that.

Please let me know if you find any bugs or if you find other/better ways to optimize images.

The scripts are available here in a handy zip archive.

User Agent Man

Cross Browser CSS Transforms – even in IE

cssSandpaper to the Rescue

Browser Differences

Using cssSandpaper

-sand-transform

Description

Syntax

Examples

-sand-box-shadow

Description

Syntax

Examples

-sand-gradient

Description

Syntax

Examples

Other Known Issues

Future Work

Acknowledgments

Downloads

Cross Browser HTML5 Drag and Drop

Update (Feb 3, 2009):

Advantages Over Existing Drag and Drop Implementations

The Basics of Drag and Drop, Step by Step

Step 1: Defining a Draggable Object

Test #1: A Simple Draggable Object

Test #1: A Simple Draggable Object (with visual cues added to Explorer and Chrome)

Step 2: Setting Events on the Draggable Object

Example #2: a draggable object with events attached

Step 3: Setting Events on the Target Object

Example #3: a dragable object with a drop target

Step 4: Passing Data Between the Draggable and Target Objects

Test 4: setData() and getData()

Step 5: Drag and Drop Effects

A More Complex Example

Step 1: Defining a Draggable Objects

Step 2: Setting Events on the Draggable Objects

Step 3: Setting Events on the Target Objects

Steps 4 and 5

Drag and Drop Between Frames

Cross-Browser Issues I Have Seen

Conclusion

Download

My Favourite Third Party JavaScript Libraries

Object Oriented Timeouts

Calendar Widget

Querystring Parsing and Ajax Form Data Submission

Logging

Ajax History and Bookmarking

Fixing IE

sprintf()

Introducing: The Type Rendering Project

How to Detect Font-Smoothing Using JavaScript

Interested in making web typography look better?

Internet Explorer Does Something Easily (For a Change)

Canvas to the Rescue

Example #1: JavaScript Font Smoothing Detection

Example #2: CSS Font Smoothing Detection

Download

Testing Caveats

Twitter Security Issue Affects My Twitter Account.

Configuring JavaScript Applications With XML

Long Strings in JavaScript

Hard-Coding Values into Scripts

Enter config.js to the Rescue

Use config.js in All Your Scripts

config.js can also handle HTML

Framework Independent

More Information

Download

More @font-face fun

SVG fonts for Opera and Chrome

Opera’s buggy implementation

Performance Issues With Font Embedding

Windows XP Rendering Issues

@font-face in Depth

Update (Oct 13, 2009):

Why care about fonts?

Font formats supported

Test 4: `setData()` and `getData()`