Fcitx 5 Theme

From Fcitx
Revision as of 07:53, 18 January 2022 by Weng Xuetian (talk | contribs) (Created page with "This page is intended to explain the theme configuration file used by Classic User interface. = Input Window...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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

Horizontal layout
Aux Up and Preedit
Aux Down Candidate Items 1 .. N
Vertical layout
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.

Background images
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.