Changing of fonts in windows installer dialog of LibreOffice

Windows installer dialog of LibreOffice had old Tahoma font, but modern OS Windows (7 and newer) uses Segoe UI font for all UI elements. There is a bug about changing windows installer font in our bugzilla.

Our installer uses Windows MSI like many other Windows softwares. For changing any parameters of MSI it can use Orca tool. You can download it here.

After installing of Orca right click to LibreOffice installer file and select context menu item "Edit with Orca". It opens a dialog:

Note: a link to MSI documentation - https://docs.microsoft.com/en-us/windows/desktop/Msi/windows-installer-portal.

In left side of the dialog it shows the list of tables. Every table has some data (text of messages, size of controls, type of controls, etc). MSI uses these data for showing of installer dialogs.

To change of only font in the dialog we need TextStyle table. Select it:

On picture above you see a data for the TextStyle table. In this case it's just list of fonts. There are columns:

TextStyle - internal name (ID) for font. It using in other tables inside MSI.

FaceName - real font name as it's in your OS Windows.

Size - font size.

Color - font color.

StyleBits - format mark for font: 1 for bold, 2 for italic.

Note: documentation for TextStyle table is here.

There are many different fonts in this table. But, in fact installer dialog windows use only three fonts from that list. I have checked it using Find dialog in the Orca tool.

Press shortcut Ctrl+F. It opens Find dialog. In a text field enter internal name of font and press Find button. Press F3 to find next occurence. You can see the dialog don't use, for example, any Arial fonts, because there are no that font name in any tables except TextStyle.

So, in fact we need only three type of font: Default, Default Bold and Heading.

I changed internal name of fonts and all another options and got follow view of TextStyle table:

Because I changed internal font's names my next step was to change it in need other tables:

- in the Property table in DefaultUIFont row in Value column type our new internal font name - DialogDefault

- the Control table and the RadioButton table both had links to fonts like {&Tahoma8} in start of text phrase. But after review of my patch I have knew that these tables have special ID instead

phrase. It have made for localization. I'll write about it some later.

In general it were all changings for adding new fonts in to installer dialogs.

But because Segoe UI font is bigger than Tahoma and because we used font size 9pt instead 8pt our text became out of special text area. It just crops by text areas border. All sizes of dialogs and text areas inside dialogs hard coded in the same MSI tables. Then we should change it too.

At first I checked view for all dialog windows using menu Tool->Dialog Preview. It opens follow window in Orca:

There are 31 dialog windows in the LibreOffice installer include some error and information messages. Select a dialog from the list (don't need to open sublevels) and push Preview button. Look at dialog preview. It created the preview using current values from MSI table. For close the preview just click out of preview or push Done button.

To show all text we should increase some text areas but text areas should fit inside dialog window. So we should increase size of dialog windows too.

I began from changing of size main dialog windows. It all had size 374x266 units (not pixels!).

Note: MSI uses for define of all sizes special installer unit. It equals 1/12 of MS Sans Serif 10pt size! It has made for scale of GUI opportunity in OS Windows.

Sizes of dialog windows are in the Dialog table in the Width and Height columns. For more easy next work I changed only width of main dialog windows, I increased it to 474 units.

Next step is size changing of the text areas and moving of controls inside dialog windows to new place because we increased width of the dialog windows. All values for it are in the Control table. We need next column in the table:

Dialog - an internal name of the dialog window

Control - an internal name of the control  

Type - a type of the control (image, text area, text field, button, checkbox, drop-down control or radiobutton)

Х - a distance from the left edge of the dialog window to the left edge of the control, in units

Y - a distance from the top edge of the dialog window to the top edge of the control, in units

Width - a width of the control, in units

Height - a height of the control, in units

Text - a label on the control. We'll look at this value to understand which control we are moving or changing.

I made follow:

- if I touched a button then I increased the X value by 100 units. (Button Help was an exception, because it is on the left part of the dialog window and shouldn't move anyway in our case). 

- if I touched other controls then I increased the Width value by 100 units.

After changing all values for one dialog window I looked at it using Preview function. If it was OK then I started change next.

In final I exported changed tables in to files using menu Tables->Export Tables. Select need tables in the list, select Output directory and push OK button.

There are the same tables with MSI options in the source code of LibreOffice. It's the most important thing. Now we can just change files with tables in the source code by our tables from Orca. Right? No!

Files in the source code almost the same, but it isn't the same as Orca shows! There are differences in file name, in inside structure. It's a link to all MSI tables in the source code of LibreOffice.

For minimize of changing in the source code my mentor Mike Kaganski asked me rework my first patch, special the file with Control table. It was difference in sorting of rows between source code file and my file.

And I changed else one file - Control.ulf (It's here) that we didn't touch in Orca. That file has all text strings from dialog windows with its ID. It's a part of localization mechanism for our windows installer.

And last problem was a banner. It's image from top part of the main dialog windows (the new dialog window is left):

Look at top image with 6 on the left window and compare it with the same on the right window.

We increased width of the dialog window and width of the image area, but we didn't change banner image! And our banner is stretchet now.

It's a link to banner in the source code. I downloaded it and changed it using the GIMP. Banner had width 499px (image uses pixels!) and I added width to 632px (just 499/374*474=632).

It's all. The patch was merged in to source code and you can look at new view of installer dialog windows yourself now.