For the very few who haven’t heard it by now: Apple announced their new Macbook last week. It has been praised and it has been made fun of. What’s really interesting for developers is the new built-in Force Touch Trackpad. Because of its four sensors, it is pressure-sensitive.

Apple has built-in default behavior for a deep click (or a Force Click, as they call it) in applications on their operation system. For example, when you Force Click a word in Safari, it opens the Wikipedia page on that word. A cool feature, but it would be much more interesting if we could use the possibilities of the new trackpad to change the way users interact with our applications and websites.

One of the most popular examples of using pressure of an input device is "Pressure-sensitive drawing", where the size of a brush changes with the amount of pressure. But that’s just the beginning. The new Macbook lets you control the level of fast forwarding of a video with the amount of pressure you put on the trackpad. I think we can all see the potential in this for interaction and creativity.

Detect different pressure levels in the browser

I was wondering if pressure levels on mouse events are supported in current browsers. The first place I usually go to when I want to know if some feature exists, is the W3C specification. After a few minutes, I found out that there was nothing about pressure or click force in the W3C Specification for Mouse Events. Bummer.

Next stop: MDN. More luck this time: I found a non-standard property called pressure in the Mouse Event API. It says:

MouseEvent.mozPressure – The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).

This property has been available since Firefox 4.0, released in March 2011. However, this property is not available for mice, only for devices like drawing tablets and trackpads. So unfortunately, this property is useless on the new Macbook, even if you’re using a Gecko-based browser.

Even though the property is not even in the current W3C specification or in one of its drafts, I think this pressure property would be a great fit for Apple’s new trackpad. I would be really surprised if Webkit and Blink don’t implement this within a few years.

Introducing new shorthand events

Although introducing the pressure property in more browsers and making it work with the new trackpad would give you great power and flexibility, it might also be a good idea to create some shorthand events:

element.addEventListener('mousedowndeep', function() {
    // User pressed hard
  });

  element.addEventListener('mousedownlight', function() {
    // User pressed subtly
  });
  

Of course we could do exactly the same thing with onmousemove. Apple calls the deeper click a Force Click, so me may want to have forceclick event as well.

Even if vendors don’t choose to add these, we could easily build a naive implementation using custom elements. That could look something like this:

var elementWithPressureEvents = Object.create(HTMLElement.prototype);
  elementWithPressureEvents.createdCallback = function() {
    this.addEventListener('mousedown', function(event) {
    event.preventDefault();
      var mousePressureEvent = event;
      if(e.pressure > .75) {
        mousePressureEvent = new Event('mousedowndeep');
      } else if(e.pressure < .25) {
        mousePressureEvent = new Event('mousedownlight');
      }
      elem.dispatchEvent(mousePressureEvent);
    });
  };

  document.registerElement('with-ressure-mousedown-events', {
    prototype: elementWithPressureEvents
  });
  

In your HTML you could use this:

<div id="with-pressure-mousedown-events">your element</div>
  

What about pressure with Touch Events?

Just as having the pressure level on a Mouse Event would be great, having the same data available for Touch Events offers great possibilities as well. Fortunately, this is already possible. According to the Touch Events W3C Specficication, there is a property called force available in the Touch object interface. This property holds the amount of pressure being applied to the surface by the user, as a float between 0.0 (no pressure) and 1.0 (maximum pressure).

Using this property is already very common. Let’s look at a simple example where we loop through all touch points and read the force value.

document.body.addEventListener('touchstart', function(e){
      var touchlist = e.touches
      // loop through all touch points currently in contact with surface
      for (var touchIndex=0; touchIndex<touchlist.length; touchIndex++){
        var currentTouchPressure = touchlist[i].force;
          //do something with the currentTouchPressure
      }
  }, false)
  

MDN notes that the availability of values is hardware-dependent. For example, if the device doesn’t have a way to detect the amount of pressure placed on the surface, the force value will always be 1.

Conclusion

The new Macbook will be available to the audience very soon, and so will the new trackpad. Unfortunately there is no way to exploit this in the browser right now. Although all suggestions in this post are purely hypothetical, I can’t imagine browser vendors won’t start implementing support for multiple pressure levels. At this point, it’s just nothing but a speculation game. Even though Apple patented the Force Touch Trackpad, more and more hardware manufacturers are likely to implement similar features. Definitely something I’m looking forward to!