add `debugPaintTextLayoutBoxes` for debugging text layout #168876

LongCatIsLooong · 2025-05-14T23:47:05Z

Text vertical alignment is a common complaint and one of the most common causes is different type faces being used in the same paragraph (for instance, when there's English / Arabic in the same paragraph so the default font doesn't contain the required glyphs for some characters).

Hopefully this flag is going to make debugging alignment issues a bit easier, and in some github issues attaching screenshots with the flag on will be helpful for diagnosing the issue.

What the layout boxes look like

final testText =
    'Quick brown fox, نص, trailing spaces${" " * 100}'
    'new line at the end.\n\n\n\n';

Column([
              Text(testText, style: TextStyle(height: kTextHeightNone)),
              Text(testText, style: TextStyle(height: 1.0)),
              Text(
                testText,
                style: TextStyle(height: kTextHeightNone),
                strutStyle: StrutStyle(fontSize: 30),
              ),
])

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

…outBoxes

justinmc

LGTM 👍 Great idea!

loic-sharma

Good idea, nice work!

justinmc · 2025-05-20T22:12:02Z

@LongCatIsLooong Can this merge?

LongCatIsLooong · 2025-06-03T20:43:26Z

(I don't think the implementation is correct when strut is enabled but its height is not enforced, I'll come back to this).

…outBoxes

LongCatIsLooong · 2025-07-09T21:57:55Z

Sorry for the delay, I decided to remove the part that change the rects based on the strut style (it's not really a technical limitation, it's just that I don't know what indicator to paint for showing the strut height). Changed the documentation to say that this doesn't include strut at all.

If it turns out that strut becomes the new prevalent text layout issue then I think we can either add it to this debug flag or introduce a new debugPaint flag that paints a strut indicator.

loic-sharma · 2025-07-10T22:55:12Z

packages/flutter/lib/src/rendering/paragraph.dart

    }

