search

readium / readium-css

🌈 A set of reference stylesheets for EPUB Reading Systems, starting with Readium Mobile
https://readium.org/readium-css/
BSD 3-Clause "New" or "Revised" License
90 stars 20 forks source link

Automatic hyphenation doesn’t work in Chrome Android, ChromeOS, Linux, and Windows #31

Closed JayPanoz closed 6 years ago

JayPanoz commented 6 years ago

While I can get hyphens: auto to work in Chrome Desktop, we just can’t get it to work in Chrome Mobile (including Web Views).

Here’s what you can get on Desktop:

chrome-desktop

On mobile, it just won’t happen…

screenshot_2018-02-17-18-03-53

Even in landscape…

screenshot_2018-02-17-18-04-24

Tried changing the lang attribute from en to en-US to check if their mapping is super strict, to no effect.

Checked other ebook apps, and got the same result: no hyphens.

It kinda drives me crazy as it is supposed to be supported in Chrome only on Android and Mac…

Links:

JayPanoz commented 6 years ago

So yeah, it seems it doesn’t work in Android.

The only manual test they’ve made is checking this link from a bug report to make sure it doesn’t crash Chrome Mobile…

And here’s what I could get:

screenshot_2018-02-17-18-59-16

On a related note, hyphens aren’t implemented on Windows, Linux ChromeOS yet.

So, question: do we want to just remove the setting from the non-iOS apps until they fix those issues?

We manage that automatically when the text-align is set so should those issues be fixed, we’ll at least have that automatic handling.

JayPanoz commented 6 years ago

Bug reported. Here is the related Chromium issue.

JayPanoz commented 6 years ago

Hyphen dicts available in Android 6.0.1 are:

They’re available in system/usr/hyphen-data (and accessible with apps such as ES File Explorer). It would be a good idea to list the dicts available for each version.

laudrain commented 6 years ago

Nothing for French !

JayPanoz commented 6 years ago

Yeah, cc-ing @HadrienGardeur since we talked about that a few months ago and wondered whether we should embed ours.

But if we can’t get Chrome to hyphenate in the first place…

JayPanoz commented 6 years ago

Dicts can be found there for the current version of Android.

And aliases can be found there.

JayPanoz commented 6 years ago

Given this issue impacts Electron as well on non-MacOS platforms, we’d better discuss it during the next call. cc @llemeurfr

Adding support would mean polyfilling this e.g. Hyphenator.js

llemeurfr commented 6 years ago

So if I try to summarize, hyphenation support by a rendering engine depends on the platform, the language (dict or no dict). Polyfilling is doable, but the system should be smart enough to avoid loading the js if hyphenation is natively supported.

I'll add that dyslexic user can't read with hyphenation on, therefore disabling hyphenation should be a user setting (advanced) and it should be disabled on some of the themes we'll provide.

JayPanoz commented 6 years ago

So yes, in anticipation of the call, a recap:

  1. No support at all
    • hyphenation isn’t enabled at all;
    • you’ll end with huge gaps between words if the author/user justifies text.
  2. Partial support
    • only the values none and manual are supported;
    • manual is what polyfills leverage, by inserting the ­ character (soft-hyphen, which is invisible) all over the place, in every word applicable;
    • this is Chrome on Windows, Linux, and ChromeOS.
  3. Complete support
    • the value auto is supported in addition to none and manual;
    • quality depends on dictionaries available on the platform;
    • if a dict is not available, rendering engine may either fall back to english dict or complete disabling.

I know of early experiments to insert ­ characters in EPUB files to make it work anywhere but this can’t really scale well in production so they were short-lived. Now, it means that if authors justify text, we’ll have large gaps between words which, as you mentioned, hurts a11y. That should be solved by aligning text left though.

The biggest issue is an UX one i.e. having a setting which does nothing because automatic hyphenation is not supported.

Reference: canIuse

JayPanoz commented 6 years ago

Also, after taking a quick look at hyphenator.js issues, I’d rather not recommend polyfilling it whenever possible, as it might create extra issues e.g. performance issues (all words have to be checked in the DOM and modified when a pattern is applicable) and a11y issues (screen readers have a hard time managing soft hyphens).

On a related note, implementers willing to support hyphenation in MS browsers will probably have to check stylesheets for -ms-hyphens and add it if it can’t be found (same issue as vertical writing i.e. filling the gaps for bad authoring practices).

JayPanoz commented 6 years ago

So the current version of Android embeds hyphenation dicts for…

All seems to be retrieved from TeX (LaTeX patterns, hyphenation.org).

JayPanoz commented 6 years ago

So, the good news is that a fix is on its way for Chrome Android: https://chromium-review.googlesource.com/c/chromium/src/+/927931

JayPanoz commented 6 years ago

As a recap of our discussion about the global issue during yesterday’s call…

There’s hope though, as the Chrome Android issue has been tackled within 24 hours, is currently being patched, helped discover other issues and even improve i18n hyphenation – it also proves one tiny R2 demo can go a loooong way.

So as soon as Chromium is able to fix the Windows issue (they’re relying on Microsoft it seems), things could go pretty fast.

JayPanoz commented 6 years ago

This has been documented in the alpha version and will be closed as soon as the Chromium bug referenced in the third message is.

JayPanoz commented 6 years ago

Update: waiting for an Android 8.0 device (stock Oreo), which should be delivered this week, to confirm Chromium’s fix works because it currently doesn’t on an Android 6.0.1 device.

HadrienGardeur commented 6 years ago

I'm running 8.1, is there anything that I can easily test?

JayPanoz commented 6 years ago

Ah yes, that would help, thanks. The test can simply be r2-glue-js demo page in Chrome Canary (which is available on the App Store if you don’t have it already), they’ve been using it on their side to test the patch.

JayPanoz commented 6 years ago

So Hadrien could confirm the patch works, although word-spacing management is quite liberal.

screenshot_20180416-164030

screenshot_20180416-164037

It would be nice if people could post on the Chromium issue if they think this is too liberal. I’ll post an update there.

JayPanoz commented 6 years ago

As a proposed resolution at the Readium-CSS level, we should probably advise against putting an hyphen-specific user setting in the UI.

Further details:

Which means I’ll have to make some doc changes before closing #37.

JayPanoz commented 6 years ago

So this is pretty much out of our hands now. We can close this issue since Chromium fixed it.

Since hyphenation is the responsibility of browsers/rendering engines, please raise other hyphenation-related issues in their dedicated issue tracker:

Thanks in advance.