468,555 Members | 2,058 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,555 developers. It's quick & easy.

Preformatted text and line wrapping

Hi

Searching for a possibility to display some text with preserved white
space and line breaks, but with long lines being wrapped, I found this
CSS declaration, which I found helpful:

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
(source: http://myy.helia.fi/~karte/pre-wrap-...-opera-ie.html)

Now if the preformatted block contains long words such as URLs, Firefox
and Internet explorer behave quite differently - FF lets them break the
element, while IE wraps at hyphens or (if there are none) just anywhere
in the text; I think both behaviours are possibly correct.

But if the preformatted block is inside a table, IE (6.0) does expand
the cell width to the with it had, if the long word was not wrapped!
Here's the test case:
http://www.markusernst.ch/stuff_for_.../pre_test.html

I assume that this is a bug in IE's own non-standard behaviour. Does
anybody know a workaround? Or is there a better way to achieve the
desired display?

(I could do the line wrapping at the server side, but this is likely to
break with differing font size or font face, specially as I will have to
define element widths in px rather than em. BTW also note that the em
width is different for the container and the pre elements in both UAs,
which is also disturbing...)

Thanks for your comments!
--
Markus
Jul 6 '06 #1
3 4666
Markus Ernst <derernst@NO#SP#AMgmx.chscripsit:
Searching for a possibility to display some text with preserved white
space and line breaks, but with long lines being wrapped,
As usual, the crucial questions are "why" and "what are you really doing".
This also resolves the issue whether this is primarily about CSS or about
HTML, so that the discussion could be kept in one group.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Interesting trickery as this might be, the question is whether you really
want all this artificial complexity. Do you really want the effect of
word-wrap: break-word on IE? Do you know what it is?
Now if the preformatted block contains long words such as URLs,
then it's probably authored the wrong way, except in the rare case where the
page is _about_ URLs (say, discussing URL syntax, with examples). URLs
belong to attributes, not to element content. They are really difficult to
handle well in line breaking.
Firefox and Internet explorer behave quite differently - FF lets them
break the element, while IE wraps at hyphens or (if there are none)
just anywhere in the text; I think both behaviours are possibly
correct.
Correct by which specification? You are throwing _nonstandard_, definitely
browser-specific CSS code at browsers, so should you be surprised when they
behave differently.
Or is there a better way to achieve the
desired display?
You haven't specified the desired display or the reason for desiring it. It
seems that you are deliberately painting yourself in the corner by wanting
preformatted text and not wanting it.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jul 8 '06 #2
Jukka K. Korpela schrieb:
Markus Ernst <derernst@NO#SP#AMgmx.chscripsit:
>Searching for a possibility to display some text with preserved white
space and line breaks, but with long lines being wrapped,


As usual, the crucial questions are "why" and "what are you really
doing". This also resolves the issue whether this is primarily about CSS
or about HTML, so that the discussion could be kept in one group.
>pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
[...]
>Or is there a better way to achieve the
desired display?


You haven't specified the desired display or the reason for desiring it.
It seems that you are deliberately painting yourself in the corner by
wanting preformatted text and not wanting it.
Thank you for those clarifications; I am sorry for not having pointed
out more clearly what it is about. Your estimation about wanting and not
wanting preformatted text is correct, anyway the definition of
"preformatted" is very strict - the idea of adding "white-space:
pre-wrap" to the CSS-3 specification shows that more flexibility here is
not only my wish.

My actual case is a form submission control tool for a web site
administrator. The form submissions are delivered to him/her by e-mail
and additionnally stored in a database. For comfortable handling the
administrator can call a page with a list of all new submissions, with
some handling options. I would like the text in this list to look
similar to the one in the e-mail:
1. no white-space collapsing
2. preserved manual line breaks
3. long lines wrapped to fit the container width
4. additionnally I want the container width not to break if a very long
"word" - such as a url - occurs (the long word may exceed the container
borders as it does in FF, anyway)

Though this (resp. points 1 to 3) looks like a quite easy task at first
sight, it seems not to be possible without server-side text
pre-processing and/or non-standard CSS trickery at second sight.

This is not crucial for my application, anyway - it's a nice add-on. But
it would just make me happy to find the best solution. I assumed that a
CSS instruction set starting with a future standard instruction would be
a nice thing, but I am really not sure about the approach to go, that's
why I posted to both the CSS and HTML groups.
Jul 10 '06 #3
Markus Ernst <derernst@NO#SP#AMgmx.chscripsit:
My actual case is a form submission control tool for a web site
administrator.
So it sounds like a general authoring issue or an HTML issue, not primarily
a styling issue. You first need to decide on the appropriate markup. You
don't want to leave anything crucial dependent on CSS, right? It's after all
just optional styling suggestions.

Thus, followups trimmed to c.i.w.a.h.
The form submissions are delivered to him/her by e-mail
and additionnally stored in a database.
So it's presumably data to be stored and inserted onto a web page, an HTML
document. Basically, it's about converting plain text into HTML. This is a
nontrivial problem, and treating the data as _preformatted_ is a rather
primitive method.
I would like the text in this list to look
similar to the one in the e-mail:
1. no white-space collapsing
2. preserved manual line breaks
3. long lines wrapped to fit the container width
4. additionnally I want the container width not to break if a very
long "word" - such as a url - occurs (the long word may exceed the
container borders as it does in FF, anyway)
That sounds like no paragraph structure and forced line breaks. It would be
better to treat input lines as paragraphs, separated by empty lines, and
generate appropriate <pmarkup. If you need something more elaborated, you
should probably ask people to send their contributions in a format that uses
simple, minimal HTML markup - and preserve that. This includes link markup
when needed. Displaying URLs in page content is ugly and reduces
accessibility.
Though this (resp. points 1 to 3) looks like a quite easy task at
first sight, it seems not to be possible without server-side text
pre-processing and/or non-standard CSS trickery at second sight.

Of course you need server-side text processing of some kind, even if that's
simple insertion. Whether it's manual or automated is a different matter.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jul 12 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

17 posts views Thread by TheKeith | last post: by
1 post views Thread by Sangeetha | last post: by
63 posts views Thread by John Salerno | last post: by
6 posts views Thread by Markus Ernst | last post: by
reply views Thread by buzzw | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.