Page MenuHome

UI: Font Symbol Updates
ClosedPublic

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.

Brecht Van Lommel (brecht) requested changes to this revision.EditedJan 28 2020, 4:10 PM

The shortcuts look a bit misaligned and fuzzy for me with this patch and the font files from D6055#143022.

Before
After

I'm not sure if there's something specific to my system or you see the same thing. This is with simple U.pixelsize = 1 and U.dpi_fac = 1.0.

Other than that, this looks good to me. It would be great to finally enable international fonts by default, with proper kerning.

It would have been more clear if the changes from glyph to text on Windows/Linux were in a separate patch, but they look fine to me.

This revision now requires changes to proceed.Jan 28 2020, 4:10 PM

@Brecht Van Lommel (brecht) - The shortcuts look a bit misaligned and fuzzy for me with this patch and the font files from D6055#143022.

I see a bit of that too, although my eyes are older so I might see more. LOL

In current master basically all these event icons have careful hard-coded placement since all these things are differ in size so much in the current fonts. With mine I try to do that much less to simply that code, but still failing a bit:

  • My increase in the size of the up arrow is making its line width too wide, looks like a pixel and half to me. I might take another look at that glyph
  • I'm not happy with changes to Tab character, will fix.
  • Horizontal alignment of single characters is worse in mine. Current is padding those, while I am "properly" (LOL) centering, and so probably made worse because of bearings. Will have a look.

Other than that, this looks good to me. It would be great to finally enable international fonts by default, with proper kerning.

Yes, that is a primary goal here. I would have just proposed font binary change without code changes but "Submit Code" requires a patch.

It would have been more clear if the changes from glyph to text on Windows/Linux were in a separate patch, but they look fine to me.

Yes, could have made this simply to evaluate but was using the code changes as a means to show off the glyph changes.

Some improvements to footer Event Icon centering.

The following captures shows the footer at 1X scale with auto line width. viewed as a Windows user. Top is current, bottom is after patch and with changed fonts:

I still plan on making some small changes to a couple glyphs in the font.

It looks good to me now.

Since these font files are relatively big, we should avoid changing them too often in git, as it makes the repository significantly bigger. So if there's a chance they might change again soon, we should wait a bit to commit them.

This revision is now accepted and ready to land.Jan 31 2020, 7:24 PM

@Brecht Van Lommel (brecht) - So if there's a chance they might change again soon, we should wait a bit to commit them.

Yes, I have very minor changes saved locally, but will wait until phab is running a bit better before updating here.

Basically just minor tweaks to the arrow used for Shift and to Tab.

But also some small changes to some glyphs that will probably never be used. But I don't want to keep making changes in there so thought it best to be complete just in case. The "Diamond" that is meant to be used for "Super" (again, doubtful we would use it) was in one mono font but not the other. And making the keyboard media keys match sizes with the rest - we already have support for those keyboard "play", "pause", etc buttons but doubt we would need symbols, but just in case they could be used.

Final version of these fonts. For almost all uses there should be no noticeable change, except:

  • Glyphs used for keyboard events are in all fonts, not a subset
  • Glyphs used for keyboard events are similar sizes and aligment
  • Ellipsis character is narrower
  • Switching between regular (smaller) and international versions should show no kerning changes

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

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

Minimum code changes needed is only to interface_icons_event.c as that file can be greatly simplified because of the symbols being found in all fonts and being consistent size and alignment. Without updating that code the footer icons would look a bit funny because of the current per-character adjustments that must be done.

Change to use of ellipsis character for continuation should be a separate commit.

Changes to wm_keymap.c should be a separate commit.

Updating this patch so that it does the bare-minimum that needs to be done for change of font binaries: only simplification of the "Event Icons" code. Simplification made possible since the symbols needed are in all fonts and are of similar size and alignment.

This revision was automatically updated to reflect the committed changes.