Fix pixel-font text clipping and refine Trade Corner search#48
Open
fsegouin wants to merge 1 commit into
Open
Conversation
The bundled pixel font declared vertical metrics that did not match its glyph outlines, so capital letters overshot the top of every line-height:1 row and were clipped. Correct the font's ascent, descent and line gap so the ink sits inside the em box. Safari resolves ch against the already-zoomed font size under the CSS zoom property, which over-shifted card text and clipped it at 2x. Replace the zoomed card and Battle Tower metrics that used ch with their pixel values. Add clickable shiny, pokerus and gender chips to the search, hold the search field at a fixed height when a filter is applied, and drop pokecrystal-pages !important declarations that were not overriding anything.
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.
Summary
zoom+chinteraction).!importantfrompokecrystal-pages.css.Details
Font clipping. The
.ttfdeclared ascent 0.75em / descent 0.25em, but the glyph ink runs from 0.875em above the baseline to 0.125em below it, so everyline-height: 1row shaved the top pixel off capitals. The metrics are corrected in the font itself (hhea, OS/2 typo and win, withUSE_TYPO_METRICSset), so it renders correctly in every browser with no per-element CSS overrides.Safari 2x. Under the CSS
zoomproperty Safari resolveschagainst the already-zoomed font size, soch-based card widths and offsets over-scaled and pushed labels under the sprite. The zoomed card metrics and the Battle Tower list padding are converted fromchto pixels (this font is fixed-width, so1ch = 8px).Search UX. Shiny and pokerus render as an in-box
×glyph (blank when off); gender shows ♂/♀ and toggles on click. The search field is pinned to the height of a single-chip row, so adding a filter no longer resizes it.Cleanup. Stripping every
!importantand diffing computed styles across all four pixel-font pages (Trade Corner, Battle Tower, Rankings, Save Converter) showed that only card-internal font sizes actually depended on them; those are restored with two tightly-scoped rules. The!importantinside@mediablocks are left untouched.Testing
Checked in Chrome and Safari: card, table and search text render without clipping at 1x and 2x; the four pixel-font pages are pixel-identical (computed-style and font-histogram diffs) to before the
!importantremoval; the search field holds a fixed height when filters are added; and the shiny/pokerus/gender chips filter results correctly.