Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3: will selection.style('font-size') always return a value in px?

The docs just say that selection.style returns the "current computed value".

I tried specifying an element's font-size in css using rems, and style('font-size') seems to return the corresponding size in px (e.g. '10.2px').

Is this a behaviour I can rely on across browsers and no matter what units the font-size is specified in in css?

like image 440
Coquelicot Avatar asked Oct 28 '25 12:10

Coquelicot


1 Answers

For answering your question, let's have a look at selection.style source code:

export default function(name, value, priority) {
    var node;
    return arguments.length > 1
      ? this.each((value == null
            ? styleRemove : typeof value === "function"
            ? styleFunction
            : styleConstant)(name, value, priority == null ? "" : priority))
      : defaultView(node = this.node())
          .getComputedStyle(node, null)
          .getPropertyValue(name);
}

As you can see, it indeed uses getComputedStyle.

Reading the MDN documentation about getComputedStyle, we can read that:

The values returned by getComputedStyle are known as resolved values. These are usually the same as the CSS 2.1 computed values, but for some older properties like width, height or padding, they are instead the used values.

Then, jumping to the documentation about computed values, we can read that:

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values. (emphases mine)

Therefore, since getComputedStyle is supported (basic) by Chrome, Edge, Firefox, Internet Explorer, Opera and Safari, we can say that the answer to your question ("Is this a behaviour I can rely on across browsers?") seems to be yes.

like image 184
Gerardo Furtado Avatar answered Oct 30 '25 01:10

Gerardo Furtado