473,320 Members | 2,202 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 4897
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Ian Ward | last post by:
I hope to add support for multi-byte encoded and bidirectional text to my curses-based UI library: http://excess.org/urwid/ I would like to support whatever encoding the user likes. Are there...
2
by: Danny F | last post by:
Is it possible to have line feeds/breaks automatically entered when the text wraps to a new line? I am using a <textarea> input on a form and using the <pre> tag when displaying the text to a html...
1
by: Colin Thomas | last post by:
Hey, I am having an issue where I need to display preformatted text (already has the <pre> tag) within a area that I designate with stylesheets. How can I get the area specified in a css class...
17
by: TheKeith | last post by:
Isn't there a style for preformatted text, instead of having to use the pre tags? Help would be appreciated--thanks.
1
by: Sangeetha | last post by:
I have a datagrid column which I want to expand when i type in some text. Initially I tried increasing the column width on the key down event of that DataGridTextBoxColumn, but it didn't work out as...
63
by: John Salerno | last post by:
I know there's a request for a good IDE at least once a week on the ng, but hopefully this question is a little different. I'm looking for suggestions for a good cross-platform text editor (which...
6
by: Markus Ernst | last post by:
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 {...
2
by: davidcm | last post by:
Last week, I found some code on-line that allows me to send email via SMTP from my VB 6.0 application. I had to add the Winsock control to the project and add the code that performs the SendData...
0
by: buzzw | last post by:
Hi I have a wraptext procedure which accepts input text and fits it within given output length . Following is my test script Accept line Prompt 'enter text : ' Accept len prompt 'enter length...
4
by: Mudcat | last post by:
I've tried quite a few things to get this correct but have hit a couple of sticking points that I can't figure out. I need to ge the Text box to function like the 'wraplength' option in a Label. ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.