Guidelines for Setting Text Styles in AutoHotkey GUI (Graphical User Interface) Controls—You Can Make Your GUI Windows Easier to Read by Changing the Text Font and/or Color of Individual Controls

While AutoHotkey doesn’t offer the same detail control of color, font, and text style that you get in graphics programs, you can enhance your GUI pop-up windows with well-placed style changes. But to get the most from your adjustments, you need to understand how AutoHotkey executes these modifications.

AutoHotkey offers limited control over colors and fonts in the standard controls used in Graphical User Interface (GUI) windows. The Gui, Font command provides the primary method for implementing any such adjustments. In most cases, you will need to issue the Gui, Font command to make any modifications to text styles in GUI controls. But first, (and to save you a little time), we must understand the limitations of AutoHotkey GUI control style changes:

1. As mention above, the Gui, Font command sets the default style which every control matches as its added to the GUI window. Changing the default style affects every subsequently created GUI control while leaving previously placed controls untouched.
2. When you make a style change to a GUI control, it affects the entire control and all of its contents. You cannot selectively alter fonts and/or colors within the control. For example, while you can change the font for an entire DropDownList GUI control, you cannot separately target individual items within the list for unique styling.
3. Although font alterations work for most of the GUI controls, a few controls (e.g. Button, DropDownList GUI, etc.) do not accept color changes for the text inside the control.

Lack of understanding of how the controls work causes many people to struggle with how AutoHotkey handles GUI control font and color changes. With the limited possibilities available, they find many desired alterations within GUI windows impossible to implement without extraordinary gymnastics—if achievable at all. (Determined to do more with your GUIs? The EitherMouse script offers an excellent example of how various GUI techniques can produce a dynamic display. While a bit complex, the script uses numerous graphic images added via the Gui, Add, Picture command.)

AutoHotkey Techniques for Changing GUI Control Fonts and Colors

Within AutoHotkey, you have a few built-in methods for enhancing the look and feel of your GUI windows. AutoHotkey includes four basic techniques for implementing these types of changes:

1. Reset the default GUI style using the Gui, Font command prior to adding specific GUI controls. (Treat this step as a “best practice” since this technique automatically sizes controls and the GUI window to fit the current default style.)
2. While adding controls to a new GUI include the text color option (e.g. cGreen or c008000) in the Gui, Add control command to override the default color.
3. After loading the GUI window, change (or toggle) GUI control text fonts and/or colors in an active GUI window using the GuiControl command.
4. Change default background colors for the entire GUI window and all of its controls using the Gui, Color command. This command works at any time—regardless of its location in the script.

You should consider implementing these color/font features in the order shown above. Once you grasp how each commands works, you can optimize their use. The following image of the Instant Hotstring GUI demonstrates the first three techniques:

These commands for formatting your GUI windows work best when implemented systematically: 1) Set and reset the default control text styles while AutoHotkey builds the initial GUI window; 2) Include the cColor option in a specific control’s options to override the default color for that one control; 3) In later subroutines, change or toggle fonts and colors on-the-fly for specific controls; 4) Set or reset the background colors for the GUI window.

(Find the code for the above GUI window at the end of this blog. You can find all of the current code in context in the InstantHotstring.ahk script.)

The Gui, Font Default Style Command

The major advantage to using the AutoHotkey Gui, Font command while creating your GUI window comes in the form of automatic formatting (control and window sizing and positioning) as AutoHotkey adds each control. The entire GUI window and each control will resize itself to accommodate the default text font and style.
Keep in mind two basic rules when using the Gui, Font command:

1. The style and color of every GUI control added to the pop-up after issuing a Gui, Font command uses that same formatting within each new control. (It does not affect previously added controls.) Only another Gui, Font command changes the default style.
2. A new Gui, Font command only changes the default values for those new parameters included in the command. All other styles match the last value set for that particular parameter. In other words, you only need to include the new style changes. All others remain the same.

You should use the Gui, Font command as your number one method for setting up GUI pop-up styles, but you must make these change while AutoHotkey adds the controls to the GUI. Since the Gui, Font command affects every control which follows it, every time you want to change styles, you must reissue the command at the proper place in your GUI setup. For example, I originally used the following style as the default:

Gui, Hotstring:Font, cBlack, Arial

However, I decided to change the first font size, color, and style for the first control:

Gui, Hotstring:Font, s14 cBlue Bold

Since I use this setup for the first Text control, I can (and should) combine the two into one starting command:

Gui, Hotstring:Font, s14 cBlue Bold, Arial
Gui, Hotstring:Add, Text, Section vText1 , Enter Hotstring

