Stirling-PDF

mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-05-14 18:25:54 +00:00

History

Omar Ahmed Hassan b4451da2f4

Fix displayed identical fonts in sign PDF (#2751 )

# 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:

![image](https://github.com/user-attachments/assets/37f79c81-8155-4430-9e36-2b4cc2a442e6)

   - After:

![image](https://github.com/user-attachments/assets/e6a2b209-0d8f-4ff2-94ea-54827706d0cd)

- Light Mode:
   - Before:

![image](https://github.com/user-attachments/assets/c5356899-6be9-497b-8ad9-d50e6bd077d5)

   - After: 

![image](https://github.com/user-attachments/assets/29373b1a-cfa1-48a2-9040-3ed2fd5f7fd3)

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
Styling the <option> element is highly limited. Options don't inherit
the font set on the parent. In Firefox, only
[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) and
[background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling).

#### Useful references:
- [Option
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
- [Select
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
- [Advanced Form
Styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling)

Closes #1575

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

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

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.