Optical centre

# Things to try

• Choose Geometric and look at the play button. Its triangle is centred by the box, exactly, and still looks pushed to the left. Choose Optical and watch it move.
• Drag the chevron until it looks centred to you, then turn on Construction. The readout tells you how far your eye is from the centroid.
• Focus the Sort pill’s caret and press Home, then End, a few times. A move of just over a pixel is the whole correction, and you can still see it.

# How it works

Layout engines centre a glyph by its bounding box: the box’s midpoint goes on the button’s midpoint. For symmetric shapes that is all you need. A play triangle is not symmetric left to right. Its area piles up along the flat side, so a box-centred triangle looks shifted left.

The optical rule tested here centres the area instead. Find the centroid, the point the shape would balance on, and put that on the midpoint. For a polygon the shoelace formula gives it straight from the vertices. A right-pointing triangle’s centroid sits a third of the way in from its flat side and its box centre sits halfway, so the correction is a sixth of its width. This triangle is 30 px wide, so the shift is 5.0 px.

The chevron is the outline of a 2.5 px stroke with a mitred tip, as a vector tool would produce. Its arms are close to parallelograms, which balance at their own centres, so the centroid barely moves: about 0.4 px. If it still looks off to you, your eye is weighing the open side, and the centroid has nothing more to say.

The caret corrects vertically. Pointing down, its weight sits at the top. It is 7 px tall, so it moves down 1.2 px. The label beside it needs no help, because Recursive’s capitals sit exactly in the middle of its line box.

# Keyboard

Key	Action
Tab	Move to the next glyph, then the mode control and the nudge buttons
Arrow keys	Nudge the focused glyph by 1 px
Shift with an arrow key	Nudge it by 10 px
Home	Centre it by its box
End	Centre it by its centroid