-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
fix: text baseline measurement for BitmapText so it renders accurately within its bounds #11665
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: dev
Are you sure you want to change the base?
fix: text baseline measurement for BitmapText so it renders accurately within its bounds #11665
Conversation
- Updated ascent and descent calculations in BitmapFont to use data from the font metrics. - Removed unnecessary offset calculations in BitmapText to align text rendering with the updated metrics. - Introduced baseline offset adjustments in BitmapTextPipe for improved text alignment.
|
pixi.js-base • pixi.js-bunny-mark commit: |
|
Could you create a visually test(s) for this? |
- Introduced multiple test scenes to validate the alignment of BitmapText baselines across different styles and configurations. - Added visual snapshots for baseline anchor, baseline lines, and comparison with Canvas text rendering. - Ensured comprehensive coverage of baseline variants to enhance text rendering accuracy.
|
Hey @bigtimebuddy I added some visual tests. If you would like to see anything specific please explain it in more details. Thanks |
bigtimebuddy
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for this thorough work. Awesome tests 👍
|
Hey @dusanradivojevic I think your This is causing the tests to fail, can you regenerate the images please! |
|
Hey @bigtimebuddy & @Zyie Thank you! |
|
Are you by chance using Windows? What i think has happened here is that our visual testing runs on MacOS and there seems to be minor differences in how these are being rendered on Windows/MacOS. I'll have to investigate how we can solve this |
|
Hey @Zyie, I am using Windows, yes. But, the same happened when my friend ran tests locally on my branch on his MacOS. |
|
@dusanradivojevic I'm running your changes locally and the only test that seems to be legitimately broken is the It seems that if you install a font with a line height and override it later, then the line height is combined instead of replaced e.g BitmapFont.install({
name: 'Custom',
style: {
fontFamily: 'Arial',
lineHeight: 10, // setting this to 0 makes the test pass
}
});
const bmpText = new BitmapText({
text: 'Test\nHello\nCustom',
style: {
fontFamily: 'Custom',
fontSize: 12,
lineHeight: 40,
fill: 'black',
},
x: 36,
y: 2,
}); |
|
Hey @Zyie thank you for the heads up. I updated the code and the snapshot, can you check again please? Thank you |
|
Any update on that pull request? Currently I'm using the Just checking if it has been fixed somewhere else and I'm missing something. Also if any help is needed to make it mainline I might chip in. Thanks! Fail: |
Description of change
BitmapText now renders properly within its bounds. This enables proper vertical centering of the text.
Additionally, textBaseline argument is now taken into consideration and influences text rendering.
Texts you see in the image above are having 'alphabetic' textBaseline.
npm run lint)npm run test)Fixes #10791