5 novembre 2013

Convert em with JavaScript

Sometimes we want to deal with rem/em values with JavaScript and convert them in pixels. In this article I will show you some commented code snippets.

Convert rem in pixels

With the following function, we are able to find the root element font-size. It means “what is the value of 1em in pixels in a root element context”, or simpler “what is the value of 1rem”.

function getRootElementFontSize() {
  // Returns a number
  return parseFloat(
    // of the computed font-size, so in px
    getComputedStyle(
      // for the root <html> element
      document.documentElement
    ).fontSize
  );
}

function convertRem(value) {
  return value * getRootElementFontSize();
}

// Examples
convertRem(2); // 32 (px)

Convert em in pixels

We can adapt the previous function to work with any DOM element. If no context is given, the function will use the root element.

function getElementFontSize(context) {
  // Returns a number
  return parseFloat(
    // of the computed font-size, so in px
    getComputedStyle(
      // for the given context
      context ||
        // or the root <html> element
        document.documentElement
    ).fontSize
  );
}

function convertRem(value) {
  return convertEm(value);
}

function convertEm(value, context) {
  return value * getElementFontSize(context);
}

// Examples
convertRem(2); // 32 (px)
var h1 = document.getElementsByTagName("h1")[0];
convertEm(2, h1); // 84 (px)

Detect the browser text zoom

We could also use the first function to identify the the browser text zoom. It will not be the user text zoom, because it depends on the browser settings. We can just determine what is the browser baseline compared with a size we expect, usually 16px. We also have to handle the case where the website has a font-size on the html element.

Disclaimer: This will only work on Firefox with the "View > Zoom > Zoom Text Only" option enabled. Chrome doesn't seem to have this option. I didn't try it on Internet Explorer.

function getElementFontSize(context) {
  // Same as previously
}

function getBrowserBaseline() {
  // Reset the font-size of the root element
  var html = document.documentElement;
  var style = html.getAttribute("style");
  html.setAttribute("style", style + ";font-size:1em !important");
  // Get the root font-size
  var baseline = getElementFontSize();
  // Recover the normal root font-size
  html.setAttribute("style", style);
  return baseline;
}

function getBrowserTextZoom(expectedBaseline) {
  // You can set an expected baseline
  // Otherwise we will use '16px'
  expectedBaseline = expectedBaseline || 16;
  return getBrowserBaseline() / expectedBaseline;
}

// Examples
getBrowserBaseline(); // 17.6 (px)
getBrowserTextZoom(); // 1.1

tl;dr

Here is a bookmarklet to get the Firefox browser text zoom:

TextZoomBookmarklet

Happy coding, Thomas.