Fcitx 5 Theme
This page is intended to explain the theme configuration file used by Classic User interface.
Input Window
Size calculation
The input window size is calculated from following values: Content Margin, Text Margin, and Text size itself.
You can think input window layout like following
| Aux Up and Preedit | |
| Aux Down | Candidate Items 1 .. N |
| Aux Up and Preedit | |
| Aux Down | |
| Candidate Item 1 | |
| ... | |
| Candidate Item N | |
Except Aux Up and preedit are considered as the same string, rest of items are considered as individual items. As for the size calculation and positioning, the size of a string is the bounding box of text plus text margin in the configuration. For example, if a piece of text is 20x14 px and the text margin are (left=2, top=3, right=2, bottom=3), the size of this text is 24x20 px.
All texts are placed side-by-side together, if you need spacing between texts, you may consider increase the value of text margin.
After placing all the texts, the input window size need to additionally consider content margins.
To demonstrate the content margin and text margin in the input window, the red margin is the content margin, and the green margins are the text margins.
Background images
Based on the positioning above, several background images are used to decorate the element in the input window. The background images are split into 9 parts, as shown in the table below.
| Top Left | Top | Top Right |
| Left | Center | Right |
| Bottom Left | Bottom | Bottom Right |
Background images will be resize to fit the required regions. For example, the input window is 200x100px, original size of the image file is 50x50px, and the background image margins are (left=5, top=10, right=5, bottom=10). Then mapping from image file to the painted background will be like this:
- Top left: (0,0+5x10) -> (0,0+5x10)
- Top: (5,0+40x10) -> (5,0+190x10)
- Top Right: (45,0+5x10) -> (195,0+5x10)
- Left: (0,10+5x30) -> (0,10+5x80)
- Center: (5,10+40x30) -> (5,10+190x80)
- Right: (45,10+5x30) -> (195,10+5x80)
- Bottom Left: (0,40+5x10) -> (0,90+5x10)
- Bottom: (5,40+40x10) -> (5,90+190x10)
- Bottom Right: (45,40+5x10) -> (195,90+5x10)
Basically, 4 corners are not resized, 4 edges are scaled in one direction, and the center is scaled in both direction.
As for highlight background, it follows the same rule like input window background. The highlight background will align its center size to match the text size (bounding rectangle of text, without the text margin).
Menu Window
This is only used by XEmbed tray icon. If you are using Status notifier based tray, you won't use any configuration from it.
The size calculation is similar to Input window.