+    assert(() {
+      _textPainter.debugPaintTextLayoutBoxes = debugPaintTextLayoutBoxes;


Just curious, why doesn't TextPainter.paint just use the global debugPaintTextLayoutBoxes directly instead of an intermediary TextPainter.debugPaintTextLayoutBoxes? Feel free to keep as-is, asking for my own knowledge :)

Hmm for no particular reason actually. I initially wanted to implement the logic in RenderParagraph so I defined the flag in rendering/debug.dart but then I changed my mind since adding the flag to TextPainter would allow RenderEditable to reuse the logic.

Right now only static text (i.e. RenderParagraphs) reads the flag, not text in the text fields, since I'm not really sure if it will be useful for text fields.

Thanks for your thoughts, I appreciate it! :)

loic-sharma

Re-LGTM!

…lutter/flutter#168876)

flutter/flutter@9c626d9...440713c 2025-07-18 [email protected] Add OS version support section to plugin docs (flutter/flutter#172316) 2025-07-18 [email protected] Roll Dart SDK from 7fcc5f48c335 to fe2232bd5b9f (2 revisions) (flutter/flutter#172339) 2025-07-18 [email protected] Refactor handling of frame waiting. (flutter/flutter#172277) 2025-07-18 [email protected] Roll pub packages (flutter/flutter#172332) 2025-07-17 [email protected] Refactor and forbid `base/exit.dart` outside of `lib/runner.dart` (flutter/flutter#171923) 2025-07-17 [email protected] Use UTC timezone for `stamp_command_test` to avoid local TZ flakes (flutter/flutter#172319) 2025-07-17 [email protected] [web] Add tests for unified platform view embedding behavior (flutter/flutter#172313) 2025-07-17 [email protected] Platform views shouldn't receive pointer events when not laid out (flutter/flutter#172043) 2025-07-17 [email protected] Fix Size.isEmpty description (flutter/flutter#172021) 2025-07-17 [email protected] feat: Add `maxCount` parameter to `Badge.count` constructor. (flutter/flutter#171054) 2025-07-17 [email protected] add `debugPaintTextLayoutBoxes` for debugging text layout (flutter/flutter#168876) 2025-07-17 [email protected] Roll Packages from 4a231ae to cb8fef6 (31 revisions) (flutter/flutter#172303) 2025-07-17 [email protected] Fix mutating Paint bug (flutter/flutter#171180) 2025-07-17 [email protected] No SystemContextMenu when readOnly is true (flutter/flutter#171242) 2025-07-17 [email protected] Add a getter to get the recorder used by painting context (flutter/flutter#170223) 2025-07-17 [email protected] [Impeller] Add missing SetPipeline call for the vertices uber pipeline in AtlasContents (flutter/flutter#172273) 2025-07-17 [email protected] Roll Dart SDK from 486f9c0663bc to 7fcc5f48c335 (1 revision) (flutter/flutter#172279) 2025-07-17 [email protected] Roll Skia from 3673a1f26a63 to 9587301e33bc (3 revisions) (flutter/flutter#172281) 2025-07-17 [email protected] Fix a race in FlutterEngineTest.CanLogToStdout (flutter/flutter#172025) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…8876) Text vertical alignment is a common complaint and one of the most common causes is different type faces being used in the same paragraph (for instance, when there's English / Arabic in the same paragraph so the default font doesn't contain the required glyphs for some characters). Hopefully this flag is going to make debugging alignment issues a bit easier, and in some github issues attaching screenshots with the flag on will be helpful for diagnosing the issue. ### What the layout boxes look like ```dart final testText = 'Quick brown fox, نص, trailing spaces${" " * 100}' 'new line at the end.\n\n\n\n'; Column([ Text(testText, style: TextStyle(height: kTextHeightNone)), Text(testText, style: TextStyle(height: 1.0)), Text( testText, style: TextStyle(height: kTextHeightNone), strutStyle: StrutStyle(fontSize: 30), ), ]) ``` <img width="410" alt="image" src="https://github.com/user-attachments/assets/788b8089-373f-4af0-9144-306b3e755614" /> ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [ ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…r#9646) flutter/flutter@9c626d9...440713c 2025-07-18 [email protected] Add OS version support section to plugin docs (flutter/flutter#172316) 2025-07-18 [email protected] Roll Dart SDK from 7fcc5f48c335 to fe2232bd5b9f (2 revisions) (flutter/flutter#172339) 2025-07-18 [email protected] Refactor handling of frame waiting. (flutter/flutter#172277) 2025-07-18 [email protected] Roll pub packages (flutter/flutter#172332) 2025-07-17 [email protected] Refactor and forbid `base/exit.dart` outside of `lib/runner.dart` (flutter/flutter#171923) 2025-07-17 [email protected] Use UTC timezone for `stamp_command_test` to avoid local TZ flakes (flutter/flutter#172319) 2025-07-17 [email protected] [web] Add tests for unified platform view embedding behavior (flutter/flutter#172313) 2025-07-17 [email protected] Platform views shouldn't receive pointer events when not laid out (flutter/flutter#172043) 2025-07-17 [email protected] Fix Size.isEmpty description (flutter/flutter#172021) 2025-07-17 [email protected] feat: Add `maxCount` parameter to `Badge.count` constructor. (flutter/flutter#171054) 2025-07-17 [email protected] add `debugPaintTextLayoutBoxes` for debugging text layout (flutter/flutter#168876) 2025-07-17 [email protected] Roll Packages from 4a231ae to cb8fef6 (31 revisions) (flutter/flutter#172303) 2025-07-17 [email protected] Fix mutating Paint bug (flutter/flutter#171180) 2025-07-17 [email protected] No SystemContextMenu when readOnly is true (flutter/flutter#171242) 2025-07-17 [email protected] Add a getter to get the recorder used by painting context (flutter/flutter#170223) 2025-07-17 [email protected] [Impeller] Add missing SetPipeline call for the vertices uber pipeline in AtlasContents (flutter/flutter#172273) 2025-07-17 [email protected] Roll Dart SDK from 486f9c0663bc to 7fcc5f48c335 (1 revision) (flutter/flutter#172279) 2025-07-17 [email protected] Roll Skia from 3673a1f26a63 to 9587301e33bc (3 revisions) (flutter/flutter#172281) 2025-07-17 [email protected] Fix a race in FlutterEngineTest.CanLogToStdout (flutter/flutter#172025) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…8876) Text vertical alignment is a common complaint and one of the most common causes is different type faces being used in the same paragraph (for instance, when there's English / Arabic in the same paragraph so the default font doesn't contain the required glyphs for some characters). Hopefully this flag is going to make debugging alignment issues a bit easier, and in some github issues attaching screenshots with the flag on will be helpful for diagnosing the issue. ### What the layout boxes look like ```dart final testText = 'Quick brown fox, نص, trailing spaces${" " * 100}' 'new line at the end.\n\n\n\n'; Column([ Text(testText, style: TextStyle(height: kTextHeightNone)), Text(testText, style: TextStyle(height: 1.0)), Text( testText, style: TextStyle(height: kTextHeightNone), strutStyle: StrutStyle(fontSize: 30), ), ]) ``` <img width="410" alt="image" src="https://github.com/user-attachments/assets/788b8089-373f-4af0-9144-306b3e755614" /> ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [ ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…lutter/flutter#168876)

…8876) Text vertical alignment is a common complaint and one of the most common causes is different type faces being used in the same paragraph (for instance, when there's English / Arabic in the same paragraph so the default font doesn't contain the required glyphs for some characters). Hopefully this flag is going to make debugging alignment issues a bit easier, and in some github issues attaching screenshots with the flag on will be helpful for diagnosing the issue. ### What the layout boxes look like ```dart final testText = 'Quick brown fox, نص, trailing spaces${" " * 100}' 'new line at the end.\n\n\n\n'; Column([ Text(testText, style: TextStyle(height: kTextHeightNone)), Text(testText, style: TextStyle(height: 1.0)), Text( testText, style: TextStyle(height: kTextHeightNone), strutStyle: StrutStyle(fontSize: 30), ), ]) ``` <img width="410" alt="image" src="https://github.com/user-attachments/assets/788b8089-373f-4af0-9144-306b3e755614" /> ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [ ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

LongCatIsLooong added 3 commits May 14, 2025 15:59

add debugPaintTextLayoutBoxes

01ae0d7

buh

8f02c79

guh

7652ed5

github-actions bot added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. labels May 14, 2025

Merge remote-tracking branch 'upstream/master' into debugPaintTextLay…

9479ab6

…outBoxes

justinmc self-requested a review May 15, 2025 19:57

Update text_painter.dart

f9d03a8

justinmc approved these changes May 16, 2025

View reviewed changes

loic-sharma approved these changes May 16, 2025

View reviewed changes

LongCatIsLooong added 3 commits July 8, 2025 14:55

Merge remote-tracking branch 'upstream/master' into debugPaintTextLay…

a2936a2

…outBoxes

ignore struts

9a249be

remove tests

e7d0f91

LongCatIsLooong requested review from justinmc and loic-sharma July 9, 2025 21:57

loic-sharma reviewed Jul 10, 2025

View reviewed changes

loic-sharma approved these changes Jul 10, 2025

View reviewed changes

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 17, 2025

auto-submit bot added this pull request to the merge queue Jul 17, 2025

Merged via the queue into flutter:master with commit 844edbc Jul 17, 2025
70 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 17, 2025

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 18, 2025

844edbcd9 add debugPaintTextLayoutBoxes for debugging text layout (f…

e07eff7

…lutter/flutter#168876)

engine-flutter-autoroll mentioned this pull request Jul 18, 2025

Roll Flutter from 9c626d9f9afa to 440713c3b287 (19 revisions) flutter/packages#9646

Merged

Piinks mentioned this pull request Jul 19, 2025

Flutter Notable Commits - 2025 #161460

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025

844edbcd9 add debugPaintTextLayoutBoxes for debugging text layout (f…

d86c675

…lutter/flutter#168876)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add `debugPaintTextLayoutBoxes` for debugging text layout #168876

add `debugPaintTextLayoutBoxes` for debugging text layout #168876

Uh oh!

LongCatIsLooong commented May 14, 2025 •

edited

Loading

Uh oh!

justinmc left a comment

Uh oh!

loic-sharma left a comment

Uh oh!

justinmc commented May 20, 2025

Uh oh!

LongCatIsLooong commented Jun 3, 2025

Uh oh!

LongCatIsLooong commented Jul 9, 2025

Uh oh!

loic-sharma Jul 10, 2025

Uh oh!

LongCatIsLooong Jul 10, 2025

Uh oh!

loic-sharma Jul 11, 2025

Uh oh!

loic-sharma left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

add debugPaintTextLayoutBoxes for debugging text layout #168876

add debugPaintTextLayoutBoxes for debugging text layout #168876

Uh oh!

Conversation

LongCatIsLooong commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What the layout boxes look like

Pre-launch Checklist

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

loic-sharma left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc commented May 20, 2025

Uh oh!

LongCatIsLooong commented Jun 3, 2025

Uh oh!

LongCatIsLooong commented Jul 9, 2025

Uh oh!

loic-sharma Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

loic-sharma Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

loic-sharma left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

add `debugPaintTextLayoutBoxes` for debugging text layout #168876

add `debugPaintTextLayoutBoxes` for debugging text layout #168876

LongCatIsLooong commented May 14, 2025 •

edited

Loading