Centre the back-to-top arrow in its button - #353
Merged
Conversation
The button is a fixed 36px box. With .btn's 2px border and .back-to-top's
5px/11px padding, the content box was 22px tall and 10px wide -- while the
glyph is 18px carrying a 27px line box inherited from .btn-sm. Neither axis
could centre: the line box overflowed vertically, and an 18px glyph cannot
centre in a 10px content box.
Measured on the rendered button, glyph ink relative to the button centre:
before dx +2.75px dy -1.88px
after dx -0.12px dy +0.12px
Centred with flex instead of padding + line-height arithmetic, so it no longer
depends on the glyph's metrics matching the box. letter-spacing is also reset:
.btn adds 1px after every character including the last, which offsets any
centred single glyph by half that.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The up arrow in
<a class="btn btn-sm fade-half back-to-top inner-link">sat off-centre.Cause
The button is a fixed 36px box. After
.btn's 2px border and.back-to-top's5px 11pxpadding the content box is 22px tall and 10px wide — but the glyph is 18px, carrying a 27px line box inherited from.btn-sm.Neither axis could centre: the line box overflows vertically, and an 18px glyph cannot centre inside a 10px content box.
Glyph ink measured relative to the button centre:
Fix
Centred with flex rather than padding + line-height arithmetic, so it no longer depends on the glyph's metrics happening to match the box.
letter-spacingis reset too —.btnadds 1px after every character including the last, which offsets any centred single glyph by half that, and was part of the horizontal error..screen-reader-textwas checked and ruled out: it isposition: absolute, so it never participated in the line box.