[OTVar] Fit text to the width of a textbox

Laurence Penney

I just put a demo on Axis-Praxis.org that explores fitting text to arbitary textboxes using the font’s wdth axis. The demo allows you to drag the corner handles of the textbox, while the font’s variable settings change in real time to make it fit.

http://www.axis-praxis.org/demo/1/resize-textbox

Release notes:
http://www.axis-praxis.org/blog/2016-11-24/10/demo-resize-textbox-with-variable-fonts

A variable browser, such as WebKit Nightly or Safari Technology Preview, is of course necessary.

Peiran Tan

I would like to see this someday get integrated into InDesign’s justification settings – glyph scaling.

Kent Lew

InDesign’s justification settings

I’ve been wondering this same thing — if Variable Fonts might in some way eventually allow InDesign to get closer to true HZ justification.

One challenge, under the hood, will be determining how to correlate a consistent user-facing scale for this purpose with whatever scale is present in any given variable font, since it will not be consistent.

Laurence Penney

HZ justification is certainly possible now thanks to the wdth axis. I think the scales can be normalized fairly easily in a UI, if the app runs tests on typical strings. Another challenge will be how to handle short blocks of text that seem to respond unpredictably because of the characters they contain. The ‘m’ has lots of freedom to expand, whereas the ‘i’ has almost none.

Hrant Հրանդ Փափազեան Papazian

Varying the width of individual glyphs is bad juju. For display, it's too obvious hence distracting; for text, justification is typically a false idol. If you must, vary just word-spaces.

Nick Shinn

I prefer to justify with only varying word spaces, but when push comes to shove a small amount of letter spacing and horizontal scaling can be useful, and is imperceptible. So if variable fonts produce non-faux scaling, so much the better.

In general, I support the “build it and they will come” philosophy—give typographers the tools to do all kinds of crazy inventive stuff and let them (and their clients and readers) figure out what works and what doesn’t. 

Peter Constable

Kent Lew said:

One challenge, under the hood, will be determining how to correlate a consistent user-facing scale for this purpose with whatever scale is present in any given variable font, since it will not be consistent.

Why do you think this would be a particular challenge? The 'wdth' scale is defined as % of "normal". A UI could allow the user to set a maximal amount of adjustment as %, either in absolute terms or relative to the currently-selected width. Wouldn't that work?

Thomas Phinney

Although width is a % of normal, that will definitely be an average and be glyph-dependent—meaning that one line of text will get a different degree of condensing than the next, when one adjusts a width axis to “75%.”

Why is this? Some glyphs (Ili1) usually have designs that simply do not allow for much change in the marking portion of their advance width, regardless of width axis setting. Others (fjrt) may allow only modest change, depending on design. Most will have a major shift. But this means that the degree of variation one gets for a given block of text when changing the width will vary, depending on the content of that text.

John Hudson

With respect to something like Hz justification, the 'wdth' axis may not be appropriate, as typical alterations in width also involve changes in stem weight. At least as described by Zapf, Hz glyph width adjustment kept stem weights constant. This suggests a different axis.

Kent Lew

The 'wdth' scale is defined as % of "normal".

Maybe I have misunderstood the mechanism of definition in a variable font. But wouldn’t the “% of normal” be relative to the range of the entire axis?

If I have a variable font that has a width axis that ranges from Extra Condensed through Normal to Extra Wide, isn’t a setting of 97% of normal going to yield a different degree of narrowing than it would for a font whose width axis only ranges from Condensed to Normal?

Wouldn’t there need to be some standard, absolute definition for the assignment of -1/1 width deltas in a variable font if we were counting on some degree of relative consistency in an HZ algorithm allowing ±3% width variation.

Obviously, a successful HZ setting needs to exercise only a very small (and indeed imperceptible) amount of width scaling when optimizing justification. Is it possible to have a width-scaling control behave with some measure of consistency across different variable fonts, when the range of a width axis can vary widely between them?

This is what I was thinking about with that comment of mine.

But as I say, perhaps I am misunderstanding something about the mechanism of variable fonts.

Thomas Phinney

Kent Lew said:

The 'wdth' scale is defined as % of "normal".

Maybe I have misunderstood the mechanism of definition in a variable font. But wouldn’t the “% of normal” be relative to the range of the entire axis?

I think you have misunderstood. Different fonts will have different ranges, and those ranges will be expressed in a way that is compatible and has meaning across fonts. Or at least that’s the intent of the spec. So, a font that only goes from "normal" to "super-expanded" might from from 100% to 220% Another font might go only from 80% to 100%, and a third might go from 60% to 100%.

Kent Lew

Okay, I guess I have misunderstood something.

I get that Normal is taken as 100% and variations are deltas from that point.

Suppose that I have a set of masters with Condensed and Normal poles. According to what common metric do I (or does the compiler) determine that my Condensed pole coincides with 60% or 70% or 80% of Normal?

Is it not the case that a variable font I set up as ranging from 60% to 100% width axis might encompass a a similar visual range to one that some other designer decides to set up as 80% to 100%?

Peter Constable

@Kent Lew: You as the font developer that the thing you call "Condensed" coincides with 60%.


In terms of real widths, the width of your normal may different from another's normal, and both of you may interpret "60% of normal" in slightly different ways (modulo Tom's comments about % strictly speaking being dependent on the content). But both of you should strive for % to reflect more or less what happens to the width of content. The key thing is that a layout implementation should be able to use relationship between two wdth values as a starting heuristic for how the actual width of content will change.