This command affects every additional control inserted until I decide to make a change—which I do for the very next Edit control:

Gui, Hotstring:Font, s12 cBlack Norm
Gui, Hotstring:Add, Edit, w50 vNewString ys,

Notice that I changed the size (s14 to s12), color (blue to black) and style (bold to normal), but, since the font name does not change, I did not need to include the font name (Arial).

Note: While virtually all GUI controls respond to the font name, size, and style, a few, such as the Button GUI control and DropDownList GUI control, do not change color. You can determine these capabilities by testing. Most people get around this limitation by using images or other roundabout techniques to tailor buttons. For me, I can live with plain vanilla buttons.

This approach to changing the default control style using the Gui, Font command works well during the building of a GUI window. Each control (and the entire window) adjusts to accommodate the default style. However, after the creation of the GUI, adjusting the control and window style gets more complicated. Therefore, you should do as much formatting as possible during this initial phase of the GUI set up.

When building your GUI window, you have one option (e.g. cGreen) for overriding the text color for a GUI control without using the default Gui, Font command.

Add Color Directly to a Control Using the C Option

AutoHotkey offers one GUI control option which overrides the default color. Use the option (e.g. cGreen) in the Gui, Add command line to change text color in a GUI control without affecting any of the subsequent controls:

Gui, Hotstring:Add, Edit, xm r4 w400 cGreen

The cGreen command line option turns all text typed in the Hotstring Test Pad green. No Gui, Font command required! However, the cColor option has the same limitation as stated above and does not work for Button, DropDownList, and probably a couple of other GUI controls.

Change Control Fonts and Colors in Real-time

Fortunately, AutoHotkey includes a command for changing fonts, styles, and colors for individual controls in an existing GUI window. You can use the GuiControl, Font command to alter the look of text on-the-fly. With this technique, I can change the text of any of the Hotstring Options red when clicking the CheckBox control—and back again when unchecking the box.

However, this command does not stand on its own. It only sets the default style implemented by the last Gui, Font command. You must first reset the desired default style before applying it to a specific control. That means in most cases you need two lines of code to execute the change (as shown in the online AutoHotkey documentation):

Gui, Font, s18 cRed Bold, Verdana
GuiControl, Font, MyEdit

The first line sets the default style for the GUI window. The second line applies that style to a specific control. To change a control style you must first change the default style using the Gui, Font command.

Note: The online documentation shows Options as a third parameter for the GuiControl, Font command:

GuiControl, Font, ControlID, Options

