Character Reference Variables


Often you will want to use a symbol in your skin design, perhaps for a media player like ▶︎ or ⏸︎, a language character like ඌ︎ or 乫︎, or other UI elements like ↻︎ or ☑︎ or even just a degree symbol like °︎.

You can use an Image meter with a .png of the image you want, however that can mean an extra meter in your skin code, and another file that you need to include when you distribute your skin. In addition, changing the color or size of the image can be problematic. An alternative is to use Unicode characters in a String meter.

While you can simply copy and paste a Unicode character into your skin code, there are some issues with that:

  • You must be sure to encode your skin .ini file as UTF-16 Little Endian.
  • While the font you are using for your skin may support the character(s), the font in your text editor may not. This can make it hard to work on your skin.
  • The majority of the 65,536 Unicode characters and symbols below (U+FFFE), the Basic Multilingual Plane, are well supported in popular fonts you will use. Characters above (U+FFFE) are not as well supported by fonts and not supported at all in Rainmeter. That is where an "icon" font like FontAwesome comes in, more on that in a bit.

Using Character Variables in Rainmeter

The syntax for creating a plain-text reference to a Unicode text or symbol character is:

  • [\x2622] : hexadecimal Unicode value. Allowed range is x0-xFFFE.
  • [\9762] : decimal Unicode value. Allowed range is 0-65536.
  • In this example, either variant will produce the ☢︎ character.

Example: Text=Caution, radioactivity [\x2622] ahead!

These are font characters like any other, and can be modified with FontSize, FontColor and other effects.

Character Reference Variables use the nested variables syntax of a [ followed by some variable identifier, \ in this case, and a value followed by an ending ]. This means they can be nested with other variables and section variables using this syntax.

Examples: Text=[\[&MeasureName]] or Text=[\[#VariableName]]

Finding those Unicode values

There are two general ways to find characters and symbols to use in your skins:

Standard Unicode characters in the Basic Multilingual Plane as defined by the Unicode Consortium. One good reference to these can be found at Unicode Character Table. Simply select a desired character, and for example with our ☢︎ above, it will display both the Unicode (U+2622) and HTML (☢) values for the character. It is up to you whether you want to use hex or decimal, although hex may be more common outside of HTML. Then use those numeric values in the syntax described above.

Most quality fonts, certainly most of the popular ones that are included with Windows, as well as ones available from Google Fonts and other resources, will support the majority of these characters. There should be no need to install or use any special font, other than what is visually pleasing for your skin design.

An "icon" font. Again, since the use of characters outside the Basic Multilingual Plane, above xFFFE, is not supported by many fonts, and not at all by Rainmeter, it may be useful to look at using a specialized "icon" font, which will map many new, unusual, and popular symbols into the allowed range. They often also have unique images that can be of use in your skins.

While there are a lot of these types of fonts available, here are a few popular examples:

Again, select a desired character to obtain either the Unicode or HTML character values. Use those numeric values with the syntax above in Rainmeter.

The difference is that using these fonts will require that you place the font .ttf or .otf file in the @Resources\Fonts folder in the root config of your skin, and use the family name of the font with the FontFace option in a String meter to display them.

Example

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

; These should work with any decent font
; https://unicode-table.com/en/
; https://en.wikipedia.org/wiki/Unicode

; These require that the appropriate font be in @Resources\Fonts
; They are all there in this skin if you want / need them
; https://fontawesome.com/cheatsheet/
; https://fonts.google.com/icons?icon.set=Material+Icons
; https://github.com/google/material-design-icons/tree/master/font
; https://icofont.com/

; Note that Rainmeter (and most fonts) only supports characters below [\65534] or [\xfffe]
; This is the Basic Multilingual Plane in Unicode
; https://en.wikipedia.org/wiki/Plane_(Unicode)#Basic_Multilingual_Plane

[Variables]
; One way to keep track of what's what is to use Variables to name characters you use
fa-Raindrop=[\xf043]
u-Degree=[\x00B0]

[MeterChars]
Meter=String
; Use any font you like for text and most Unicode characters
;FontFace=Fira Sans
FontSize=20
FontWeight=500
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
; Use the font family name for fonts that have specialized characters
; Note that | means "or" in InlinePattern
InlineSetting=Face | FontAwesome
InlinePattern=[\xf0e7]|#fa-Raindrop#|[\xf241]|[\x26C6]|[\xf0a9]
InlineSetting2=Color | 242,216,162,255
InlinePattern2=[\xf0e7]
InlineSetting3=Color | 162,204,242,255
InlinePattern3=[\xf043]
InlineSetting4=Color | 242,104,104,255
InlinePattern4=[\xf0a9]
Text=Hello [\x27BD] [\xf0e7] #fa-Raindrop# [\xf241] [\xf0a9] #u-Degree# World