line wrapping in <pre> formatted text 2

[kubla]

Dear All,

I've been struggling with a problem. I'm producing an online edition of an author's diary:

http://www.robertgraves.org/diary.php

Much of the diary is, like poetry or code, dependent on whitespace.

The online diary pages are being rendered dynamically by a php script and are pulled from an MySQL database.

My problem isn't the dynamics, but rather, line wrapping.

By using <pre wrap>, I can maintain the whitespace in the diary entries and have line wrapping in everything other than Microsoft's Internet Explorer. I'm aware that &quot;wrap&quot; has been depricated.

I've tested the pages in Mozilla, Netscape 4.*, Netscape 6.*, Konqueror, and Galeon and they render as intended.

Can anyone think of a way that I can maintain whitespace *and* wrap lines according to browser width?

To save anyone the trouble, yes, I've tried putting the output in a fixed-width <div> container and all that happens in IE is that lines exceed the container width and one can't even scroll horizontally to read them.

Rendering the diary entries in <textarea> is one possibility; however, some markup (such as hyperlinks and italics) are also in the text so that's not a possibility.

Can anyone think of anything else I can do?

Many thanks,

Ian

http://www.robertgraves.org

 

[xutopia]

using PHP you could use a replacement method although creating bulky HTML output could solve your problem. I do recommend you only use with cases you know are a problem as this is both CPU intensive on the server side and takes longer to download.

My brother tells me you could use this :

$strToParse = str_replace(&quot; &quot;, &quot;$nbsp;&quot;, $strToParse)

make sure to use a font though that is fixed width. Gary

http://www.xutopia.com

Haran

 

[kubla]

Many thanks for the suggestion xutopia. I played with a few options, fortunatly, I was able to parse for tabs (\t) and new lines (\n) which appears to have solved the majority of the formatting issues in the text.

I was still hoping to find a &quot;magical&quot; way of having <pre> do what I hoped it would do with IE, but to no avail. Shame.

Your brother's advice was excellent though and I've been lucky that I've been able to handle things in a slightly less processor intensive way.

The full code snippit for the function is here should anyone need to do anything similar in the future:

