Hyphens display incorrectly on macOS speedreader articles

Description

We set hyphens: auto in the speedreader css, which asks the layout engine to break long words at the end of lines when the article is marked with a recognized lang value. A user reports the square boxes where hyphen characters should be shown.

Steps to Reproduce

1. Enable Speedreader
2. Visit a page where Speedreader is triggered.
3. Change the window width until some words are split across lines
4. Observe line-ending word break characters

Actual result:

Square boxes appear at the end of some lines.

Expected result:

Word-breaks should be marked by inserted hyphen (-) characters.

Reproduces how often:

User reports it happens with multiple fonts on their macOS system, including Apple system fonts like Optima as well as the requested Georgia. The problem does not occur with Helvetica.

If the hyphens: auto style rule is disabled in devtools, words are not broken and the problem doesn’t manifest.

I haven’t been able to reproduce on Linux, hyphenation works as expected.

I don’t see hyphenation happening at all on Windows 10, so I can’t reproduce there either.

Brave version (brave://version info)

Brave 1.33.x Nightly

Version/Channel Information:

• Can you reproduce this issue with the current release?
• Can you reproduce this issue with the beta channel?
• Can you reproduce this issue with the nightly channel?

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields?
• Does the issue resolve itself when disabling Brave Rewards?
• Is the issue reproducible on the latest version of Chrome?

Miscellaneous Information:

[rillian]

cc @pes10k

[rillian]

Fascinating. Ok, sounds like @boocmp’s suggestion isn’t sufficient on its own. 😦