Control alignment under different fonts in Substance 6.0

November 4th, 2009 | 6 Comments »

After taking a deep dive into the intricacies of aligning text components, comboboxes, spinners and buttons in the latest 6.0dev drops of Substance look-and-feel, it’s time to talk about supporting different font settings.

As with precise micro-design, Karsten has pioneered the Swing work on matching the desktop font settings in his JGoodies Looks collection of look-and-feels. Along with the native font rasterizer (at least on Windows Vista and its Segoe UI 12 font), this is by far the most important part in creating an application that is visually consistent with the user desktop. Personally, i think that one of the biggest mistakes in Java 6 was staying with Tahoma 11 as the default font for the native Windows look-and-feel, followed closely by an equally baffling font choice in Nimbus.

After the JGoodies font policy layer has been adopted in Substance, it was extended to provide font policies for Mac, KDE and Gnome desktops. When you run a Substance-powered application under one of these (or Windows), it will query the desktop font settings, and adopt them for all the controls and title panes. While this may cause a form designed for Windows XP (Tahoma 11) to have controls overflowing the form bounds on Gnome (DejaVu Sans 13), it is a small price to pay – in my personal view.

Given the wide choice of fonts that Substance must support, the micro-design layer in Substance needs cannot use hard-coded pixel values for control insets, margins, gaps and strokes. This functionality has been present for quite some time, and now is extended to support the new alignment requirements.

Here is a screenshot of the relevant controls under the different Tahoma font sizes:

https://substance.dev.java.net/release-info/6.0/tahoma-no-guiders.png

and the same controls with guider lines showing the alignment of perceived vertical bounds and text baselines:

https://substance.dev.java.net/release-info/6.0/tahoma-guiders.png

If you’re interested to see what Substance 6.0dev can bring to your application, take it for a spin. You can also click the button below to launch a WebStart demo – switch to the “Alignment” tab and see the control alignment in action:

Related posts:

  1. Control alignment in Substance 6.0 Last week i have written about improving the visuals of text components, comboboxes and spinners...
  2. Substance 5.1 – extended support for very large fonts Supporting wide variety of font sizes in modern UI toolkits is a necessity. Toolkits such...
  3. Substance 5.2 – extended support for very large fonts Supporting wide variety of font sizes in modern UI toolkits is a necessity, and previous...
  4. Matching desktop fonts and native font rasterization Three weeks ago the following RFE was filed in the bug tracker under Java2D team:...

6 Comments on “Control alignment under different fonts in Substance 6.0”

  1. 1 ebourg said at 10:25 am on November 5th, 2009:

    Is it possible to anti alias the text above a certain size ? That would probably look better for Tahoma 16-20.

  2. 2 Kirill Grouchnikov said at 8:13 pm on November 5th, 2009:

    This is an interesting suggestion. I’ve modified the code to do this, even if the current desktop settings do not enforce it. Not sure if this will remain in the final 6.0 release – i will think about this issue.

    Thanks
    Kirill

  3. 3 ranjith said at 7:33 am on November 6th, 2009:

    Hi I follow your blogs, and I really appreciate your efforts regarding control alignment. This was a nagging issue with Swing UI aesthetics. One suggestion is regarding command button appearance. – especially on dark themes – it does not differentiate well from a text box and that could be a little confusing to people who can not spot subtle differences on the screen.

  4. 4 Kirill Grouchnikov said at 8:26 am on November 6th, 2009:

    Ranjith

    If you’re talking specifically about Substance, it depends on the specific skin. Some skins have more gradient visibility on the buttons – for example Graphite Glass – than others. Applications that wish to enhance the difference between different control types can use Substance APIs to create a custom skin.

    Thanks
    Kirill

  5. 5 Adrian Stachowiak said at 6:51 am on November 19th, 2009:

    Hi Kirill,

    I was just playing with this new version of Substance and I found a few things.
    1. JCheckbox in the table is opaque when you press and hold left mouse button. This doesn’t look nice.
    2. Editor in the table (especially in the first column) is rendered in a way that top and left side of the editor covers the row highlight of the table and the highlight looks like it ends somewhere in the middle.
    3. In the table when you click using mouse on a JCheckbox to change the value and you don’t move the mouse the row highlight is not redrawn. You have to move mouse by 1 px to see the highlight again. This does not happen when you use space key to change the value.
    4. In the JComboBox at first they have no highlight when you open the popup, but once you move the mouse over the popup highlight appears. And when you close and reopen the popup highlight moves to the selected value. This is inconsistent. The highlight should always be on the selected value.
    5. There are some rendering artifacts when you use JScrollPane. They are visible when the component in the viewport is smaller than the size of the JScrollPane. E.g. you can extend the test application to be really wide and open the ‘Text fields’ tab. When you scroll up or down on the left side where the panel end some horizontal lines appear. This is in Java 1.6.0_03 and in Java 1.6.0_16.

    Best regards,
    Adrian Stachowiak

  6. 6 Kirill Grouchnikov said at 7:58 pm on November 20th, 2009:

    Hi Adrian

    Thanks for the detailed feedback. Issues 1, 4 and 5 should be addressed in the latest 6.0dev build. I cannot reproduce issue 3 – perhaps due to the fix for issue 1. Not sure about issue 2 – can we continue this discussion on the project forums / mailing lists so that you can attach a screenshot and circle the problematic areas?

    Kirill