Problem/Motivation

Followup of #2165369: Installation breakpoint quirks

Long words in table cells are not handled well, which results in tables overflowing (see screenshot attached). While there is no unified cross-browser way to handle this, hopefully, we can come up with a css combination that is decent.

Proposed resolution

In Chrome and IE this is acheived with word-break: break-word. However, in FF and Opera this has to be done differently.

Issue screenshot:

before

Solution with word-break: break-word in Chrome

break-word

As an example for issue readers: ThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgToo

Remaining tasks

User interface changes

API changes

Original report by @alexrayu

CommentFileSizeAuthor
#19 2278507-word-break-in-cells-19.patch437 bytesalexrayu
#15 2278507-word-break-in-cells-15.patch436 bytesalexrayu
#13 2278507-word-break-in-cells-13.patch438 bytesalexrayu
#11 snapshot10.png136.81 KBalexrayu
#10 snapshot9.png91.3 KBalexrayu
#7 snapshot8.png197.22 KBalexrayu
#3 2278507-word-break-in-cells-3.patch461 bytesalexrayu
with-break-word.png244.65 KBalexrayu
b4-1.png77.25 KBalexrayu
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
Issue summary: View changes
alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
Issue summary: View changes
alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
Status: Active » Needs review
FileSize
2278507-word-break-in-cells-3.patch461 bytes

A patch that applied fix for IE and Chrome. There seems to be no good alternative for this for FF. Should we have this work at least for the browser that supports it, for Chrome?

Can we think of an elegant way to do it for FF?

clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
CreditAttribution: clemens.tolboom commented
Issue summary: View changes
Related issues: +#2165369: Installation breakpoint quirks
clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
CreditAttribution: clemens.tolboom commented

According to http://stackoverflow.com/questions/17143614/word-breakbreak-word-not-wor... we could use break-all instead of break-word ... is that a good idea?

[Stock response from Dreditor templates and macros.]

Please update the issue summary by applying the template from http://drupal.org/node/1155816.

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented

Break-all breaks words even when not needed, rather than long, non-fitting words only.

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
snapshot8.png197.22 KB

A sample of what word-break: break-all does. As you see, some other words get cut as well. If there is not working combination to reach the desired effect on FF, I would rather use break-word on Chrome only, where it works well, and leave the sticking out words at FF. I want to see, if there is something that I am missing, and if there is in fact a cure for FF as well.

See the screenshot for break-all in FF with wrong words broken in wrong places.

clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
CreditAttribution: clemens.tolboom commented
Issue summary: View changes
clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
CreditAttribution: clemens.tolboom commented

I've updated the summary by adding a word which break on d.o too.

Fixing this for firefox requires

<p style="word-wrap:break-word;">As an example for issue readers: ThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgTooThisWordBreaksOnDrupalOrgToo</p>

@alexrayu is that workable?

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
snapshot9.png91.3 KB

@clemens.tolboom - it does not seem workable (see the attached screenshot). Word-wrap: break-word works in FF, if we set this property to a div container and set explicit width to that div container, then it works. In our case, we have a table cell with a div container in some instances, and we can't always assume divs to be inside table cells.

I have looked though a few dozen threads for how to break words in FF in a smart way, but have not been successful in finding a good alternative for Chrome's word-break: break-word so far.

If we can't find a good solution for FF, would you rather have a fix work in Chrome only, or would you have a smart fix in chrome, and a fix that cuts words with word-break: break-all in FF?

Image: FF, word-break: break-all; word-wrap: break-word;

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
snapshot10.png136.81 KB

Image: FF, word-break: break-all; word-wrap: break-word;

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Issue tags: -#frontend +frontend, +CSS

Hey, thanks for this patch. This is a big improvement. I think it's important to iterate. Let's add the easy fix for chrome and come back to fix other use cases.

+++ b/core/themes/seven/install-page.css
@@ -35,6 +35,10 @@
+  /* IE and Chrome */
+  word-break: break-word;

I'm not sure if we need the comment, if you feel strongly about having it then it should go above the selector with a blank line above it as per our coding standards.

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
2278507-word-break-in-cells-13.patch438 bytes

The comment is not really needed. Here's a patch without comment.

Status: Needs review » Needs work

The last submitted patch, 13: 2278507-word-break-in-cells-13.patch, failed testing.

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
2278507-word-break-in-cells-15.patch436 bytes

Re-apply patch.

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
Status: Needs work » Needs review
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Needs review » Reviewed & tested by the community

Great! Thank you.

clemens.tolboom’s picture

clemens.tolboom
Primary language Dutch
Location Groningen, 🇳🇱/🇪🇺
CreditAttribution: clemens.tolboom commented
Status: Reviewed & tested by the community » Needs work 
+++ b/core/themes/seven/install-page.css
@@ -35,6 +35,9 @@
+  word-wrap: break-word;

Where is word-break gone?

In the preceding discussion and patch #3 and #13 @alexrayu used word-break while #15 now had word-wrap.

So please explain this change :)

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
FileSize
2278507-word-break-in-cells-19.patch437 bytes

The explanation is simple: break-word was the right one! Thanks!

alexrayu’s picture

alexrayu CreditAttribution: alexrayu commented
Status: Needs work » Needs review
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii commented
Status: Needs review » Reviewed & tested by the community

I tested this and it seems to fix the issue on Chrome and Safari. I think this is RTBC because there's no clean fix for Firefox available.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Fixed

Committed f43fb59 and pushed to 8.x. Thanks!

  • Commit f43fb59 on 8.x by alexpott: 
    Issue #2278507 by alexrayu: Fixed Apply word break to text in table...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.