Design
Responsive Layout
Anchors, units and how the HUD follows every screen size.
Coordinates
Positions use Minecraft GUI pixels. A 1920 by 1080 window at automatic GUI scale is 480 by 270 GUI pixels.
Anchors
An element is attached to one of nine anchors. The anchor is both a point on the screen and the matching point on the element, so an element anchored bottom right with an offset of -8, -8 keeps an 8 pixel margin from that corner on every screen.
Units
Offsets and sizes are pixels or a percentage of the screen, or of the parent container. The unit button next to each field converts without moving the element.
Scale with screen size
Turn this on to scale an element with the screen relative to 480 by 270, between a minimum and a maximum.
Containers
Children are positioned inside their container. Row and column arrangement place children one after another with a gap; their own offsets are then ignored.
Every screen size
The resource pack includes a text shader that pins every element to its anchor on the player's actual screen. An element anchored to the bottom right stays the same distance from the bottom right corner at any resolution, aspect ratio, window size and GUI scale. Moving an element on the canvas selects the nearest anchor automatically; elements inside a container follow the container. Sizes are in GUI pixels, so they follow the player's GUI scale like the vanilla HUD. Percent values are resolved against the first target screen.
The pack replaces the client's rendertype_text vertex shader. Another pack or shader mod that replaces the same file conflicts with it. Colors are rounded to 16 levels per channel because the low bits carry the anchor.
Elements anchored to the top center are placed correctly for every player without any screen choice. Everything else is exact only when the player's selected screen matches their real one.
Safe zone
The safe zone overlay marks a 5 percent margin. Keeping important elements inside it avoids clipping on narrow screens.