Closed Bug 99457 Opened 23 years ago Closed 16 years ago

Support CSS3 'word-wrap' property (breaks long lines)

Categories

(Core :: Layout: Text and Fonts, enhancement)

enhancement
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla1.9.1a1

People

(Reporter: caillon, Assigned: smontagu)

References

(Depends on 1 open bug, Blocks 5 open bugs, )

Details

(Keywords: css3, intl)

Attachments

(7 files, 7 obsolete files)

3.12 KB, text/html
Details
182.31 KB, image/png
Details
3.01 KB, text/html
Details
4.46 KB, text/html
Details
7.86 KB, patch
Details | Diff | Splinter Review
18.71 KB, patch
dbaron
: review+
dbaron
: superreview+
Details | Diff | Splinter Review
24.45 KB, patch
roc
: review+
Details | Diff | Splinter Review
With bug 22022 fixed, things look much better for view source when wrap is on.

However, it would be great if we didn't have to scroll horizontally at all.  
Bugzilla's main page is a great example of this with a huge URL right in the
middle of the page (View Bugs Already Reported Today). Scrolling horizontally to
see the whole URL defeats the purpose of the wrap IMO.

Doron asked me to CC some people from 22022.
Should -moz-pre-wrap break up long lines?  I don't think it should, any more
than 'white-space: normal' should.  I think this would also break other uses of
-moz-pre-wrap (e.g., textareas and plaintext mail compose), and it would also
probably differ from the description in the CSS3 spec, which I hope will include
a value equivalent to -moz-pre-wrap.
And, FWIW, this is a Layout bug, and requires perhaps nontrivial implementation
work there.  Right now the values of 'white-space' can be put in a simple grid:

'normal'          'nowrap'
'-moz-pre-wrap'   'pre'

and you're suggesting that the grid should look like:

                  'normal'          'nowrap'
'-moz-pre-wrap'                     'pre'

which suggests to me that what you really want is a new value, or perhaps two
new values, rather than a change to '-moz-pre-wrap'.
Assignee: dbaron → attinasi
Component: Style System → Layout
QA Contact: ian → petersen
Whiteboard: INVALID/WONTFIX?
This bug looks like another bug that will be sitting here dormant (like the 
recently fixed bug 22022 -- note the low number). So if someone is interested to 
pick up the torch, here are some starting points:
- you will need to hack a new value (since -moz-pre-wrap has other uses) 
- you will need to handle a new mode for the linebreaker/wordbreaker so that 
breaking can occur with other characters such as '&' (like Nav4.x when pasting a 
long url in bugzilla comments). See nsTextTransformer.cpp which relies on
nsILineBreaker/nsIWordBreaker which are where to really effect the changes
while making sure not to break words unnecessarily (especially intl words). The 
core layout code itself won't need major changes except to append your new wrap 
value in the appropriate places where wrapping is tested, but note that it will 
make view-source with wrapping even slower because more words would have to be 
measured.

(PS: I am often amazed at the RFEs pertaining to view-source.)
Keywords: intl
I have no problem with a totally new value(s). Maybe this bug really should be
changed to reflect that. No idea with what it would be called though.

