Fix displayed identical fonts in sign PDF

[omar-ahmed42]

Description of Changes

Changes:

• Add a new custom select to display fonts correctly and to allow more styling flexibility in Sign PDF feature by hiding the original <select> element (display: none;) and wrap it with a <div> and then create a custom selection menu using <div>s and CSS to achieve the required results due to the limitations of <select> and <option> while still preserving the hidden <select> for form submission.

Why was the change made?

1. A bug that caused font families to not be displayed in Firefox.
2. Select/Option element are not flexible when it comes to styling (compared to DIVs for example) but bullet point 1. is of higher priority.

UI Changes:

• Dark Mode:

  • Before:
    

  • After:
    

• Light Mode:

  • Before:
    

  • After:
    

Note:

• Changes in sign.js are between the lines 95-228, as it seems the file was auto-formatted affecting whitespaces and single_quotes/double_quotes.

Useful quotes from MDN:

Styling with CSS
Styling the element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Chrome and Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

Useful references:

• Option Element
• Select Element
• Advanced Form Styling

Closes #1575

---

Checklist

General

• I have read the Contribution Guidelines
• I have read the Stirling-PDF Developer Guide (if applicable)
• I have read the How to add new languages to Stirling-PDF (if applicable)
• I have performed a self-review of my own code
• My changes generate no new warnings

Documentation

• I have updated relevant docs on Stirling-PDF's doc repo (if functionality has heavily changed)
• I have read the section Add New Translation Tags (for new translation tags only)

UI Changes (if applicable)

• Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR)

Testing (if applicable)

• I have tested my changes locally. Refer to the Testing Guide for more details.

[Frooodle]

@omar-ahmed42 this was done in older version, but it has issues with firefox and other browsers, does your above changes work on FF?

[omar-ahmed42]

@Frooodle Yes, it works now in Firefox but the implementation is different to some degree as I had to hide the original <select> element (display: none;) and wrap it with a <div> and then create a custom selection menu using <div>s and CSS to achieve the required results due to the limitations of <select> and <option>.

Also, the screenshots above are all from Firefox.

Notes:

1. I tested the changes in Firefox, Edge and Chrome to ensure that they're working well.
2. I updated the original PR to include the resources and quotes below for easy access for PR readers.

Useful quotes from MDN:

Styling with CSS
Styling the element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Chrome and Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

Useful references:

• Option Element
• Select Element
• Advanced Form Styling

[Frooodle]

Do we want to adjust the text displayed with the typed text? Or maintain font name as the text @reecebrowne @omar-ahmed42

Thoughts?

[omar-ahmed42]

@Frooodle Personally, I think keeping font names would be better than replacing it with the typed text, why? It makes it easier for the user to memorize and remember the font family used for future use (especially if we had to reorder the font families or if we added more font families).

At first, I thought of displaying a signature preview in a div/container that appears next to the option on hover but I ran into a problem which is "how practical would this solution be for mobile/phone UI?" then I thought of adding a preview field above the font selection to preview the currently selected or hovered over option/font but I can't think of an eye-pleasing design at the moment.

Let me know if you have any ideas

[Frooodle]

I agree with all of that! Makes sense