2

In Adobe Illustrator there is the OpenType panel Alt+Shift+Ctrl+T which lets us set OpenType features for fonts that support them. For example with Montserrat I can set Figure: Tabular Oldstyle to have alternate glyphs for numbers that are kerned to line up in tables.

OpenType Figure options for Montserrat font version 5

Is there a way to get Tabular Oldstyle figures in the browser, in SVG? Is there a setting and if not could I create a subset font to use when I want to show Tabular Oldstyle figures?

5
  • Would converting the text to outlines work for you?
    – Billy Kerr
    Aug 19, 2022 at 8:33
  • @BillyKerr Well, in fact for my intended use case it would. It seems the answer is it's not possible to typeset with these features on the Web... but my use case is generating SVGs which I convert to PDFs for print.
    – Leeroy
    Sep 11, 2022 at 16:19
  • so, I suggest that is what you do. Open the SVG in vector software such as Illustrator or Inkscape, and convert to outlines for print, save as PDF. That should work.
    – Billy Kerr
    Sep 11, 2022 at 16:50
  • @BillyKerr Unfortunately that won't work, because as text is generated in browser and set as SVG it occupies a certain space. If I change it later in another software to activate Figure: Tabular Oldstyle it will overflow
    – Leeroy
    Sep 11, 2022 at 17:59
  • I though you meant it didin't work in the browser when you asked "Is there a way to get Tabular Oldstyle figures in the browser, in SVG?" - If you have the correct fonts installed, it should work in Illustrator or Inkscape. If the font is missing, you will get a font substitution. Perhaps that's the problem? Not sure if this can really be answered TBH. At least not without access to your computer and the SVG file.
    – Billy Kerr
    Sep 11, 2022 at 18:15

1 Answer 1

1

Is there a way to get Tabular Oldstyle figures in the browser, in SVG?

Yes!! You can set the font-variant property to tabular-nums, oldstyle-nums or both.

For example:

<svg width="200" height="200" viewBox="-20 -20 200 200" xmlns="http://www.w3.org/2000/svg">
  <text y="30" font-family="Montserrat, sans-serif" font-variant="oldstyle-nums">1234567890</text>
  <text y="60" font-family="Montserrat, sans-serif" font-variant="tabular-nums">1234567890</text>
  <text y="90" font-family="Montserrat, sans-serif" font-variant="oldstyle-nums tabular-nums">1234567890</text>
  <text y="120" font-family="Montserrat, sans-serif">1234567890</text>
</svg>

Renders like this:

Rendering showing the expected properties

See MDN for a full list of available settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.