My point is that if wrap is on, it seems stupid to still have to scroll
horizontally, regardless of the way the W3C defined CSS values handle it.  Many
word processing programs wrap long lines and it makes a lot of sense to me.
Summary: white-space: -moz-pre-wrap; should break up long lines → RFE: white-space: -moz-pre-force-wrap that always breaks long lines
Whiteboard: INVALID/WONTFIX?
Note that maybe this wrap value could be used for textareas.... this would solve
the "NS and IE soft wrap in the middle of a word in textareas" bugs we have
filed (I can dig up bug #s if need be).
Blocks: 71549
As I understand it, btw, there are two possible keywords that should be supported
here. One should forget about doing word wrapping, but wrap at the end of the 
line whatever happens, a bit like with overflow on a console, and the second 
should wrap as normal *except for words longer than the line*, for which it 
should break the word at the end of the line.

   +-------------+
   |This is an ex|
   |ample of the |
   |first type, w|
   |ith each wrap|
   |ped word cut |
   |off...       |
   +-------------+
   +------------+
   |...and this |
   |is an       |
   |example of  |
   |the second  |
   |type, with  |
   |an          |
   |eeextrrreeee|
   |emmely long |
   |word.       |
   +------------+

The first would be used for a forced wrap <pre>, presumably, and the second would
be used for Chatzilla, again presumably.

When implementing this, it might be wise to implement it as four separate axes, 
as this is roughly how CSS3 will probably approach it:

   'wrap-option':
      no-wrap | wrap | emergency | width

   'linefeed-treatment':
      auto | ignore | preserve | treat-as-space | treat-as-zero-width-space

   'space-treatment':
      ignore | preserve | ignore-if-before-linefeed | ignore-if-after-linefeed | 
      ignore-if-surrounding-linefeed
   'white-space-treatment':       preserve | collapse
The 'white-space' keywords would then map as follows:

white-space wrap-option linefeed-treatment space-treatment white-space-treatment  
normal      wrap        auto               preserve        collapse
nowrap      no-wrap     auto               preserve        collapse
pre         no-wrap     preserve           preserve        preserve-m-p-w (1) 
wrap        preserve           preserve        preserve
-m-... (2)  emergency   preserve           preserve        preserve
-m-... (3)  width       preserve           preserve        preserve
...where (1) is -moz-pre-wrap, our existing extension, (2) is the extension
required for Chatzilla (as I understand it) and (3) is the extension required for
breaking <pre> blocks at the width, regardless of word wrapping.
No longer blocks: 71549
(speaking of wrapping, I guess something is awry with this build...)
Blocks: 71549
Blocks: 56652
Blocks: 92851
Target Milestone: --- → Future
Blocks: 50633
Blocks: 116225
*** Bug 146703 has been marked as a duplicate of this bug. ***
*** Bug 146741 has been marked as a duplicate of this bug. ***
*** Bug 147127 has been marked as a duplicate of this bug. ***
Adding self to CC and hoping to God this issue is finally fixed before a release
to general public :-)
Blocks: 91662
dbaron: I find it annoying that Mozilla's textareas don't force-wrap long words
such as URLs.  Are you sure we can't just change the behavior of -moz-pre-wrap?
I find it incredibly useful, since it allows pasting of long URLs into bugzilla,
which 4.x did not.
Mozilla should display textarea contents hard-wrapped but submit them the same
was it does now.  IE gets it right, making it easier to include links in
Slashdot comments.
Jesse argue that "Mozilla should display textarea contents hard-wrapped".

This comment is about long normal text and I think long URL's may be different
problem.

I will suggest that Mozilla should at least offer the possibillity to wrap text
at windows width, like some editors e.g. UltraEdit does. In order to see the
need for such a function please check out the following link and SCROLL DOWN TO
THE TEXT "Sir,I have both the cds".
http://groups.google.com/groups?q=%22Sir,I+have+both+the+cds%22&hl=en&lr=&ie=UTF-8&oe=UTF8&selm=20011205015009.0E1083FEBF%40listman.redhat.com&rnum=1
I agree with Comment #13, wrapping URL's is not fun. My eMail program does that,
and I hate having to copy and paste several times to get the entire URL into the
window.

