Inaccurate positioning of y axis tick texts for larger font sizes

While using c3js in a project, people demanded larger font sizes for axis tick texts. I've noticed that changing the font size via CSS is causing the y axis tick texts to be vertically out of position relative to the actual ticks. The tick texts are not vertically centred at the ticks any more. Here is an example for 20pt to make the problem obvious:


From my point of view the chart should look like this:


Here a corresponding jsfiddle showing the problem for 16pt http://jsfiddle.net/900k/ej4ujx81/1/

I think I've found the two reasons for this problem.

Firstly, in function `tspanDy(d, i)` a fixed value is used to centre the tick texts vertically, but this value is not accurate for every font size. Replacing the fixed value with the dynamically calculated quarter of the height of a char results in a more accurate positioning:

Current `dy = -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - 3);`
Better `dy = -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - sizeFor1Char.h / 4);`

Secondly, the function `textFormatted(d)` is used by function `getSizeFor1Char(tick)` to detect the height and the width of tick texts. But the detection fails if tick "text" is a number, because numbers don't have a length property.

``` javascript
[...]
var box = this.getBoundingClientRect(),
text = textFormatted(d),
h = box.height,
w = text ? (box.width / text.length) : undefined;
if (h && w) {
size.h = h;
size.w = w;
}
[...]
```

To solve this issue I've ensured that `textFormatted(d)` will return a string in any case. I could contribute my changes and test case adjustments, if you want.

Tested with `0.4.11-rc4`.