Page MenuHome

UI: Font Symbol Updates
AcceptedPublic

Authored by Harley Acheson (harley) on Oct 13 2019, 9:55 PM.

Details

Summary

Blender uses four different fonts. Variable width and monospaced (for the text editor) in both a small and a larger international version.

Each of these font files contain a different subset of the keyboard symbols we are now using for menu shortcuts and in the footer. This patch is MOSTLY about updating these four font files so that they are consistent for all these symbols. And does so in a way that each symbol maintains a consistent size and alignment so that they all look like a unified set.

Additionally the beginning latin portion of the fonts are made to be consistent between the small and larger versions. That way you see no visible change in characters or spacing when turning on "Translations".

Also the "ellipsis" glyph is made narrower, so it is the same width as "two-dot leader" so that it can be properly used as continuation character.

Following are the four font files.

These two go into the ...\blender\release\datafiles folder:

And these two go into ...\blender\release\datafiles\fonts

Once those fonts are in place, this patch applied, and targets rebuilt there should be some changes visible:

Continuation character used ellipsis. As shown below the new width of this character means it takes up now more extras space. left is current, right is after this patch is applied:

Macs will finally see their desired "up arrow" to signify "Shift" in shortcuts. And there is possible use of Windows key, tab key, space symbol, etc

And the footer Event Icons get revamped a bit. interface_icons_event.c gets simplified a lot since all the symbols are now consistent sizes and alignment. So they all look much nicer. And while there I updated the text versions as well so that the text is always centered horizontally and vertically. And each on can be a different size if desired.

Diff Detail

Repository
rB Blender

Event Timeline

Here is a screenshot of the glyphs affected, either added to edited to each font. Shown here is the monospaced versions as show in text editor:

Should probably mention that part of the reason for making these fonts all consistent is to allow for the possibility of (one day) using only the international versions of them:

https://developer.blender.org/D3705

An example of some changes from this. The top of the following is how it is communicated that we can press "Alt" for Axis snap for all platforms. Obviously this symbol makes no sense outside of Mac. The middle is how the same thing is show to Windows users after patch is applied. Bottom is Mac after patch, with the symbol a little larger

Similarly, The top is here is a portion of the footer, as shown to all users. The "Caret" is used to indicate Ctrl. The 2nd row is after this patch is applied, for Windows users, showing "Ctrl" text, a nicer arrow. nicer "Tab" and larger "G". The bottom is after patch, for Mac. Most of the same changes but the "Ctrl" character better matches the keyboard symbol, so less like Caret.

Think this first needs UI/UX team review/validation, then actual code review should be pretty trivial…

This diff makes opinionated changes not mentioned in the description, would rather handle changes like that separately as it complicates review.

Home/End/Ctrl swap glyph's with text for example.


This commit makes heavier use of the font for fairly un-common characters, so users that set alternate interface fonts are more likely to have the shortcuts looking broken.

Wouldn't it be less error prone to add a separate font dedicated to symbols, then we don't need to worry about user fonts potentially missing characters.

@Campbell Barton (campbellbarton) - This diff makes opinionated changes not mentioned in the description, would rather handle changes like that separately as it complicates review.

Yes, agree in a way. I mostly did it this way because I couldn't "Submit Code" without a patch so made these other changes as a container for it. Although... since some of the glpyhs are altered (to be consistent size and alignment) the change of font only would show some apparent "errors" in the footer where those symbols are now used. So nice to deal with them both if possible.

But I should not have added the change to ellipsis. Was just excited to show that off as a feature of these changes.

Home/End/Ctrl swap glyph's with text for example.

Yes, it is quite important to that we use something different on Windows than current "option" symbol for ALT and the caret being shown for Control. Neither makes any sense outside of Mac.

This commit makes heavier use of the font for fairly un-common characters, so users that set alternate interface fonts are more likely to have the shortcuts looking broken.

To be fair, this commit doesn't make any greater use of uncommon characters. That started with they "event icons" used in the footer. The commit just makes it so that the glyphs used there exist in all four fonts. Right now some are take from one, others from another. Once those symbols are in all the fonts then the event icon code can be greatly simplified, which is what happens in this patch.

Wouldn't it be less error prone to add a separate font dedicated to symbols, then we don't need to worry about user fonts potentially missing characters.

Yes, for sure. My idea goes like this...

First we reconciled this symbols and other changes so that the international fonts can be seeemlessly substituted for the smaller fonts and remove some of the hacks needed now.

