Problems with axes with custom font size + Discrepancies in font rendering across browsers

[m-gallesio]

Operating system: Microsoft Windows 10 Pro - 10.0.19045 Build 19045
Browser: Firefox 130.0.1 / Edge 129.0.2792.65

1. Custom font size in axis labels

We use custom CSS to slightly increase the font size used in charts. Of course the library is not designed for this, so this change can cause oddities when calculating the size and spacing of text elements. I noticed this in particular for axis labels, where some text can even end up truncated.

Firefox:

Edge:

After some digging through the code I found the logic which determines the font size at AxisRendererHelper.getSizeFor1Char:

billboard.js/src/ChartInternal/Axis/AxisRendererHelper.ts

Lines 37 to 63 in 9c668e6

	static getSizeFor1Char(node: d3Selection): {w: number, h: number} {
	// default size for one character
	const size = {
	w: 5.5,
	h: 11.5
	};
	const text = node.select("text");
	!text.empty() && text
	.text("0")
	.call((el: d3Selection) => {
	try {
	const {width, height} = el.node().getBBox();
	if (width && height) {
	size.w = width;
	size.h = height;
	}
	} finally {
	el.text("");
	}
	});
	this.getSizeFor1Char = () => size;
	return size;
	}

I assume the memoization at line 60 is meant to increase performance, but by removing it the issue gets fixed.

Firefox:

Edge:

Note the lack of truncation in the Edge version, as well as the increased line spacing in both browsers (and the fact that lines get overlapped in Firefox, but that's another issue).

I could not find a way to monkeypatch this method since it's in an internal class. Of course removing the line would cause a performance degradation which could be siginificant in more complex use cases.

2. Discrepancies in font rendering

Related to the above, I noticed Firefox renders fonts differently from Chromium which means labels often end up slightly larger and cause more line breaks.
Additionally, there seem to be some inconsistencies in the interpretation of padding.left + axis.x.tick.width (related to #3550).
This happens regardless of whether a custom font size is set.

Firefox:

Edge:

Source:
custom_font_size_demo.zip

Ideally the rendering of labels should be more consistent, but I acknowledge this could be outside the technical possibilities of this library.

[netil]

Hi @m-gallesio,

1. Custom font size in axis labels

As your examination, after evaluating each axes tick text dimension, will get memoized for performance issue.
But it doesn't iterate for all ticks to get the text dimension.

Probably providing an option to let user can control the way to evaluate text dimension will solve the issue.

2. Discrepancies in font rendering

Tested on below browser with the example you provided, and each browser evaluated differently the text dimension.
So, having some discrepancies among browsers is inevitable.

• Chrome v129.0.6668.90: w: 6.3046875, h: 12
• Safari v18.0.1: w: 5.5625, h: 11.515625
• Firefox v131: w: 8.300000190734863, h: 12