Include radio buttons when processing forms #2143

okkays · 2024-05-01T20:04:53Z

Hello!

Resolves #1831

This aims to make radio buttons work in forms.

🌎 Currently, inputs are collected and rendered individually.
⛔ This means that groups of elements, such as radio buttons which may only have one value checked at once, don't have a way to identify other elements in the group.
✅ This PR keeps a concept of "forms" in between "page" and "inputs", and uses those forms to build groups of radio buttons.

This is my first time reading the PDF specification (such fun!) so appreciate any scrutiny of the dictionaries I have it making.

Added a few unit tests as well, but here's a working example:

example.pdf

Created with:

import weasyprint

html = '''
<!DOCTYPE html><html><body>
<form><h2>Form 1</h2>
<p>Radio 1:</p>
    <label>Option One <input type="radio" name="radio1" value="1"/></label>
    <label>Option Two <input type="radio" name="radio1" value="2"/></label>
<p>Radio 2:</p>
    <label>Option One <input type="radio" name="radio2" value="1"/></label>
    <label>Option Two <input type="radio" name="radio2" value="2"/></label>
</form>

<form id="two">
<h2>Form 2</h2>
<p>Radio 1:</p>
    <label>Option One <input type="radio" name="radio1" value="1"/></label>
    <label>Option Two <input type="radio" name="radio1" value="2"/></label>
<p>Radio 2:</p>
    <label>Option One <input type="radio" name="radio2" value="1"/></label>
    <label>Option Two <input type="radio" name="radio2" value="2"/></label>
</form>
</body></html>
'''

weasyprint.HTML(string=html).write_pdf('output.pdf', pdf_forms=True)

Thanks for taking a look. Happy to change / reformat as needed!

- 🌎 Currently, inputs are collected and rendered individually. - ⛔ This means that groups of elements, such as radio buttons which may only have one value checked at once, don't have a way to identify other elements in the group. - ✅ This commit keeps a concept of "forms" in between "page" and "inputs", and uses those forms to build groups of radio buttons.

weasyprint/formatting_structure/boxes.py

This also avoids the use of hash that’s not stable between calls.

Also remove the space from unchecked elements, so that their bottom is aligned with the text baseline.

liZe · 2024-05-13T13:28:56Z

Thanks a lot for your pull request!

I’ve added some commits to fix the problems I’ve found. The generated PDF files are now valid according to some PDF validators, but they’re still broken with GhostScript. I’ll fix that as soon as I find the reason why.

I’ve tried different PDF viewers, including Adobe Reader and browsers, it seems to work with most of them (Evince being the one that doesn’t, but it was already kind of broken with checkboxes…).

alenards · 2024-05-13T15:38:51Z

@liZe - I tried to Adobe Reader last week and didn't make it over here to post/mention the messages.

Is there anything I can assist with on testing/verifying?

This way works with many PDF readers and validators.

liZe · 2024-05-13T22:20:59Z

Is there anything I can assist with on testing/verifying?

I’ve tested the current code, it seems to work with Ghostscript, Adobe Reader, Pdf.js, Okular, Foxit, and a PDF validator. Evince is a bit broken, it was with checkboxes too, but Okular (that is also based on Poppler) works well, so I suppose it’s a bug in Evince.

If you could test with different HTML files on the different PDF readers you have on your computer, that would be wonderful! 💜

(As always with PDF forms, the specification is not perfect and different implementations have different undocumented requirements. That’s why the code can be strange sometimes.)

alenards · 2024-05-14T00:15:52Z

I realized one interesting test case is the "Lesson Forms" from https://print-css.rocks/lesson/lesson-forms

example__print_css_lesson_forms.pdf

All fields are editable, code used to write pdf is same as PR description.

📝 The submit button input isn't clickable, doesn't render the text "Save" in it.

Tested on macOS:

Preview.app
Adobe Reader
Google Chrome rendering via file:///
Safari rendering via file:///

Screenshots

Edit, Save, View

✅ Google Chrome
✅ Safari
✅ Preview.app (macOS only)

Adobe Reader

❌ saving in Adobe Reader seems to be mangled the styling:

example__print_css_lesson_forms_adobe.pdf

That might be a known Adobe Reader issue though.

"View" Examples (All macOS)

Using the following apps, can open and view the PDF as expected.

Version: macOS 14.4.1

Safari

Preview.app (macOS)

Adobe Reader

Google Chrome

python repl to generate pdf

I used the HTML input from here https://print-css.rocks/lesson/lesson-forms

No stylesheet to begin with.

I have the okkays:kk/radio-buttons branch local.

macOS 14.4.1, Python 3.9.9, ghostscript & pango installed from brew.

