Text becomes hyphenated after upgrade to 10.3.0

Can you post a screenshot of the issue?

I have added two screenshots. One with hyphens and one with the original look.

That's because of 🐛 Article text can overflow page on mobile viewports Fixed

Looking at those screenshots, I think this is probably a valid report, wondering if we could add hyphenate-limit-chars so that only actually long words get broken.

avani.bhut → made their first commit to this issue’s fork.

I removed hyphens: auto from the body tag to fix the issue. This property was added in the Olivero theme, which wasn't the default theme in previous core versions.

@avani.bhut, thanks for making the MR. Did you try the suggestion fix from comment #6?

This also needs manual testing and screenshots.

For #12

@quietone Yes, I’ve tried using the hyphenate-limit-chars property, but it is not fully supported across all browsers. For instance, Firefox and Safari do not support this property. Please refer to the screenshot/Link for more details.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars#b...

Scanning issue summary but still appears to be missing screenshots

Also MR should be against 11.x

avani.bhut → closed merge request !9261

@smustgrave Please see the attached screenshot displaying the before and after changes.

nayana_mvr → changed the visibility of the branch drupal-3459760-3459760-text-becomes-hyphenated to hidden.

nayana_mvr → changed the visibility of the branch 3459760-text-becomes-hyphenated-after-upgrade to hidden.

I have verified the changes in the MR!9261 and can confirm that it fixes the issue. Adding before and after screenshots from reviewer perspective. Keeping this 'Needs Work' itself as the pipeline has some build issues related to nightwatch tests.
I tried to create a new branch from 11.x and raised the MR with the same changes to check whether it fixes that issue but was getting the same errors in the pipeline, so I hid that branch. Please ignore them.
Would appreciate if someone can guide me to understand and fix nightwatch test failure issues. Thanks.

Please find the before and after screenshots.

Will this also resolve the issue in Olivero with hyphenated text in the Title? Photo enclosed. Thanks for the work done on this module!

Hi, I'm having the same issue with Claro (admin theme) on 10.3.6. See attached screenshot. Can you please review and provide a possible solution for Claro as well? Thank you.

I also removed the similar hyphens in the body element from the Claro theme. However, both themes added those intentionally for different reasons.

As @catch mentioned, the hyphens added in Olivero as part of 🐛 Article text can overflow page on mobile viewports Fixed to allow breaking long (German) words that overflow the viewport, but the regression is that it also breaks smaller words in English that do not necessarily overflow the viewport as we see in this issue.

The hyphens were added in Claro as part of 🐛 Close icon is ovrlapping the title text in modal in claro Active to fix the text overlapping the close button in modals, but the regression is that it also breaks words within CKeditor while using Claro.

I am not sure if essentially reverting the changes that introduced the hyphens is acceptable, and I am also not sure what a better fix would be for both of those, or if we should solve those in this issue.

We might want to re-open the original issue and do a revert there so that we can try to fix the original problem again with all of the context in one place.

by now hyphenate-limit-chars is now supported on firefox, still not safari.

we could add a rule for german specifically to address the issue without impacting other languages

I like the idea of reopening the original issues, and doing a revert. So, we can fix the original problems with all the context in place. Can one of you maintainers at least reopen those issues, please? I would be happy to do the revert if needed.

I am not convinced adding hyphens/break was the best solution for overlapping the close icon, 🐛 Close icon is ovrlapping the title text in modal in claro Active , but I have not taken a deep dive into that yet. Could that be solved with margin/padding, or absolute positioning?

I also like the idea of adding the hyphen rules for only German. What would that rule be? Safari does support the legacy properties specified in CSS3 Text Module.

-webkit-hyphenate-limit-before: 3; 
-webkit-hyphenate-limit-after: 2;