Fix glyph clipping at the bottom #33
Merged
Conversation
This file contains 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
ChrisLoer
approved these changes
Feb 23, 2021
| @@ -55,7 +55,7 @@ export default class TinySDF { | |||
|
|
|||
| // If the glyph overflows the canvas size, it will be clipped at the bottom/right | |||
| const glyphWidth = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxRight - actualBoundingBoxLeft)); | |||
| const glyphHeight = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxAscent + actualBoundingBoxDescent)); | |||
| const glyphHeight = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxAscent) + Math.ceil(actualBoundingBoxDescent)); | |||
There was a problem hiding this comment.
You mentioned that the same logic for glyphWidth "doesn't affect rendering": I think that's just because the fonts we're using typically have an actualBoundingBoxLeft that's slightly negative? So even if the resulting glyphWidth is one pixel too small, the glyph doesn't look clipped from the right because it's actually eating slightly into the buffer on the left.
Right now we're counting on that as a common property of fonts, since we hardwire the x drawing position to this.buffer, and hardwire the left metric to 0. If we're worried, it would be straightforward to hook it up to the actual metrics the way we do for height.
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Looks like the code that clips by bbox doesn't round the metrics values correctly, leading to glyph SDFs being clipped by 1px at the bottom. This is especially noticeable on lower font sizes. Example from the demo with 24px:
Before:
After:
The corresponding code for glyph width doesn't affect rendering so I left it as is. And the
offsetchange is just something that looked like a leftover unless I'm missing something.