UI scaling

Scaling shrinks or expands the user interface. Instead of pixels, lengths measure in scaled units equal to 1/768 of the screen height multiplied by a ratio.

For measuring a point on the screen, this ratio is. For measuring widgets, this ratio is usually the UI Scale that is user-configurable in the System settings.

Functions like measure from the bottom-left corner (0, 0). The maximum visible Y coordinate is always 768, while the maximum visible X coordinate depends on aspect ratio:

Values outside these ranges represent an overflow beyond the screen edges.

resizes a Region, and also its children, children's children, and so on. If a child also has scale, the values multiply and the product is an effective scale. Lengths measured about a Region use region units per the following formula: region:GetEffectiveScale * screenHeight / 768

Region units apply to the following length measurements:

• - Distance from the left of the screen to the left of the Region.
• - Distance from the left of the screen to the right of the Region.
• - Distance from the bottom of the screen to the bottom of the Region.
• - Distance from the bottom of the screen to the top of the Region.
• - Distance from the left to right of the Region.
• - Distance from the bottom to top of the Region.
• - Combination of GetWidth and GetHeight.
• - Combination of GetLeft, GetBottom, GetWidth and GetHeight.

FrameXML has functions to compare regions independent of their effective scale:

• - Similar to GetRect but measuring with screen units.
• - Similar to GetRect, but measuring with any choice of effective scale.

Most user interface elements are parented by that covers the whole screen. Addons inserting widgets into the UI should consider making them children of UIParent (or within its heirarchy of children) to inherit a common scale.

The System window, within "Graphics", presents a checkbox and slider corresponding to console variables and. Disabling this option causes UIParent to adopt a default scale per the table below:

Conversely, enabling the option allows the user to set a custom scale. Finer-grained scaling is possible with the command to set each console variable.

Due to rounding and snapping to pixels, visual oddities can appear when a borders or overlaps another. To eliminate these visual glitches, one strategy is to set a custom UIScale ratio so that one unit equals one pixel.

For screens up to a height of 1200px, this is possible by setting CVar to equal where vRes is the vertical resolution. For example, on a 1920x1080:

/console useUiScale 1 /console uiScale 0.7111

For screens with a vertical resolution beyond 1200px, the formula would result in a uiScale less than 0.64 which the game will ignore. To workaround this, override the scale manually on UIParent after the game loads (or use an addon such as UIScale). For example, on a 2560x1440:

UIParent:SetScale(0.5333)

Setting a "pixel perfect" UI with a 1920x1080 resolution, using an AddOn:

Checking if the cursor is over a frame:

Checking if two frames overlap: