Bug 1716806 - Introduces a separator space between radio buttons/checkboxes and their labels/strings

[JoeCardoso13]

This PR addresses Bug 1716806. I have devised 2 approaches to tackle this issue, both editing only the src/core/xfa/template.js file:

1. This is the change proposed in this PR. The strategy here is to prepend any label string associated with a CheckButton object (checkbox or radio) with a space, when it doesn't already have it, and then replace all spaces by "\u00A0", which looks like a space but doesn't become a word boundary (for the same reason slashes are also filtered out and replaced by "\u2044"). Lines 1210-1223 contain now:

    // For checkButton captions, add a non-breaking space at the beginning
    // and replace all spaces with non-breaking spaces to prevent word wrapping
    const parent = this[$getParent]();
    if (parent?.ui?.checkButton && typeof value === "object" && value.children) {
      for (const child of value.children) {
        if (child.value && typeof child.value === "string") {
          // Replace all regular spaces with non-breaking spaces
          child.value = child.value.startsWith(" ")
            ? child.value.replace(/ /g, "\u00A0")
            : "\u00A0" + child.value.replace(/ /g, "\u00A0");
          child.value = child.value.replace(/\//g, "\u2044");
        }
      }
    }

2. This approach is just described here, it's not in this PR. It's to reduce the size of CheckButton objects in order to open up space for adding an equivalent margin to their right side. The downside is that the checkboxes and radios will be smaller and look smaller. This change (not in this PR) would add the following code underneath line 1325:

    // Reduce checkbox size slightly and use the space for margin to create
    // spacing between checkbox/radio and adjacent text labels
    const reducedSize = measureToString(this.size - 2);

    style.width = style.height = reducedSize;
    style.marginInlineEnd = "2px";

Critically, I have not been able to run npx gulp xfatest locally (nor any other test script). Apparently for lack of computational power. So I'm relying on visually inspecting the most critical cases pointed out in the last comment of PR 19765:

• xfa_bug1739502.pdf (page 4)
• xfa_bug1718741.pdf (page 5)
• xfa_bug1717668_4.pdf (pages 3 and 4)
• xfa_issue13597.pdf (page 1)
• xfa_issue13633.pdf (pages 1 and 2)

I suspect the CI automated tests might fail and I'd appreciate some feedback, especially in regards to which of the 2 approaches mentioned above (or neither) seems more promising.

[timvandermeij]

Please fix the linting issues, using npx gulp lint --fix, and add a test case (similar to the existing XFA test cases) for this change to avoid regressions. After that we can trigger the XFA tests here.

[JoeCardoso13]

Linting has been fixed.

Moreover, I've added a test case as requested. The changes include:

• test/pdfs/xfa_bug1716806.pdf - Test PDF demonstrating the checkbox/radio spacing issue (suggested on comment 15 from Bugzilla's page )
• test/test_manifest.json - Test entry (similar to existing XFA test cases)
• test/pdfs/.gitignore - Whitelist for the test PDF

The test is ready for XFA test runs.

[timvandermeij]

/botio-linux preview

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_preview from @timvandermeij received. Current queue size: 0

Live output at: http://54.241.84.105:8877/a06b28735571880/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Success

Full output at http://54.241.84.105:8877/a06b28735571880/output.txt

Total script time: 1.00 mins

Published

• Viewer: http://54.241.84.105:8877/a06b28735571880/web/viewer.html
• Viewer (legacy): http://54.241.84.105:8877/a06b28735571880/legacy/web/viewer.html

[timvandermeij]

/botio test

[moz-tools-bot]

From: Bot.io (Windows)

---

Received

Command cmd_test from @timvandermeij received. Current queue size: 0

Live output at: http://54.193.163.58:8877/a7fc82861eab8f0/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_test from @timvandermeij received. Current queue size: 0

Live output at: http://54.241.84.105:8877/50f3aad13336564/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Failed

Full output at http://54.241.84.105:8877/50f3aad13336564/output.txt

Total script time: 39.74 mins

• Unit tests: Passed
• Integration Tests: Passed
• Regression tests: FAILED

  different ref/snapshot: 127

Image differences available at: http://54.241.84.105:8877/50f3aad13336564/reftest-analyzer.html#web=eq.log

[moz-tools-bot]

From: Bot.io (Windows)

---

Failed

Full output at http://54.193.163.58:8877/a7fc82861eab8f0/output.txt

Total script time: 74.46 mins

• Unit tests: FAILED
• Integration Tests: Passed
• Regression tests: FAILED

  different ref/snapshot: 127

Image differences available at: http://54.193.163.58:8877/a7fc82861eab8f0/reftest-analyzer.html#web=eq.log

[calixteman]

I don't remember why checkboxes are not rendered in the ref tests... it's a bit painful.
Anyway, I just quickly looked at some of them and the result is better than with the previous patches we had for this bug.
I'll review it asap.
Thank you for your contribution.

[JoeCardoso13]

Cool! The 2 approaches were devised after reviewing previous work from other contributor's attempts. They avoid the major pitfall of changing element sizing AFTER layout. To recap:

1. Prepending check-button's label characters with space (when needed) and transforming spaces (and slashes) to their non-word boundary versions.
2. Reducing the size of the entire checkbox or radio in order to add a margin to its right side.

This PR contains only 1st approach for now, but I could make a hybrid, if needed. The major downside of the 2nd approach is decreasing the size of the entire checkbox or radio, but this could be made subtle if it's adding to the space from the other approach.

If the result is satisfactory, I can refactor either code to make it fit nicer in the codebase. For the 1st approach I'm thinking of a helper function for the string manipulation, and for the 2nd I'd parameterize the 2 pixels.

[JoeCardoso13]

Hi @calixteman,

Following up on this PR after rebasing on the latest master.

Quick recap:

• PR Add margin between radio buttons/checkboxes and their labels/strings #17948 (CSS margins on elements): Caused 275+ regressions with unwanted layout shifts
• PR Add margin to separate radio buttons and checkboxes from their labels #19765 (CSS margins, 4px): Hit architectural issues—CSS margins applied post-layout caused text overflow in 7 cases.
• This PR (text-level non-breaking spaces): Handles spacing at parse time in src/core/xfa/template.js rather than via CSS, avoiding the layout calculation issues that blocked previous attempts

I'm happy to help in any way that would make the review easier:

• Provide specific examples showing before/after improvements
• Test on additional PDF samples
• Make adjustments based on any specific concerns you identify

Thanks for maintaining PDF.js!