Then take on this: https://developer.blender.org/D3705 so we go to having just two fonts and can always show international characters.

Once that is done we can consider breaking out any special characters into a separate font (possibly with the lower latin set too) and those would act as fallback from the larger font that could be replaced by the user. That way the symbols we are relying on will always be there.

And then one day (maybe) add a third font to the stack that contains icons once FreeType supports OpenTypeSVG

William Reynish (billreynish) requested changes to this revision.Oct 30 2019, 9:52 AM

The ability to use more symbols is nice.

However, this patch enables the 'international' font by default. The problem with that is that kerning doesn't work in this case.

A few examples below. The top was before, below is after the patch:

Notice now the spacing between the T and the e is now worse because of missing kerning.

We should ensure that proper kerning keeps working. I am not sure if that is an issue with the font itself or how we read and display it.

This revision now requires changes to proceed.Oct 30 2019, 9:52 AM

@William Reynish (billreynish) However, this patch enables the 'international' font by default.

No, it does not. This patch makes no changes to which fonts are default.

The problem with that is that kerning doesn't work in this case.

No, I suspect you just got your testing backwards somehow.

The following 2-page GIF shows what it looks like NOW when you turn on "Translation". It is at that moment that the smaller "bfont.tttf" is swapped out for the larger international version "droidsans.ttf.gz". Because some of the glyphs vary a bit between these two fonts you see some width changes, mostly because some uppercase letters like T and F have bearing differences between the two fonts:

If you install my new fonts (and rebuilt targets) you will see that the differences in the lowest latin set have been removed and so there is no shifting as you switch from one font to the other:

@Harley Acheson (harley) The problem isn’t so much the shifting when the option is enabled or disabled. The problem is that the kerning is broken, as you can also see in your ‘after’ gif.

Look at the words ‘T ooltips’ and ‘T ext Rendering’ in your image.

Before, the kerning was broken only when Int fonts were enabled. Now kerning is broken always. It’s consistent, yes, but it is consistently bad, you might say.

@William Reynish (billreynish) - Before, the kerning was broken only when Int fonts were enabled. Now kerning is broken always. It’s consistent, yes, but it is consistently bad, you might say.

I will see if I can square that circle.

The difficulty is that the font that you describe as having "kerning broken" is the one that has kerning rules. But the one that you like better has none at all. I am, obviously, loath to remove kerning in order to get you the kerning you prefer. Will see if the rules can be adjusted in way that fixes this properly. Please stand by. LOL

Fixed a (long-standing) problem with the fonts. Now switching from regular font to international font, not only does it not jiggle at all, but also has the tight kerning.

Also played a bit with the code that uses symbols. Made it so Linux uses a few more symbols, since Campbell wanted that. And a little less symbols for Windows since LazyDodo wanted that. So for Alt, for example, Mac shows "option" symbol, Linux shows "Alt" symbol, and Windows shows "Alt"

As before you must put the following two fonts into the ...\blender\release\datafiles folder:

And these two go into ...\blender\release\datafiles\fonts

Re-tested. This time I was not able to detect any font issues.

As a bonus, this patch also fixes a long standing font issue which made it so you had to get bad kerning when translating the UI.

The symbols also are a nice thing to have in the UI menus and tooltips.

This revision is now accepted and ready to land.Nov 2 2019, 4:00 PM

Hey @Campbell Barton (campbellbarton) - Hoping you don't mind I've added you as reviewer here.

Just say so if you'd rather I simplify this to help review. Many of the changes here are just so that the changes to the fonts are visible in some way so that the improvement would be move obvious. The majority of the changes here are just simplification of "interface_icons_event" - made possible by having all fonts have all the keyboard symbols - so there is much more code removal than addition.

To better illustrate how these altered fonts (and simplified interface_icons_events code) affects the footer event icons:

The top row is how they currently look for all platforms, then below is after the changes. Second row how hit looks for Windows users, then Mac users, then Linux users:

Obviously the current state shows bad alignment, inconsistent sizing, characters overflowing bounds, and all platforms seeing that odd character for "alt"

Bottom rows showing nicer sizing and everything fits. And more sense on what is shown to each platform.

Slightly updated font files. Just small changes to return symbol (U+23CE) and space symbol (U+2423)

These two go into the ...\blender\release\datafiles folder:

And these two go into ...\blender\release\datafiles\fonts

Small changes to interface_icons_events. Mostly just to make the border radius change with user scale, and some small tweaks to text sizes.