Bad line breaks inside hyperlinked text

[joemull]

Describe the bug Text inside hyperlinks gets wrapped without regard to word breaks, so there are often bad line breaks in the middle of words.

Janeway version 1.3.10

To Reproduce Steps to reproduce the behavior:

1. Go to any preview galley with hyperlinks such as https://journals.publishing.umich.edu/weaveux/plugins/typesetting/preview_galley/article/217/galley/43/
2. Adjust the width of the browser until a piece of linked text wraps in the middle

Expected behavior Lines should break on spaces only

Screenshots

Front-end Issues

If the issue is front-end specific please add the following details:

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser: Firefox
• Version 88.0.1

[joemull]

Oh and this journal has the material theme set.

[ajrbyers]

Breaking on space only could cause the text to apparat outside the reader block. I’m not sure which is worse.

[joemull]

Oh, you mean if the text is a URL, it might extend beyond the space visible to the user? Could you break on space if linked text does not contain a protocol like https, but otherwise break "aggressively"?

[ajrbyers]

I don’t think CSS can differentiate between the two

[joemull]

Huh. But surely this is something others have run into, right? I'm looking at an NYT article that breaks hyperlinked phrases at word breaks and nowhere else. This is not an urgent issue, but surely there's a fix out there?

[ajrbyers]

Do they have an example of a long URL linked in the text? We do in a few places.

[ajrbyers]

I’m sure we can sort something @joemull ! :)

[joemull]

OK so this seemed to fix it for me for both hyperlinked phrases and long URLs:

Change .article-body a { word-break: break-all; }

to .article-body a { word-wrap: break-word; }

[ajrbyers]

👏👏 want to make a PR? 😀

[joemull]

Haha sure let me figure out how to do that!

[joemull]

Credit: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

[joemull]

Recent example of a slightly different issue on Chrome (but not Firefox) in clean theme:

[mauromsl]

Recent example of a slightly different issue on Chrome (but not Firefox) in clean theme:

This is what Andy had mentioned about long links before:

Do they have an example of a long URL linked in the text? We do in a few places.

And the reason why we need to {word-break: beak-all} for <a> tags

[joemull]

Using word-wrap: break-word; seems to be working for both scenarios using the custom styling plugin, at least for this case:

When we fix this across the board we should test it more carefully on all three themes and multiple browsers.

[joemull]

This was fixed by cd0fd21e173a7659f862eb4287277c9b75a9141a. Tested manually on all themes.