However, as this bug is blocking v1.1 (via Bug #91662), some action is required.
For the record, here is the proposed CSS3 spec about this feature:
http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-wrapping

In the terminology of CSS3, this bug is equivalent to:
|wrap-option: emergency|
add CSS3 property to summary, reassign
Assignee: attinasi → font
Component: Layout → Layout: Fonts and Text
Keywords: css3
QA Contact: petersen → ian
Summary: RFE: white-space: -moz-pre-force-wrap that always breaks long lines → white-space: -moz-pre-force-wrap (CSS3 wrap-option: emergency) that always breaks long lines
Blocks: 221320
*** Bug 232547 has been marked as a duplicate of this bug. ***
The CSS3 module where 'wrap-option' is in, is now CR. If we want to solve these
issues, we need to support it according to the specification.
Keywords: css-moz
Summary: white-space: -moz-pre-force-wrap (CSS3 wrap-option: emergency) that always breaks long lines → Support wrap-option
Summary: Support wrap-option → Support wrap-option (breaks long lines)
Flags: blocking1.8a1?
Flags: blocking1.8a1?
This would be useful to use in place of wrap=hard on Bugzilla someday (bug 11901)
Looking at the spec longer, I don't know if this will replace wrap=hard. Will it?

http://www.w3.org/TR/css3-text/#wrap-option

The information here is confusing. Does wrap insert hard breaks or not?
(In reply to comment #23)
> Looking at the spec longer, I don't know if this will replace wrap=hard. Will it?
> 
> http://www.w3.org/TR/css3-text/#wrap-option
> 
> The information here is confusing. Does wrap insert hard breaks or not?

wrap is an attribute of a textarea.  

This bug is about creating/implementing a new css attribute, that would apply to
all elements. Totally different things.
There are no such things as css attributes. They are called properties.
Attributes are for HTML tags. And I know what I was asking about. If you do not
know the answer to the question I seek an answer for, please don't respond. If
you have questions about what I mean in my comment, then email me privately.
(In reply to comment #23)
> Looking at the spec longer, I don't know if this will replace wrap=hard.
> Will it?
> 
> http://www.w3.org/TR/css3-text/#wrap-option
> 
> The information here is confusing. Does wrap insert hard breaks or not?

The 'wrap-option' property, like all W3 CSS properties, is only intended to
control the presentation of content, not what goes into the content itself.

My interpretation of how the 'wrap-option' property and the <textarea> wrap
attribute should interact is as follows:

1) The default value of 'wrap-option' for a <textarea> should depend upon the
value of its wrap attribute:
  textarea[wrap=off] { wrap-option: no-wrap }
  textarea[wrap=soft] { wrap-option: wrap }
  textarea[wrap=hard] { wrap-option: wrap }

2) Whether rendered line breaks are transmitted upon submittal as line break
characters is dependent upon the value of the wrap attribute.  If wrap is off or
soft, rendered line breaks that may be generated to wrap the line in accord with
the wrap-option property are not transmitted.  If wrap is hard, such rendered
line breaks are transmitted.

Thus, the wrap-option CSS property in my opinion does not replace the <textarea>
wrap attribute.
Ernest: Thanks. Yes, that does makes sense, sorta. So perhaps the linefeeds are
CSS generated content that apply only for presentation. Maybe I misintrepreted
Hixie's test on http://www.hixie.ch/tests/evil/mixed/wraptextarea.html to mean
that the formatting applied from the CSS property white-space (and other CSS
properties) would also be submitted with the form. It seems like the same sort
of thing. Argh, everything within the text module seems to make sense until you
start talking about forms.

I think there should be some note on http://www.w3.org/TR/css3-text/ saying that
these properties don't apply to what's submitted and to use the Web Forms
recommendation instead for that purpose.

Hixie: Thank you for the link. It seems like that's what we are looking for.
In response to comment #16:
> I agree with Comment #13, wrapping URL's is not fun. My eMail program 
> does that,  and I hate having to copy and paste several times to get 
> the entire URL into the window.

Thanks to Akkana Peck, I am among the few who know about the following
obscure incantation:

    user_pref("editor.singleLine.pasteNewlines", 3);

If this were made less obscure, there would be one less argument in
favor of preserving long lines.
*** Bug 278374 has been marked as a duplicate of this bug. ***
*** Bug 295376 has been marked as a duplicate of this bug. ***
http://www.w3.org/TR/css3-text/#changes :
"The 'wrap-option'  property has been replaced by the 'text-wrap' and
'word-break' property."

http://www.w3.org/TR/css3-text/#text-wrap
http://www.w3.org/TR/css3-text/#word-break
*** Bug 332445 has been marked as a duplicate of this bug. ***
No, actually, it's been replaced with the word-wrap and text-wrap properties.
For this bug report it seems word-wrap is wanted.

http://www.w3.org/TR/css3-text/#word-wrap
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordwrap.asp
Summary: Support wrap-option (breaks long lines) → Support word-wrap (breaks long lines)
*** Bug 349142 has been marked as a duplicate of this bug. ***
*** Bug 355855 has been marked as a duplicate of this bug. ***
*** Bug 361141 has been marked as a duplicate of this bug. ***
Well, although CSS Text Level 3 is in Working Draft stage, are we able to do something with 'word-break' and 'word-wrap' without extensions?
Shouldn't this be marked parity-IE6?

See http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

---

@oueki

I believe what you're asking is whether it can be implemented in Firefox before it becomes a recommendation? If so, the answer is yes. It can be implemented as -moz-word-wrap. Take a look at -moz-outline, etc.
(In reply to comment #39)
> I believe what you're asking is whether it can be implemented in Firefox before
> it becomes a recommendation? If so, the answer is yes. It can be implemented as
> -moz-word-wrap. Take a look at -moz-outline, etc.

Yes, I think it's easy to be implemented them as '-moz-word-wrap' and '-moz-word-break' for Firefox.
(But it won't be implemented them before Fx 4.0, even 5.0, I afraid.)
They are important for textareas and all the block elements.
Who can implemented them as '-moz-word-wrap' and
'-moz-word-break'?
This bug has been running since 2001 - why isen't it fixed yet?
Because nobody's deemed it high enough priority to fix it versus the other bugs needing to be fixed. If you feel that it needs to be fixed, you have the power to make it so! Download the source and hack away! I'm sure one of the layout peers would be happy to review a patch if one should come along.
Thanks for your explanation - don't know how this work. I would love to help, but sadly I doesn't have that kind of skills.

Is there some kind of community where we web developers can communicate what we need from Firefox - maybe help change the focus on what's important?
Assignee: layout.fonts-and-text → smontagu
Flags: wanted1.9.1?
Target Milestone: Future → mozilla1.9.1a1
Attached patch Patch v.1 (obsolete) — Splinter Review
This works quite nicely, but it produces a kind of newspaper column style break, which I'm not sure is exactly what the spec has in mind. It probably also needs some extra tweaking to avoid breaks in certain places, e.g between text and punctuation.
Attached file Another testcase (obsolete) —
I don't think this is correct. The spec says
"An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line."

But this will break at an arbitrary point even if there are otherwise-acceptable break points in the line.

Fixing that is a little tricky with our current inline layout model. You would need to modify nsLineLayout::NotifyOptionalBreakPosition to indicate the priority of the break opportunity and not allow it to override a high-priority opportunity with a lower priority opportunity. You might also need to modify the logic around DoReflowInlineFrames and its callees, where we decide whether to go ahead and place the line where it is or move it below a float. I'm not sure whether a line next to a float that has overflows and has word-wrap:break-word should break or move down.

I actually had a crack at this recently and gave up when it looked really hard. But now that I look again it's not as hard as I thought, the above approach should work.

Thanks for taking this on! It's needed.
BTW I think this should lose the vendor prefix. AFAIK IE and Webkit already implement this without a vendor prefix so we might as well too.
Another thing which is probably wrong here is setting the TEXT_ENABLE_WORD_WRAP flag on the text run, rather than testing style per frame.
(In reply to comment #52)
> I don't think this is correct. The spec says
> "An unbreakable "word" may be broken at an arbitrary point if there are no
> otherwise-acceptable break points in the line."
> 
> But this will break at an arbitrary point even if there are
> otherwise-acceptable break points in the line.

I suppose what I actually implemented was "text-wrap: unrestricted" :)
(In reply to comment #54)
> Another thing which is probably wrong here is setting the TEXT_ENABLE_WORD_WRAP
> flag on the text run, rather than testing style per frame.

Yeah definitely.
(In reply to comment #52)
> Fixing that is a little tricky with our current inline layout model. You would
> need to modify nsLineLayout::NotifyOptionalBreakPosition to indicate the
> priority of the break opportunity and not allow it to override a high-priority
> opportunity with a lower priority opportunity.

We want that anyway for bug 389710, right?
Depends on: 389710
Yes, but for bug 389710 we want something more complex. Here we just need two levels but in bug 389710 we need to choose a punctuation break over a whitespace break if the whitespace break is "too far away". I'd start with this since it's simpler and then add 389710 on top, unless you want to do them both together.
I also notice that IE and Webkit don't display a hyphen when breaking words. To my eyes it looks a lot better with the hyphen (apart from making it much easier to implement by leveraging the existing code for soft hyphens), and the spec doesn't say anything either way, unlike with text-wrap. Do we want to be consistent with the existing implementations?
I agree, there should NOT be a hyphen.  It seems to me that the long word
is almost always a URL.  Whether it is re-assembled automatically when 
pasted into the location bar, or done manually, the hyphens would get in 
the way and likely lead to errors.
That may be why IE and Webkit do it without hyphens, so it's not just a 
matter of consistency.
(In reply to comment #61)
> Whether it is re-assembled automatically when 
> pasted into the location bar, or done manually, the hyphens would get in 
> the way and likely lead to errors.

That at least is not a reason for removing the hyphens. They are only present in the display, and disappear when copying and pasting.
Note that the words on CJ context don't need hyphens at breaking a word, so, we don't have to add hyphens to there. (If the automatically hyphenation is needed, we should propose a new value for word-wrap.)
CJK doesn't matter here since there are first-class line break opportunities between the CJK words. Auto-hyphenation is a separate issue which already has its own CSS3 property.

The reason to not show a hyphen is mainly consistency with other browsers. But also, a hyphen might be inappropriate since we have no idea what sort of text is being broken here. In the URL example, a hyphen might not cause a serious problem, but it could feel odd.

Simon, I suggest we proceed without a hyphen and if you feel strongly about it, start a discussion on www-style and see if you get can support for a hyphen from other browsers.
Attached patch Patch v.2 (part 1) (obsolete) — Splinter Review
I'm splitting the patch into two parts. This part contains all the infrastructure for the new CSS property, so as not to carry it over from version to version. It passes the mochitests in layout/style/tests.
Attachment #328986 - Attachment is obsolete: true
Attached patch Patch v.2 (part 2) (obsolete) — Splinter Review
This part is the implementation, and is still somewhat w-i-p
Attachment #328988 - Attachment is obsolete: true
Attachment #328989 - Attachment is obsolete: true
Well,what about textarea using this patch?
Attached file CTL testcase
Tests that words don't break in mid-cluster and shaping works across word breaks.
(In reply to comment #70)
> Well,what about textarea using this patch?

What are you asking? The patch works nicely with textarea with word-wrap: break-word specified. It doesn't add that to the default style for textarea, but maybe it should.
AFAICT IE and Webkit both behave as if |word-wrap: break-word !important| is set for textarea.
(In reply to comment #68)
> Created an attachment (id=329459) [details]
> Screenshot of attachment 329458 [details] with the patch

This screenshot shows all "long" words starting on a new line.
Is this a requirement?
At least in this example, where the text is justfified, it results
in sometimes large amounts of empty space.

Would it be possible to allow long words to start anywhere?
It seems to me that would be preferable.  Am I missing something?

Long words starting on a new line follows from the specification that 'an unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line'. The space before the long word is an acceptable break point, so the line breaks there.

As I said already in comment 55, breaking in mid-long-word and not before it is "text-wrap: unrestricted". I plan to implement that right after this in a new bug.
Attached patch Part 2 updated (obsolete) — Splinter Review
Attachment #329457 - Attachment is obsolete: true
Attachment #330601 - Flags: superreview?(roc)
Attachment #330601 - Flags: review?(roc)
Attached patch TestsSplinter Review
Attachment #329454 - Flags: superreview?(roc)
Attachment #329454 - Flags: review?(roc)
Comment on attachment 329454 [details] [diff] [review]
Patch v.2 (part 1)

>-[scriptable, uuid(529b987a-cb21-4d58-99d7-9586e7662801)]
>+[scriptable, uuid(216343fe-4e61-11dd-9843-001485f1fdbb)]
> interface nsIDOMCSS2Properties : nsISupports

You should bump the IID of nsIDOMNSCSS2Properties, not nsIDOMCSS2Properties.

>+           attribute DOMString        wordWrap;
>+                                        // raises(DOMException) on setting
>+

Could you add to the end of the interface rather than the middle?


This property is already supported un-prefixed by IE, right?  Does IE support the same set of values?
> Could you add to the end of the interface rather than the middle?

Isn't the interface sorted by category? I put it in the section marked /* CSS3 properties */

> This property is already supported un-prefixed by IE, right?  Does IE support
> the same set of values?

Yes and yes. http://msdn.microsoft.com/en-us/library/ms531186.aspx
(In reply to comment #79)
> > Could you add to the end of the interface rather than the middle?
> 
> Isn't the interface sorted by category? I put it in the section marked /* CSS3
> properties */

It's not particularly well-sorted, and the categories aren't always particularly clear.  We've been adding new ones to the end (mostly, at least).
Attachment #329454 - Attachment is obsolete: true
Attachment #329454 - Flags: superreview?(roc)
Attachment #329454 - Flags: review?(roc)
Attachment #330642 - Flags: superreview?(roc)
Attachment #330642 - Flags: review?(roc)
Attachment #330642 - Flags: superreview?(roc)
Attachment #330642 - Flags: superreview?(dbaron)
Attachment #330642 - Flags: review?(roc)
Attachment #330642 - Flags: review?(dbaron)
This approach is good, but it needs some solid documentation describing how it works. Certainly we need some documentation for gfxBreakType.

I don't think we should have GetBreakPriority --- just use GetLastOptionalBreakPosition, which is more descriptive as well.

Other than that, it looks great.
Comment on attachment 330642 [details] [diff] [review]
Part 1, addressing David's comments

r+sr=dbaron
Attachment #330642 - Flags: superreview?(dbaron)
Attachment #330642 - Flags: superreview+
Attachment #330642 - Flags: review?(dbaron)
Attachment #330642 - Flags: review+
Attachment #330601 - Attachment is obsolete: true
Attachment #330601 - Flags: superreview?(roc)
Attachment #330601 - Flags: review?(roc)
Attachment #330755 - Flags: superreview?(roc)
Attachment #330755 - Flags: review?(roc)
Attachment #330755 - Flags: superreview?(roc)
Attachment #330755 - Flags: superreview+
Attachment #330755 - Flags: review?(roc)
Attachment #330755 - Flags: review+
Pushed on trunk. http://hg.mozilla.org/index.cgi/mozilla-central/rev/3cf51abb4040
Status: NEW → RESOLVED
Closed: 16 years ago
Resolution: --- → FIXED
Blocks: 447767
Depends on: 447776
Depends on: 447783
Depends on: 447884
Summary: Support word-wrap (breaks long lines) → Support CSS3 'word-wrap' property (breaks long lines)
Blocks: 449555
Depends on: 453468
Depends on: 453471
Flags: wanted1.9.1? → wanted1.9.1+
Depends on: 455473
wordwrap-02.html now passes with Pango and
wordwrap-03.html now passes with Pango and on WINNT 6.1.
Also marked wordwrap-02.html fails on other platforms so we know when it starts to pass.
http://hg.mozilla.org/mozilla-central/rev/cd4ca07f77a8
Flags: in-testsuite+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: