Olivero: Ensure long words break properly when zoomed in to provide proper reflow

Pretty straight forward

please review the patch.

Applied patch #6 .The text overflow on links will be gone after applying this patch.
Including screenshots
Before patch

After patch:

After patch Mobile device:

However the link section (Tags here) seems little odd after applying this patch.Is that ok ?

There's a couple issues with this patch, and I'm not sure this approach will work.

1. The CSS does not pass linting:

➜  core git:(9.1.x) ✗ yarn lint:css
yarn run v1.22.4
$ stylelint "**/*.css"

themes/olivero/css/base/base.pcss.css
 34:3  ✖  Expected "word-wrap" to come before "background-position"   order/properties-order

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  core git:(9.1.x) ✗

2. This patch causes normal length words to be also be broken (see image below).

This should resolve the issue.

Before patch:

After Patch:

Please review.

Thanks!

This looks great! Tested out in various browsers and it

1) Line-breaks long links
2) Line-breaks long links that contain spaces using the spaces

I'd like to be a little more descriptive of the comment here, though. Maybe something like "Cannot use break-all on webkit, as that will cause line-breaks inside of words" or something (assuming that's what is meant by the comment).

Thank you @mherchel for the review, updated the comment to be more descriptive.

Please review.

Thanks!

Thanks for the patch.
Patch applied successfully.
I read the comments. It looks fine to me.

It might be a good idea to talk about this in one of the UX calls.

While I can't review front end issues I do look at them with the hope that I might learn something. I came here and the IS states that there are screenshots for reference but they are not in the IS. Where are they? It would help to have before and after screenshots in the IS.

Embedded the screenshot to the issue summary

Discussed this in the previous UX meeting: #3182480: Drupal Usability Meeting 2020-11-20. We thought that it is a good idea to prevent overflow of text. However, when text overflows, the text should have hyphenation. We should probably use the CSS hyphens property for that. It is not supported by all languages and all browsers but we think it's a nice enhancement in the languages and browsers that support it.

1. +++ b/core/themes/olivero/css/components/tags.pcss.css
   @@ -61,6 +61,10 @@
   +  word-wrap: break-word;
   
   +++ b/core/themes/olivero/css/components/text-content.pcss.css
   @@ -7,6 +7,7 @@
   +  word-wrap: break-word;
   

   We should use overflow-wrap instead since that's the official property name: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap/.

2. +++ b/core/themes/olivero/css/components/tags.pcss.css
   @@ -61,6 +61,10 @@
   +  /* Cannot use break-all on webkit, as that will cause line-breaks inside of words. */
   +  -ms-word-break: break-all;
   +  word-break: break-word;
   

   Why are we defining word-break here? wouldn't overflow-wrap be sufficient?

Looking into this.

Worked on #22
22.2 Using overflow-wrap not getting an expected output.
Usingword-break: break-word;getting an expected output.
refer screenshot.

I have re-rolled the patch #43.

Well, the patch seems to resolve the issue however, if there are multiple long tags then the comma placement seems off.

Also, the text needs to wrap on tables

Added a patch to place the comma at the bottom of the term, however, it doesn't take into account if there are only a few characters on the last line the comma will be placed at the end of the line.

Tables are the patch.

Regarding @lauriii's comment in #22.

If we use hyphens:auto, it will unnecessarily break words and insert hyphens. Screenshot below:

I updated the patch and moved the word-break: break-word; into the base <a> tag, so it will affect all long text links (including in sidebar, menu, etc).

Looks and works great. Marking RTBC!

Random test failure? Bcz the patch has passed for sure previously. 🤔

Applied patch #52 and it's working fine but there is some test error. I have uploaded re-roll patch. Please review it.

Hi
Applied patch #56 and it's working fine with no errors. Please review the SS.

Because this is intended for Olivero, the "new default" theme, can we get some confirmation that:
- this looks good with non-English languages?
- this looks good with RTL (right-to-left) languages?

Lorem text & keyboard-smash text don't really represent real world examples (although they do help illustrate potential pain points).

Patch #56 applied cleanly and it is working well.
Reviewed the #57 screenshots.
Olivero's body text will overflow when link text too long issue Resolved
Marking as RTBC

Patch #56 successfully applied.

Olivero's body text will overflow when link text too long.

RTBC +1

+++ b/core/themes/olivero/css/base/base.pcss.css
@@ -43,6 +43,8 @@ body {
+  -ms-word-break: break-all;
+  word-break: break-word;

I think this should be overflow-wrap: anywhere - work-break: break-word has been deprecated - https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word

+++ b/core/themes/olivero/css/components/text-content.pcss.css
@@ -7,6 +7,7 @@
+  overflow-wrap: anywhere;

Only the a tag one should have changed afaik. This should be overflow-wrap: break-word; as it was in #56

This is a bit hard to follow, but from what I can tell, we should be using overflow-wrap: anywhere. This leaves open for "Soft opportunities" to break the word to work. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

If we add the rule onto the base links we should also remove it from the .text-content a, as it's no longer needed there.

`word-break: break-word;` should be used because of better browsers support (global users supported 94.31%).

`overflow-wrap: anywhere;` should be avoided because of less support (global users 73.07%), specificially it is not support by Safari or Safari iOS (browser support,).
Since Olivero is part of Drupal 9.1.0 and Drupal core is suppose to support "The latest release of each of the latest two supported major versions of Safari ... Safari for iOS", it can not be included.

Good catch @tyler36. Agree.

@tyler36 / @mherchel - looking at https://caniuse.com/?search=overflow-wrap%3A%20break-word - I think in the pcss we should be using overflow-wrap: break-work and then see what the preprocessor comes up with.

I agree that sadly anywhere does not look supported enough... it's odd that the preprocessor changes it to word-wrap: anywhere - because anywhere is not well supported by our target browsers.

After discussing with @lauriii I think we should be adding overflow-wrap: break-word; to the .pcss files and then I expect the CSS preprocessor to change this to the more widely supported word-wrap: break-word; in the .css files.

Also whatever we decide here needs replicating in #3197894: Claro's Body overflow when link text too long. and vice versa.

Hi @Gauravmahlawat,

Patch applied successfully,

All issue fixed except node content, I have attached issue screenshot.

hi sakthivel,
I applied patch #75 ( 9.3.x-dev) but still experiencing the issue... please find the screenshot attached.

I agree break-word might not be enough if there is no breaking char contained in the long word. For example, this could happen for long tags or system paths in text or similar things. In my case in linked views titles and tags.
Also, I saw this for <blockquote> - that should also be tested please.

Have a look at some approaches here: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-...

I'm currently using

body {
  /* Break long words especially on mobile */
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

successfully.

Finally I'm not a themer and I'm not sure what's best practice here. Perhaps have a look at a large framework like bootstrap too?

Hi, I tried to apply patch #74 & #75. But Patch failed.

Re-roll patch given for 9.3.x.

Hi vsujeetkumar ,
I tried to apply Patch #81.
Patch Failed.Please find attached ss.
Thanks.

Patch #81 applied cleanly but after applying patch issue still exist. Added screen shot for reference.

Verified and tested patch #81.
Patch applied successfully but functionality not working

Testing Steps:
# Apply Olivero theme
# Add Tag field in any content type
# Goto: node/add/article
# Fill long text in the tag field
# Save it

Expected Results:
# User should not see the breaking and overflowing long text which is mentioned in tag field.

Actual Results:
# User is able to see breaking and overflowing long text which is mentioned in the tag field.

Not working as expected.
Moving to Needs Work.

Hi I have test the patch and found that the issue only comes with "Article" content type, For rest is working fine. According to my findings `word-wrap: break-word;` is not appropriate, I have used `word-break: break-word;` and its working fine with all the cases.

I am not front end guy however I have created the patch, Please have a look and advise.

#6 Patch applied successfully. sharing screenshot.

The patch in comment #89 applies properly and fiz the problem!

Patch #89 applied cleanly and all the alignment are proper , working as expected.

I created a CodePen to experiment with various properties and combinations at https://codepen.io/mherchel/pen/WNjVQjj

While this is strictly speaking, a failure of reflow, when looking at the text in WCAG around resizing text and reflow, given the variety of challenges, at the moment this is not a stable blocker.

Reference: https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html#examples

Given the potential challenges to users that each potential introduces, the current least-bad approach is to follow the default browser behavior and to not break or hyphenate words.

On the office hours, we determined that we should keep this issue open so that it can be resolved in the future when better solutions on the browser side might be available.

Per @rainbreaw's comment above, I'm postponing this issue.

Normal status will do for this; we mentioned it in the a11y office hours discussion, I think. WCAG success criterion 1.4.10 Reflow is a level AA. Major is generally (but not exclusively) for level A.

We actually had patch #89 at RTBC in comment #93, so it deserves an explanation of why we're postponing this, instead of proceeding with the CSS change. Here are some more points from this week's a11y office hours:

• There is no perfect, or even widely-agreed upon standard for hyphenation in English, and we imagine other languages don't necessarily have that either. Much of it probably comes down to style guidelines of individual publishers.
• @mherchel had demos of several CSS methods. Most of these solved the overflow problem, but all of them had some unusual looking results, with word breaks which seemed likely to hinder readability.
• I speculated on how browsers might be deciding this. It doesn't seem like they being particularly clever about it, e.g. by using a hyphenation dictionary. It would be awesome if they did that one day.
• Content authors can introduce their own hard/soft indications of hyphenation (using <wbr>, say) but that doesn't help us here. For a general-purpose, off-the-peg theme, we need a automatic approach.
• We noted that some server-side and client-side technologies might also automate this (e.g. an example from a Google featured search result snippet had some nice hyphenation, but we found the hyphen present in the DOM). This is something a Drupal module might be able to do, but is way outside of a core theme's scope.

The upshot is that we don't like the CSS approach, and we don't have any better ideas for the time being. It remains open because the WCAG Reflow failure is still an issue, particularly for magnifier users and mobility-impaired users.

it deserves an explanation of why we're postponing this, instead of proceeding with the CSS change

That change broke long words without adding a hyphen. During office hours, multiple maintainers (most notably @rainbreaw) noted how this hinders readability.

Applied patch #6 working fine and applied successfully
Thanks for the patch
for ref sharing screenshots....

Please add credits as appropriate to those who contributed on this duplicate issue, thanks!

#3205146: Olivero's Title overflow when title link text too long.

Tagging for WCAG 1.4.10

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.