Support CSS font size keywords

[mhsmith]

Since #2029, font sizes are now consistently measured in CSS points, which makes the default sizes quite similar on all backends:

• Android: 10.5pt (14dp)
• Cocoa: 9.75pt (13 "Apple points")
• GTK: 10 or 11pt
• iOS 12.75pt (17 "Apple points")
• Windows: 9pt

But we can't make them identical, because we’re following each platform’s own UI guidelines. This makes it difficult to use the font_size style, e.g. a Toga widget with font_size=11 will appear larger than the default on WinForms but smaller than the default on iOS (see examples/font_size).

I think the best solution to this is to support the CSS font size keywords small, medium, large, etc.

[kiljoy001]

How can I get started on implementing this issue?

[freakboy3742]

There's two pieces of work required.

The first is a modification to the Pack definition (core/src/toga/style/pack) to change FONT_SIZE_CHOICES to allow the new keywords for various font sizes. Using the CSS size definitions would be a good start; it might be advisable to add those constants to the underlying Travertino library, rather than Toga.

Next, the font definition on each platform needs to be modified to allow for these keywords when specifying font sizes. Again, you can follow CSS here; whatever "normal" font size is on each platform, each bump up/down should be about 20% larger/smaller. This will vary on each platform; on Cocoa, "normal" is 12pt; but on Android, "normal" is widget-specific, and specified in sp (14sp on button, for example).

You don't need to implement it on every platform, but it needs to not be explosive on every platform - so at the very least you'll need to add warnings on all platforms to flag that named font sizes will be ignored.

[freakboy3742]

I've added the required constants in beeware/travertino#43. We're overdue for a travertino release; once those constants are in place, I'll cut a release.

[mhsmith]

This will vary on each platform; on Cocoa, "normal" is 12pt; but on Android, "normal" is widget-specific, and specified in sp (14sp on button, for example).

On Android, the only widget we've encountered so far with a different default font size is the TextInput, which is larger than the others:

But I think it's better for "normal" to be the same across all widgets, and defined by whatever is the most common font size among the most common widgets. For example, a rename UI is sometimes implemented by replacing a Label with a TextInput, in which case you'd want to keep the font size the same to maintain visual continuity.

If you want to use the widget's own default font size as a baseline, that's what "larger" and "smaller" are for. These were also added in beeware/travertino#43, but they don't necessarily need to be implemented at the same time as the absolute keywords. (This was incorrect: see #3242 (comment).)

If possible, I'd suggest interpreting the keywords in the interface layer, and passing the computed size to the backend. That way, the only thing that needs to be done on each backend is declaring a single integer giving its default size.

[dkarvan8]

Hi, I want to work on this issue. Can you assign it to me?

[mhsmith]

We don't use the GitHub assignment feature – posting a comment is enough.

You've posted this comment on 5 issues today, but I recommend you only work on one at a time until you're more familiar with the project.

[sasoder]

Hi! I’m interested in working on this issue as part of a software engineering course. Is it still available? If so, I’d love to tackle it!

[mhsmith]

Yes, it's still available. Travertino is now part of the Toga repository, but apart from that I think the comments above are still valid.

[sasoder]

Cool, thanks for the heads up. I'll get started on it!

[Jacmol]

Hi, working on this with @sasoder and had a question about how you could go about implementing this on GTK? As I understand it when setting a system default font size, Pango won't apply a value until after the font is used on a widget, and until then it is 0. How would you then go about setting a value that is relative to the default size?

[mhsmith]

Implementing this feature would require some way of detecting the default font size on each platform. If that's completely infeasible on GTK, then I think it would be OK to hard-code the value, as we already do in the GTK Canvas.

[freakboy3742]

Two other approaches that might be worth exploring before committing to a hard-coded value:

• Assign a font size, determine how Pango has interpreted it, and then immediately change the font size to the "final" value. We need to be careful that we don't introduce "double render" artefacts if we take this approach, but if the call is done without releasing control to the event loop, it might work.

• GTK's underlying style system is ultimately CSS. I haven't explored if GTK supports any useful "font size" keywords, but if it does, it might be possible to plug that size directly into the CSS rendering by treating "smaller" as a "native representation" of font size.

[mhsmith]

Assign a font size, determine how Pango has interpreted it, and then immediately change the font size to the "final" value. We need to be careful that we don't introduce "double render" artefacts if we take this approach, but if the call is done without releasing control to the event loop, it might work.

And we should only need to do this once – after we know what the default font size is, we can cache it.