python                                                                                                   lenards@Andrews-MBP
Python 3.9.9 (main, Feb 20 2024, 15:40:24)
[Clang 15.0.0 (clang-1500.1.0.2.5)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import weasyprint
>>> html = '''
... <html>
...     <head>
...         <link rel="stylesheet" type="text/css" href="styles.css" />
...     </head>
...     <body>
...         <form method="POST">
...             <fieldset>
...                 <legend>Test form</legend>
...
...                 <div class="row">
...                     First name:
...                     <input type="text" name="firstname" value="" placeholder="Firstname"/>
...                 </div>
...                 <div class="row">
...                     Last name:
...                     <input type="text" name="lastname" value="" placeholder="Lastname"/>
...                 </div>
...                 <div class="row">
...                     <input type="checkbox"> Married?
...                 </div>
...                 <div class="row">
...                     Gender:
...                     <br/>
...                     <input type="radio" name="gender" value="male">Male
...                     <br/>
...                     <input type="radio" name="gender" value="female">Female
...                     <br/>
...                     <input type="radio" name="gender" value="diverse">Diverse
...                 </div>
...                 <div class="row">
...                     Gender 2:
...                     <select name="testdata">
...                         <option value="male">Male</option>
...                         <option value="female">Female</option>
...                         <option value="diverse">Diverse3</option>
...                     </select>
...                 </div>
...                 <div class="row">
...                     Comment
...                     <br/>
...                     <textarea rows="5" cols="60"></textarea>
...                 </div>
...                 <div class="row">
...                     <input type="submit" value="Save"/>
...                 </div>
...             </fieldset>
...         </form>
...     </body>
... </html>
... '''
>>> weasyprint.HTML(string=html).write_pdf('output.pdf', pdf_forms=True)
>>>

📝 I'll post viewing the attached PDF from Windows PDF views later today

liZe · 2024-05-14T12:09:03Z

Thanks for your feedback.

saving in Adobe Reader seems to be mangled the styling

I’ll try to see if there’s anything to do about this. If the bug is already there in stable releases, we can merge the pull request as it doesn’t break anything. If it’s introduced by the bug report, then we have to fix it before merging.

The submit button input isn't clickable, doesn't render the text "Save" in it.

That’s because button and submit inputs are not supported. It’s also not possible to send forms to websites. Interested in opening a new PR for this? 😄

liZe · 2024-05-14T12:35:45Z

saving in Adobe Reader seems to be mangled the styling

I tried to edit the form and save the document with Adobe Acrobat Reader on Windows, it worked for me. I have version 2024.002.20736, maybe that’s why. (And a new 20759 version has even been released today.)

If it’s OK for you, I think that we can merge this PR

alenards · 2024-05-14T15:14:15Z

If it’s OK for you, I think that we can merge this PR

I think that would fantastic! Most excellent - thank you! 🙌

😮‍💨 I had issues w/ my Windows 10 laptop last night, so I'm glad you were able to get in testing on that platform.

alenards · 2024-05-14T15:16:35Z

The submit button input isn't clickable, doesn't render the text "Save" in it.

That’s because button and submit inputs are not supported. It’s also not possible to send forms to websites. Interested in opening a new PR for this? 😄

Sure @liZe - I'd be up to take a look into getting the text to render in a separate PR.

I'll to look at the spec; I'm puzzled what clicking on "Save" would do.

liZe · 2024-05-14T16:14:56Z

I'd be up to take a look into getting the text to render in a separate PR.

🚀

I'll to look at the spec; I'm puzzled what clicking on "Save" would do.

No idea. There’s probably a lot of work to store data in a way that makes PDF readers send the right HTTP requests…

alenards · 2024-05-14T16:26:42Z

🙌 🎉 🎊

Awesome work @okkays! Thank you @liZe!!!

alenards · 2024-05-15T18:34:16Z

I forgot to mention that if you structure the HTML to prefill information for the radio buttons (and checkbox, textfields, etc), you get what you'd expect! 🎉

example_form_pre_fill.pdf

On macOS, Preview.app ...

okkays mentioned this pull request May 1, 2024

Support for editable forms lacks support for radio buttons #1831

Closed

alenards reviewed May 1, 2024

View reviewed changes

weasyprint/formatting_structure/boxes.py Outdated Show resolved Hide resolved

Fix typo: in vs equals

8efa9a4

liZe added this to the 63.0 milestone May 12, 2024

liZe added 9 commits May 13, 2024 14:49

Minor changes on coding style

bac7c50

Fix radio fields names in PDF

706815d

This also avoids the use of hash that’s not stable between calls.

Fix character drawn for radio buttons

7a9a125

Add field object before using reference for radio inputs

a216e90

Use PDF names instead of strings as radio value

b5629c8

Add missing mandatory Rect value in radio widget

0105637

Add on-state radio button stream to PDF

b3edc13

Don’t display value for checkbox and radio inputs

a8897fb

Also remove the space from unchecked elements, so that their bottom is aligned with the text baseline.

Fix tests

a46b704

Merge checkbox and radio management in PDF

ab6f85c

This way works with many PDF readers and validators.

liZe merged commit 6518579 into Kozea:main May 14, 2024
6 checks passed

grewn0uille added the feature New feature that should be supported label Oct 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Include radio buttons when processing forms #2143

Include radio buttons when processing forms #2143

okkays commented May 1, 2024

liZe commented May 13, 2024

alenards commented May 13, 2024

liZe commented May 13, 2024

alenards commented May 14, 2024 •

edited

Loading

Edit, Save, View

Adobe Reader

"View" Examples (All macOS)

Safari

Preview.app (macOS)

Adobe Reader

Google Chrome

liZe commented May 14, 2024

liZe commented May 14, 2024

alenards commented May 14, 2024

alenards commented May 14, 2024

liZe commented May 14, 2024

alenards commented May 14, 2024

alenards commented May 15, 2024

Include radio buttons when processing forms #2143

Include radio buttons when processing forms #2143

Conversation

okkays commented May 1, 2024

liZe commented May 13, 2024

alenards commented May 13, 2024

liZe commented May 13, 2024

alenards commented May 14, 2024 • edited Loading

Edit, Save, View

Adobe Reader

"View" Examples (All macOS)

Safari

Preview.app (macOS)

Adobe Reader

Google Chrome

liZe commented May 14, 2024

liZe commented May 14, 2024

alenards commented May 14, 2024

alenards commented May 14, 2024

liZe commented May 14, 2024

alenards commented May 14, 2024

alenards commented May 15, 2024

alenards commented May 14, 2024 •

edited

Loading