However, when loading the script, if you attempt to add any Options, you get an error (“Parmeter #3 must be blank in this case.”). I don’t know if this is a mistake in the documentation or I’ve missed something. In any case, don’t attempt to add any Options.

The following function demonstrates how to toggle the colors of the CheckBox controls in the InstantHotstring.ahk script:

CheckBoxColor(State,Button)
{
  If (State = 1)
    Gui, Hotstring:Font, cRed Norm
  Else 
    Gui, Hotstring:Font, cBlack Norm
  GuiControl, Hotstring:Font, %Button%
}

For the GUI CheckBox control, a value of 1 equates to Checked and 0 to Unchecked. When Checked, the function sets the default Gui, Font to red and normal style. When Unchecked, the function sets the default Gui, Font to black and normal style. Then, the GuiControl, Font command sets the control (%Button%) to the newly enacted style.

To use the CheckBoxColor() function, AutoHotkey must determine the clicked CheckBox and its state—Checked (1) or Unchecked (0).

The following code included in the gLabel for each CheckBox control identifies the control and its state:

GuiControlGet, OutputVar1, Focus           ; IDs control clicked
GuiControlGet, OutputVar2, , %OutputVar1%  ; Determines state
CheckBoxColor(OutputVar2,OutputVar1)       ; Sets the text color

The first GuiControlGet command identifies the clicked CheckBox (OutputVar1). The second GuiControlGet command captures the value (OutputVar2) of the control (1 for Checked and 0 for Unchecked). Pass those two value to the CheckBoxColor() function to set the color of the control text accordingly.

Prevent Accidental Changes by Disabling Controls

The above routine caused a problem when loading Hotstrings from a file. Since the Load Hotstrings button maintained initial focus when first loading file Hotstrings, the loading routine triggered the style change for that button. Although color has no effect on a Button control, the bold text on the button did switch to normal.

AutoHotkey cannot make style changes on disabled buttons. Therefore, temporarily disabling the Load Hotstrings button stopped the inconvenient style change:

GuiControl, Disable, Button12
.
.  [Hotstring loading routine]
.
GuiControl, Enable, Button12

Note: While the idea of using the ready-made tools in the script to load Hotstrings from a file seemed to make sense (and worked) at the time, the script starts to turn into a bit of kludge—replete with exceptions and traps to accommodate the speed problems (“AutoHotkey Script Speed Problems (Scripting Insights)“) and other unintended consequences. In fact, the addition of toggling colors for the CheckBox controls added to the speed problem while loading Hotstrings from a file. It’s time to do a major rewrite of the LoadHotstrings subroutine, rather than clutter up the original code—which works so well when creating individual instant Hotstrings.

This highlights an important philosophical point in AutoHotkey scripting which I plan to address in a future blog—”When should you rewrite your script?”.

Change GUI and Control Color

The Gui, Color command alters the background colors of the GUI window and its controls. That’s all! On the plus side, anytime you use the command, it immediately changes the colors—regardless of where it appears in the script. Use either form of the color:

Gui, Hotstring:Color, Red, Green

or

Gui, Hotstring:Color, FF0000, 008000

GUI Window Setup Code

The following shows the code for the initial setup of the InstantHotstring.ahk script:

Gui, Hotstring:Font, cBlack, Arial
Gui, Hotstring:Font, s14 cBlue Bold
Gui, Hotstring:Add, Text, Section vText1 , Enter Hotstring
Gui, Hotstring:Font, s12 cBlack Norm
Gui, Hotstring:Add, Edit, w50 vNewString ys,
Gui, Hotstring:Font, s14 cBlue Bold
Gui, Hotstring:Add, Text, xs vText2, Enter Replacement Text
Gui, Hotstring:Font, s12 cBlack Norm
Gui, Hotstring:Add, Edit, w400 vTextInsert xs, 
Gui, Hotstring:Add, DropDownList
     , w400 vStringCombo xs gViewString Sort AltSubmit,

; The GroupBox control merely describes the enclosed controls
; and makes it easy to relocate the entire group of controls

Gui, Hotstring:Font, s14 cBlue Bold
Gui, Hotstring:Add, GroupBox, section w400 h110, Hotstring Options
Gui, Hotstring:Font, s12 cBlack Norm
Gui, Hotstring:Add, CheckBox, vCaseSensitive gCapsCheck xp+15 ys+25
     , Case Sensitive (C)
Gui, Hotstring:Add, CheckBox, vNoBackspace gCapsCheck xp+210 yp+0
     , No Backspace (B0)
Gui, Hotstring:Add, CheckBox, vImmediate gCapsCheck xp-210 yp+20
     , Immediate Execute (*)
Gui, Hotstring:Add, CheckBox, vInsideWord gCapsCheck xp+210 yp+0
     , Inside Word (?)
Gui, Hotstring:Add, CheckBox, vNoEndChar gCapsCheck xp-210 yp+20
     , No End Char (O)
Gui, Hotstring:Add, CheckBox, vRaw gCapsCheck xp+210 yp+0
     , Raw Text Mode (T)
Gui, Hotstring:Add, CheckBox, vExecute gCapsCheck xp-120 yp+20
     , Labels/Functions (X)

Gui, Hotstring:Font, Bold
Gui, Hotstring:Add, Button, gAddHotstring section xm, Set Hotstring
Gui, Hotstring:Add, Button, gToggleString vDisable ys
     , Toggle Hotstring On/Off

Gui, Hotstring:Font, s14 cBlue Bold
Gui, Hotstring:Add, Text, xm vText3, Hotstring Test Pad
Gui, Hotstring:Font, s12 Norm
Gui, Hotstring:Add, Edit, xm r4 w400 cGreen,
Gui, Hotstring:Font, Bold
Gui, Hotstring:Add, Button, gSaveHotstrings section xm, Save Hotstrings
Gui, Hotstring:Add, Button, gLoadHotstrings ys, Load Hotstrings

Gui, Hotstring:Add, Button, gReload ys, Start Clean

You can find all of the current code in context in the InstantHotstring.ahk script.

Click the Follow button at the top of the sidebar on the right of this page for e-mail notification of new blogs. (If you’re reading this on a tablet or your phone, then you must scroll all the way to the end of the blog—pass any comments—to find the Follow button.)

This post was proofread by Grammarly
(Any other mistakes are all mine.)

(Full disclosure: If you sign up for a free Grammarly account, I get 20¢. I use the spelling/grammar checking service all the time, but, then again, I write a lot more than most people. I recommend Grammarly because it works and it’s free.)