Add hyphenation and text appearance options for EPUBs

[mrtcode]

It works well!

[dstillman]

Is <input type="range"/>…styleable?

At the very least, we'll want to style the popup a bit (@yexingsha).

We should probably steal a few things from Apple, including showing numbers and centering character and word spacing at 0%.

[yexingsha]

I think the range and step of these settings are a bit too large. Let's try these values:

• Line height: 0.80–2.50, step=0.05
• Word spacing: -100%–100%, step=5%
• Letter spacing: -0.1em–0.1em, step=0.005em (display it as %)

I was thinking of ditching the x button, and then remembered we kept the x in the search popup because of split view, and then found that in split view, clicking the x of the popup in the inactive view can close/open the popup in the active view. But that's probably not a worthwhile problem to solve, since I can't think of any use case where people would want to have different text appearances in split view. So maybe we just keep to one single popup for split view, and let it control both? Then we can remove the x button, and enable it to be closed by clicking outside its bounds, which is in line with apple's recommendation.

Also, I think putting this button next to the reset zoom button would make more sense, since in EPUB reader the zoom buttons basically control text appearance.

Regarding styling, we can either use the native slider appearance of macOS and windows, in light and dark mode:

Or we can come up with our own slider styling for all platforms. I guess using the interface native look would be more in line with our overall approach, but one single style would be easier to implement and maintain? (This question also concerns a few other 'unstyled' controls littered throughout the interface: the slider in the ink annotation color picker menu, as well the checkboxes in reader search box and note editor search box)

[AbeJellinek]

Is <input type="range"/>…styleable?

Yes, but not as easily as some other inputs. I could work on adding a global style for range inputs that would apply to the ink annotation color picker menu as well. Personally I think the macOS style looks nice and neutral and would look fine on all platforms, but we could do a separate style for Windows/Linux as well if that would be better.

Let's try these values:

On it.

So maybe we just keep to one single popup for split view, and let it control both?

Sure, we can do that.

I think putting this button next to the reset zoom button would make more sense

Sure, sounds good.

[AbeJellinek]

OK, implemented the new slider and dialog styles (and updated the Find popup's background, box-shadow, and border-radius to match Figma as well). Moved it out of the individual views and made a click on the background close it.

[yexingsha]

Looks good! Just need to set font size to 13px (this is an issue for reader UI in general), move the popup under the button, and update the labels:

[AbeJellinek]

Labels will work in the client if you check out https://github.com/zotero/zotero/pull/4256!

[yexingsha]

Oh right, I forgot to switch back. Thanks!

[AbeJellinek]

OK, see how that looks!

[AbeJellinek]

[yexingsha]

Looks good to me!

[AbeJellinek]

@dstillman, good to merge?

[AbeJellinek]

I'll rebase into separate commits for the different changes.