Search code examples
javascripthtmlcsshtml5-canvasfont-face

How can I specify font features when drawing to a HTML canvas?

The font I am using on my HTML page supports tabular figures, which is great for presenting rows of currency numbers nicely. They can be activated in CSS by using either:

.table {
  font-variant-numeric: tabular-nums;
}

or the more low-level way with:

.table {
  font-feature-settings: "tnum" on;
}

But how do I activate tabular figures when drawing on a JavaScript Canvas object using the CanvasRenderingContext2D.fillText() method? I tried putting the font-feature-settings line within the @font-face CSS block that defines the font to be loaded, but that did only affect the rendering within HTML, not the Canvas drawing.

Solution

  • I think it's just not supported, but would gladly be proven wrong.

    As a workaround, you could use measureText() to find the width of the widest digit, and render the digits individually one by one, using the widest digit's width as a step size.

    Or, if your design allows, you could choose a different font whose figures all have the same width to begin with. This is a fairly common default.