Skip to content

Conversation

@dusanradivojevic
Copy link
Contributor

@dusanradivojevic dusanradivojevic commented Sep 7, 2025

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.

image

Texts you see in the image above are having 'alphabetic' textBaseline.

  • Tests and/or benchmarks are included
  • Documentation is changed or added
  • Lint process passed (npm run lint)
  • Tests passed (npm run test)

Fixes #10791

- 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.
@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 7, 2025

pixi.js-basepixi.js-bunny-mark

npm i https://pkg.pr.new/pixijs/pixijs/pixi.js@11665

commit: 04f3fe0

@bigtimebuddy
Copy link
Member

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.
@dusanradivojevic
Copy link
Contributor Author

Hey @bigtimebuddy I added some visual tests. If you would like to see anything specific please explain it in more details. Thanks

Copy link
Member

@bigtimebuddy bigtimebuddy left a 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 👍

@Zyie
Copy link
Member

Zyie commented Sep 9, 2025

Hey @dusanradivojevic I think your bitmap-text-baseline-anchor snapshot is out of date (showing MXA, instead of MYA)

This is causing the tests to fail, can you regenerate the images please!

@dusanradivojevic
Copy link
Contributor Author

Hey @bigtimebuddy & @Zyie
Can you please review this PR and include it in the next release.
I updated all the snapshots and tests are passing when I run them locally, however they are failing in the pipeline on the cloud. Let me know if I'm doing anything wrong.
image

Thank you!

@Zyie
Copy link
Member

Zyie commented Oct 15, 2025

Hey @dusanradivojevic

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

@dusanradivojevic
Copy link
Contributor Author

Hey @Zyie, I am using Windows, yes. But, the same happened when my friend ran tests locally on my branch on his MacOS.

@Zyie
Copy link
Member

Zyie commented Oct 15, 2025

@dusanradivojevic I'm running your changes locally and the only test that seems to be legitimately broken is the bitmap-text-lineheight.scene.ts test

image

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,
});

@dusanradivojevic
Copy link
Contributor Author

Hey @Zyie thank you for the heads up. I updated the code and the snapshot, can you check again please? Thank you

@themmokhtar
Copy link

themmokhtar commented Nov 12, 2025

Any update on that pull request?

Currently I'm using the npm package provided above at https://pkg.pr.new/pixijs/pixijs/pixi.js@11665 instead of the mainline version because I need that bugfix. I can confirm the same test fails also on Linux.

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:

themmokhtar@themmokhtar ~/E/r/p/pixijs (improving-text-baseline-measurement)> npm run test:scene

> [email protected] test:scene
> npx jest --silent --testPathPattern=tests/visual

Determining test suites to run...ts-jest[versions] (WARN) Version 5.3.3 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=3.8.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 FAIL  tests/visual/visuals.test.ts
  ● Test suite failed to run

      ● Visual Tests › [webgpu-cache-as-texture-scene-ts.png] - "should render cache as texture correctly" (visual/scenes/container/cache-as-texture.scene.ts)

        expect(received).toBeLessThanOrEqual(expected)

        Expected: <= 100
        Received:    205

           96 |                 );
           97 |
        >  98 |                 expect(res).toBeLessThanOrEqual(pixelMatch);
              |                             ^
           99 |             });
          100 |         });
          101 |     });

      at Object.<anonymous> (tests/visual/visuals.test.ts:98:29)
        ● Visual Tests › [webgl1-cache-as-texture-scene-ts.png] - "should render cache as texture correctly" (visual/scenes/container/cache-as-texture.scene.ts)
          expect(received).toBeLessThanOrEqual(expected)
          Expected: <= 100
          Received:    205
             96 |                 );
             97 |
          >  98 |                 expect(res).toBeLessThanOrEqual(pixelMatch);
                |                             ^
             99 |             });
            100 |         });
            101 |     });
      at Object.<anonymous> (tests/visual/visuals.test.ts:98:29)
        ● Visual Tests › [webgl2-cache-as-texture-scene-ts.png] - "should render cache as texture correctly" (visual/scenes/container/cache-as-texture.scene.ts)
          expect(received).toBeLessThanOrEqual(expected)
          Expected: <= 100
          Received:    205
             96 |                 );
             97 |
          >  98 |                 expect(res).toBeLessThanOrEqual(pixelMatch);
                |                             ^
             99 |             });
            100 |         });
            101 |     });
      at Object.<anonymous> (tests/visual/visuals.test.ts:98:29)
        ● Visual Tests › [webgpu-display-status-visual-scene-ts.png] - "should demonstrate display status behavior visually" (visual/scenes/container/display-status-visual.scene.ts)
          expect(received).toBeLessThanOrEqual(expected)
          Expected: <= 100
          Received:    325
             96 |                 );
             97 |
          >  98 |                 expect(res).toBeLessThanOrEqual(pixelMatch);
                |                             ^
             99 |             });
            100 |         });
            101 |     });
            
            <CUT>
            
      at Object.<anonymous> (tests/visual/visuals.test.ts:98:29)
        ● Visual Tests › [webgl2-text-scene-ts.png] - "should render text correctly if style changes" (visual/scenes/text/text.scene.ts)
          expect(received).toBeLessThanOrEqual(expected)
          Expected: <= 100
          Received:    2029
             96 |                 );
             97 |
          >  98 |                 expect(res).toBeLessThanOrEqual(pixelMatch);
                |                             ^
             99 |             });
            100 |         });
            101 |     });
      at Object.<anonymous> (tests/visual/visuals.test.ts:98:29)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        27.949 s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: MSDF text baseline seems fully inaccurate.

4 participants