echo (&quot;<table>&quot;

for ($i = 0; $i < mysql_num_rows($result); $i++){

$row_array=mysql_fetch_row($result);
for ($j=0; $j < mysql_num_fields($result); $j++) {
if (mysql_field_name($result, $j) == &quot;date&quot {
echo (&quot;<tr><td><p></p><p>&quot; . $row_array[$j] . &quot;</p></td></tr>&quot; }
elseif (mysql_field_name($result, $j) == &quot;entry&quot {
$entry = str_replace(&quot;\t&quot;, &quot;&nbsp; &nbsp; &nbsp; &nbsp; &quot;, $row_array[$j]);
$entry = str_replace(&quot;\n&quot;, &quot;<br>&quot;, $entry);
echo (&quot;<tr><td><p>&quot; . $entry . &quot;</p><p></p></td></tr>&quot;
}
else {
$last = $row_array[$j];
}
}
}

echo (&quot;</table>&quot;

http://www.robertgraves.org

 

[Boomerang]

I'm not sure if it will solf your problem, but do you know the <XMP></XMP> tag.

Yes I know it's an obsolete tag. It was ment in earlyer days to show all the HTML-tags on your screen, but it also show tabs etc. It works in IE and NN as far as I know.

I didn't understand what you ment with &quot;..however, some markup (such as hyperlinks and italics)..&quot; So I don't know if just wanted to show or didn't wanted to show these tags.
The <XMP></XMP> does show these tags !!

Just give it a try,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

 

[xutopia]

thanks for the star and I like your solution better than the one I gave you.

I don't agree with Boomerang's use of older deprecated tags although it does show that he has a great knowledge of HTML and that is handy. Gary

http://www.xutopia.com

Haran

 

[tsdragon]

<pre> tags should wrap even without the &quot;wrap&quot; option, shouldn't they? I use <pre> tags now and then, but I've never seen the &quot;wrap&quot; option.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Guest_imported]

Pre tags unfortuantely don't wrap. I am having the same problem only with a JSP page.

 

[Craigieboy]

Try using regular expressions to format your text. methodtek is right <pre> doesn't wrap.

A while back I wrote a reg exp that did a count of 80 characters, looked for the next white space, then inserted a carriage return. I've looked for my code to post it for you but can't find it - sorry :-(

Regular expressions can be daunting and very confusing but once you have learned how they work they can be extremely powerful.

Learn more at

http://msdn.microsoft.com/scripting.

Click through the VBScript User's Guide to find an introduction to regular expressions.

It may just help you.

Craig

 

[SuperMail]

Hmm. I can see your point that <pre> element tags won't word wrap particularly in Internet Explorer.

Fortunately, using CSS will solve this. Here's an easy example to word wrap in <pre> tags (choose 1 of 2 easy ways I will demonstrate, but there are lots of ways to use CSS though! such as the use of classes):

1.

<pre style=&quot;word-wrap:break-word&quot;>This is preformatted text that can word wrap</pre>

2. Put those <style> tags within the <head> elements

<style type=&quot;text/css&quot;>
pre {word-wrap:break-word}
</style>

And everytime you write <pre>...</pre> tags in the <body> element, it will always word-wrap

<pre>This is performatted text that can word wrap</pre>

-- SuperMail.

 

[Guest_imported]

You can also use the wordwrap function in PHP:

$wrtext=wordwrap($text,80,&quot;\n&quot;,1);
echo &quot;<pre>$wrtext</pre>&quot;;

Bariho

 

[sono]

Anyone come up with another CSS strategy to get wrapping?

<pre style=&quot;word-wrap:break-word&quot;> mentioned above by SuperMail doesn't work. I'm still looking for a way.

 

[xutopia]

http://www.w3.org/TR/REC-CSS2/text.html#propdef-white-space

I found this. Maybe it can come in handy. Gary

http://www.xutopia.com

Haran

 

[SuperMail]

<pre style=&quot;word-wrap:break-word&quot;>

CSS word wrapping style may not always work such as the above code is placed in a table cell as I've done it before which has no effect.

To overcome this, I put a CSS style with it (for example):

width:500px

so that the full CSS style for a table cell is:

<pre style=&quot;word-wrap:break-word;width:500px&quot;>

so that this effect will always word wrap after the 500th pixel in the table cell (from my opinion) and all formatting are perserved.

Good Luck.

SuperMail

 

[sono]

Thanks again SuperMail very much for posting. I tried several variations on your code and none of it both wraps and preserves formatting with any EI 5.0 browser I tested. Please send a sample of what you know to work.

Thanks.

O

 

[SuperMail]

Hmm. That's a bit strange, because I know it works, at least in Internet Explorer 6.

Documentation for the wordWrap property is at:

http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/wordwrap.asp

I have discovered that this property is supported in IE5.5 or above. (Found in the above link under the subheading called &quot;Applies To&quot; then I saw Version 5.5)

Example I tested for IE6:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>Word Wrap Example</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
</head>

<body>
<pre style=&quot;word-wrap:break-word&quot;>1111111111 1111111111111111111111 11111111 11111111 111111111111111111111111111 11111111111111111111111111111111 11111111111111111111 11111111111111111111 11111111111111 1111111 11111 111111 111111 11111
22222
3333333
444444
55
6666666666666 66666666666666 6666666666 6666 66666666 66666 666666666 66666666666 6666 6666


777777777</pre>
</body>
</html>

For it to be performatted and wordwrapped in a table cell,
include the width property such as 500px:
<pre style=&quot;width:500px&quot;>Test</pre>
It seems that the wordwrap property has no effect in a table cell so a cell width (using CSS) will compensate for this.

Good Luck.

SuperMail