In previous posts, we showed how to access a file through the input tag or through the Drag and Drop mechanism. In both cases, you can use XMLHttpRequest to upload the files and follow the upload progress.
XMLHttpRequest will send a given file to the server as a binary array, so you first need to read the content of the file as a binary string, using the File API. Because both Drag and Drop and the input tag allow you to handle multiple files at once, you’ll need to create as many requests as there are files.
var reader =new FileReader();
reader.onload=function(e){var bin = e.target.result;// bin is the binaryString};
reader.readAsBinaryString(file);
Once the file is read, send it to the server with XMLHttpRequest:
var xhr =new XMLHttpRequest();
xhr.open("POST","upload.php");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(bin);
You can choose to be notified when specific events, such as error, success, or abort, occur during the request (see the MDC documentation for more details).
Following the Upload Progress
The progress event provides the size of the uploaded portion of the binary content. This allows you to easily compute how much of the file has been uploaded.
Here’s an example showing the percentage of the file that has been uploaded so far:
xhr.upload.addEventListener("progress",function(e){if(e.lengthComputable){var percentage =Math.round((e.loaded*100)/ e.total);// do something},false);
In a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let your users drag and drop files directly into your web page, without going through the file picker.
To use drag and drop, you first need to tell the browser that a given element can handle dropped objects and will respond to a drop action, using the dragover and drop events.
You also need to prevent the browser’s default behavior, which is to simply load the dropped object in the browser window.
dropzone.addEventListener("dragover",function(event){
event.preventDefault();},true);
dropzone.addEventListener("drop",function(event){
event.preventDefault();// Ready to do something with the dropped object},true);
You may also want to use the dragenter and dragleave events to be notified when a drag session starts or stops.
Your element is now ready to receive files with the drop event.
Manipulating the Files
On the drop event, you can access the files with the files property of the DataTransfer object:
dropzone.addEventListener("drop",function(event){
event.preventDefault();// Ready to do something with the dropped objectvar allTheFiles = event.dataTransfer.files;
alert("You've just dropped "+ allTheFiles.length+" files");},true);
Once you’ve accessed the files, the File API lets you do much more, like parsing files as a binary array, or displaying a preview of an image by reading the file as a DataURL.
Of course, you can still drag and drop data other than files (e.g. text, URLs, remote images …) using the drag and drop API.
Paul Rouget has put together a great demo of the new FileAPI we’re including in Firefox 3.6. It lets you drag a JPG from the desktop into the browser that includes EXIF data and it can extract the GPS coordinates in the image and then load the location of where the photo was taken, entirely from JavaScript.
Vlad was nice enough to put together a video of his recent work to bring WebGL to mobile phones. This demo was done on the first phone that supports Firefox, the Nokia N900.
For more information about WebGL check back here or follow planet WebGL.
The pointer-events CSS property has long been available as part of SVG as a way to control if a mouse event should be sent to the element directly underneath the mouse or passed through to an element underneath it. In Firefox 3.6 we’ve extended the property to allow it to apply to normal HTML content as well.
For SVG you can set the pointer-events property to one of several values, but for HTML you can only set it to one of two values: auto or none.
.foo{
pointer-events:none;}
When pointer-events is set to none, pointer events are passed through the target element and are instead sent to the element that is underneath it.
.foo{
pointer-events:auto;}
When pointer-events is set to auto, pointer events are handled normally. That is, the element blocks the events from being passed down to a lower element.
Click the pointer-events: none checkbox under the image to see it change.
He’s replicated the tag list that’s on the front page of twitter.com. (Note: you have to not be logged in to see the tag list.) If you go and look at it on twitter you’ll notice that it fades off on the right hand side. This is done with a transparent, faded image that sits on top of the underlying box. The tags underneath are clickable links but the image blocks events from being sent to the ones underneath the fade.
What Paul has done is show how you can use the pointer-events property to allow you to click on the underlying links even with a fade on top of it.
A special thanks to Ryan Doherty for building this demo and making it easy for me to turn it into a tutorial.
In this demo we’ll walk through a simple use case for the new gradient capabilities coming in Firefox 3.6 (see related article). We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties. The button in question was developed for the next version of our Personas site.
Using a CSS-based method to generate buttons is a huge upgrade for web site developers. It means you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.
A button is just a rectangular space with a link in it. We can create that with a very simple chunk of HTML:
<aclass="linear"href="http://getpersonas.com"><span>Get Personas for Firefox</span><spanclass="info">It's free and installs in seconds</span></a>
This creates a paragraph element and sets a fixed width. The internal “button” is actually a simple <a> link that contains text.
Once we have the width set on the button we need to force the <a> to act like a block element so that the text inside will flow as part of a single element instead of showing up as two distinct parts:
display:block;
We want to choose some nicer fonts and a nicer style:
The syntax here is pretty simple. The “top” means that it starts at the top of the area and heads down to the bottom of the button. The rest of the syntax defines what are called “color stops.” These allow you define gradient transitions that actually transition across more than two colors. This is used in this case because the bevel effect requires a non-linear transition from one color to the next.
In the syntax above, it defines a starting color (0%), an bevel effect (2%), most of the transition (97%) and the border color to finish (100%.) This creates the effect where it’s very light at the top as if there was a light source moving to a darker color near the bottom.
IE Note:
A pithy note about our good friend, Internet Explorer. While older versions of Firefox and Safari both handle the background: -moz-linear-gradient gracefully by not affecting background rendering when they run into a property they don’t know how to handle, IE just shows a white background. One possible work around for this is to include a later background: property for IE in a separate style sheet that’s loaded once this style sheet is loaded. There are probably other ways of handling this, but it’s worth noting that this is an issue.
This demo is from our good friend Ryan Seddon who came up with a demo that seems deeply appropriate for this week, given our focus on the future of fonts on the web.
If you’ve ever been editing a page and wanted to know what a particular font looked like without having to upload files to a web server and update CSS (so tedious, that!) then this demo is for you.
He’s come up with a demo that shows what’s possible when you’ve got downloadable fonts, drag and drop and editable content. (If you want to know more about drag and drop we suggest you read his excellent overview of using drag and drop to do file uploading.)
Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after the initial visit. It allows you, in Firefox 3.6+, to drag and drop font files from your file system into the drop area. The browser will then create a data URL encoded copy to use in the page and render the content in the dropped font.
You can either read the full description, which contains a lot of useful technical information about how the demo works, or you can view the demo below. Either way, it’s nice to see the excellent HTML5 support in Firefox 3.6 coming together with everything else we’ve added to bring a lot of new capabilities to web developers and users.
Note: the discussion below applies to work in progress that might show up in Firefox 3.7. It does not describe features in Firefox 3.6.
This post is from Jonathan Kew and John Daggett. He’s supplied a 5 minute video that shows some of the features on the fly. If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.
Using @font-face allows web designers a wide palette of font choices and with commercial font vendors supporting the WOFF font format, the set of font choices should improve even more. So the next step is clearly to try and make better use of features available in these fonts.
For many years, “smart” font formats such as OpenType and AAT have provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag. But these have typically only been available to those using professional publishing applications such as Adobe InDesign. Firefox currently renders using font defaults; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.
Håkon Wium Lie of Opera, based on discussions with Tal Leming and Adam Twardoch, proposed extending the CSS ‘font-variant’ property to include values for font features. Mozilla is actively working on a new proposal along these lines. This is a fairly big addition to CSS, so it will most likely involve some complex discussions about how best to support these features.
Experimental Implementation
As part of this effort, Jonathan Kew has been working on porting a portion of the Pango library for use with handling complex scripts and to enable the use of font features on all supported platforms. He currently has an experimental build that uses a special CSS property to associate a list of OpenType features with specific elements in a page. This is not the proposed format, it simply provides a better way of discussing possible sets of font-variant properties and the OpenType feature settings to which they should map.
.altstyles{/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
-moz-font-feature-opentype:"dlig=1,ss01=1";}
The feature setting string above implies rendering with discretionary ligatures (dlig) and the first set of stylistic alternates (ss01). An example using Jack Usine’s MEgalopolis Extra:
This font makes extensive use of OpenType features; the homepage of the font contains a sample rendering that uses many of these features. Below is a rendering of the same sample written in HTML with OpenType features enabled:
Tabular Figures for Numerical Alignment
OpenType features also enable better control over alignment. When numbers are listed in tabular form, proportional forms often result in the misalignment of digits across rows, making the list harder to scan. With tabular alignment enabled, individual digits are rendered using a fixed width so that digits align across rows:
Automatic Fractions
Automatic fractions are also possible with OpenType features, note the inline use of fractional forms in the recipe ingredient list below:
Language Sensitivity
OpenType also includes support for features on a per-language basis. This is important for rendering text correctly in some languages. For example, Turkish uses both a dotted-i and a dotless-i, so the distinction needs to be preserved when rendering ligatures or small caps. Below is the same text in English and Turkish, with both default and language-sensitive renderings shown for the Turkish text:
Historical Text
The way text is rendered constantly evolves; glyphs once in common use often morph into other forms, making the historical forms distinct from their modern forms. Below is the text of an old Massachusetts Bay Colony law, taken from a book in the Daniel R. Coquillette Rare Book Room of the Boston College Law Library.
Original scanned image:
Below is the same text rendered in HTML using the Fell Types revival fonts by Igino Marini with OpenType features enabled. Note the ‘ct’ ligature and the contextual form of the ‘s’:
I was challenged at work to create something that “floats naturally”. After a while of confusion in my pursuit of “natural floating” or whatever, I came up with the idea that I needed a tool to investigate my confusion. This project is a result of my trying to build that tool.
It was initially built as a Flash/Flex application, which you can see here. Later on, however, I became interested in HTML5 and the Canvas tag and decided to port the application to JavaScript and HTML (with the help of jQuery, and also Processing.js, of course…). The transition went fairly well, and I ended up with a JS/HTML version of the application that I actually think is cooler than the original Flash version.
In the end, I came up with both something that “floats naturally” and also a serendipitous encounter with the simplicity of working with only HTML and JavaScript, which has been very rewarding.
A couple of months ago we featured a video that had some examples of multi-touch working in Firefox. At a recent event in South America, Marcio Galli put together a quick and fun drawing program based on the multi-touch code that we’ll have in a later release of Firefox. What’s really great is that he was able to put this together in just a couple of hours based on the web platform.
There are three main components to the touch support in Firefox:
1. Touch-based scrolling and panning for the browser. This allows you, as a user, to scroll web pages, select text, open menus, select buttons, etc. This is part of Firefox 3.6.
2. Implement a new CSS selector that will tell you if you’re on a touch-enabled device. This is -moz-system-metric(touch-enabled). You can use this in your CSS to adjust the size of UI elements to fit people’s fingers. This is part of Firefox 3.6.
3. Exposing multi-touch data to web pages. This takes the form of DOM events much like mouse events you can catch today. This isn’t part of Firefox 3.6, but is likely to be part of Firefox 3.7.
Although not all of this will be in our next release we thought it would be fun for people to see what will be possible with the release after 3.6.
