Ultimate <pre> tag & text wrap query [Archive] - HTML Forums

View Full Version : Ultimate <pre> tag & text wrap query

JinjaNinja

12-23-2003, 10:48 AM

Hello HTML Forums! This is my first post - everyone say "ahhhh"!

I am trying to get my text to wrap within a <pre> tag and cannot. I have trawled this forum for answers and there have been many similar posts with some useful solutions. Those that I found I have tried but with no luck.

My problem:
I am maintaining a site that uses FrontPage components. I have never used them before and find them more than a little annoying but hey ho I must do my job.

The component is simply pulling out fairly large text field from the database and inserting it in the webpage. I need to use the <pre> tags around the text so that the format of the stored database text is recreated on the webpage, but I also need long lines of text (i.e. paragraphs with no linebreaks) to wrap! They currently continue off the right hand side of the page until a CrLf is met.

I have tried putting it within a table cell and limiting the width property. This doesn't work.
I have tried using style sheets to limit the size of a multitude of tags (including the <div> tag) - none of them work.
I have tried this bit of VBScript code too (as suggested by other posts from this forum):
<%
summary = FP_Field(fp_rs,"fldContactStatusSummary")
summary = replace(summary,chr(13) & chr(10),"<br>")
Response.Write(summary)
%>

I have also tried using "vbCrLf" instead of "chr(13) & chr(10)" - none of this worked: the text would never wrap.

I'm a bit suspicious that the VBScript didn't work. Hmmm...

:confused:

All the time I have kept the database text inside the <pre> tag. It looks like I can't have my cake (preformatted text) and eat it (wrap the damn text).

Of course, if I remove the <pre> tags then all the text is one long string (that easily wraps) without the spaces and line feeds that are essential.

I have also tried the XMP, SAMP, tt and CODE tags all without luck. The "width" property of the <pre> tag apparently doesn't happen to be implmented in browsers yet - that would have been perfect, but nooooo, it's never that simple.

Please - can anyone help? I have explained this at length so as to show you all the angles I have been trying - any ideas please??

Thanks in advance,
Jinj:(

JinjaNinja

12-23-2003, 10:50 AM

Ooops... please excuse the bad use of the "code" tags in above post!

Spot the newbie...

Jinj

scoutt

12-23-2003, 11:14 AM

welcome to the forums JinjaNinja,

do you have a test page for us to look at?

agent002

12-23-2003, 11:14 AM

As first, ahhhhhh! :D

VBScript is IE-only and I recommend you to try JavaScript instead. I'm sorry that I wasn't able to try this code but
I hope that it works.

<html>
<head>
<title>Document title...</title>
<script type="text/javascript"></script>
</head>
<body>

<pre id="c">Pre text here...</pre>

</body>
</html>

Good luck :)

Horus_Kol

12-23-2003, 11:17 AM

<PRE> is for preformatted text.

basically, it is used to display the text precisely as it is written in the text file.

more information about <PRE> (http://htmlhelp.com/reference/html40/block/pre.html)

the width attribute is deprecated - so it is not longer valid! - have you tried using stylesheets to specify a width:

<pre style='width : 100px'>

what does the source HTML look like when you view it in the browser (ie, after all scripts and stuff)?

agent002

12-23-2003, 11:28 AM

Originally posted by Horus_Kol
basically, it is used to display the text precisely as it is written in the text file.
Grrreat! I knew I forgot something. So it will show my <br>s too.

Horus_Kol

12-23-2003, 11:47 AM

not sure - that source of mine says that <pre> can contain inline elements, except for some. <br> didn't appear on the banned list.

JinjaNinja

12-23-2003, 11:55 AM

Wow - nice quick responses - thanks a lot!

Firstly, Horus_Kol, I knew the width property of <pre> was depreciated, but I was desperate! Oh the shame!! And I did try stylesheet widths - see my post! I know, it is long and booooring...
As for this:
what does the source HTML look like when you view it in the browser (ie, after all scripts and stuff)?
I have put a long string of random characters (with just TWO linebreaks - so I know the preformatting is still there) into the database to test all my attempts at solving this. If the long string (in <pre> tags) wraps, then I will know I have cracked the problem. However, it never has, it just continues on and on off the right side of the screen. When I look at the HTML with "View Source" the formatting is there as expected, but notepad happilly wraps the long line!! Damn you notepad - damn you to heeeeeelll.

Agent002 - I will try that code (after Xmas - hurrah!!) and repost on this thread with the results.

Scout - I don't have a test page yet. I have tried explaining this as much as possible so I dont need a test page - Please help Scout!

Anymore ideas guys/gals?

Jinj

scoutt

12-23-2003, 12:04 PM

I would love to help but without seeing code it is almost impossible. it maybe soemthing you are doing or it maybe something we don't know you are doing.

you say long line of text, you mean

fjdkljfsdklfjdskafj;dkafl;jdkaf;jdkalf;d

example :P

so the text has not white space?

JinjaNinja

12-23-2003, 12:15 PM

Yeah, I know Scout - I'm just in a rush it being nearly xmas and all that. I will try and post more detailed code.

Here is the test text (formatted as it should be):

File Status

FIRST PARAjjnxsl,jB,n,m,,n,n,lnllhnl,x...

SECOND PARAasssssssssssshipoyjfgihbvnojbb...

The two long lines go much longer than that by the way.

The code is basically:

<pre>

<%=FP_Field(fp_rs,"fldContactStatusSummary")%>

</pre>

Does this help at all?

Jinj

scoutt

12-23-2003, 01:00 PM

well that is the problem.

you have to run some serverside code to break the string text. you have to count the length and break it when you want.

nothing in html can break it.

Willy Duitt

12-23-2003, 01:58 PM

Try loading your summary value into a hidden input first.
From there do a global search to replace each null line with <br>'s
to maintain the formatting and display this result where you want it.
(my example uses a span)

<BODY>
<form name="F1" action="">
<input name="H1" type="hidden">
</form>
<span id="S1"></span>
<script type="text/javascript">
function format() {
document.F1.H1.value = summary;
document.getElementById("S1").innerHTML=document.F1.H1.value.replace(/\n/g, "<br>");
}
format()
</script>

.....Willy

Horus_Kol

12-24-2003, 04:37 AM

Jinja,

I'm sorry, but I didn't see you mention CSS or style, so I assumed you were using the deprecated attribute.

still, looks like Scoutt found your problem.

hope it's all fixed for you now,

HK

JinjaNinja

12-24-2003, 06:10 AM

Thank you everyone! I will try the solutions you have offered and post any more problems (hopefully no more!).

Merry Christmas everyone! Thanks again...

Jinj

JinjaNinja

01-12-2004, 07:11 AM

Happy New Year to you all!

I have tried using the Agent002's JavaScript solution and it seems to be going in the right direction.

I wanted to change the code to do a few more things and this is what I came up with:

<script type="text/javascript">

</script>

But I get an error: "Object Expected, Code: 0" - whatever that means... It flags the beggining of this line:
var r = '';

I can't see any problems on that line or the previous or next lines either - but then I'm new at all this so I have probably missed something obvious.

Please help!

Horus_Kol

01-12-2004, 07:14 AM

var t = document.getElementById('pretxt').innerHTML;

the error is probably in here.
is there an element in your page with an ID attribute set to 'pretxt'?

JinjaNinja

01-12-2004, 07:57 AM

Yes, I have the following code further down the page:

<pre id="pretxt">yada yada yada</pre>
Let me point out that the code offered by Agent002 worked and it is what I have based my alterations on.

Agent002's code:

<script type="text/javascript"></script>

I will also point out that the following errors were highlighted by Netscape 7.1 (by typing "javascript:" in the address bar):

Error: document.getElementById("pretxt") has no properties
Error: indexOf is not defined

Erm - how do I sort these out?! Or are they symptomatic of an unseen problem?

Over to you, gentlemen...

JinjaNinja

01-12-2004, 08:20 AM

Ok, ok... school-boy error.

I noticed I hadn't been using my dot-notation properly.

The "indexOf" and "substring" methods all need a string object to work on of course, and that's what i was missing.

So I added the approriate "t." and "r." where necessary. My new code looks like this:

<script type="text/javascript">

</script>

Now my page just hangs - so I think my logic is wrong. Can anyone spot anything? Please help - I'm getting desperate...

Jinj

ucm

01-12-2004, 08:41 PM

the while loop will cause your page and browser to hang if it gets stuck in an infinate loop...

the while conditional statement [while(t.length > 0)] is the issue...

t is a string that you plan to store the finished line broken innerHTML content ( or text ) from the pre tag but if the length of string 't' is greater than zero then the while won't exit...

try changing it to :

var exitCondition = false;
while(exitCondition != false){

...
...
...

NOTE: and at the code:
err_wnd = window.open('', 'error', 'width=50, height=60, resizable=no, scrollbars=no' );
err_wnd.document.write( 'Else condition!<br>VAR brk = ' + brk );
err_wnd.document.write( '<br>VAR cols = ' + cols );

put somewhere in there this:

exitCondition = true;

that should fix it...

although another way of doing the same thing as that would be to make it:

var brk = 0;
while(brk > -1){

...
...
...

NOTE: and at the code:
err_wnd = window.open('', 'error', 'width=50, height=60, resizable=no, scrollbars=no' );
err_wnd.document.write( 'Else condition!<br>VAR brk = ' + brk );
err_wnd.document.write( '<br>VAR cols = ' + cols );

you shouldn't 'need' to put this somewhere in here, but i would just in case some browser somewhere decides to :make brk null or isnothing

brk = -1;

although what you're going for is a very interesting idea to me... hmmmmm * thinks *

[ Although, normally i'd be in agreement with scoutt on this one in the respect of you using server-side script to break up the lines before it print's/echo's the data to the user's browser... but that's if you're not at all concerned with bandwidth or server processing power ( like if you got a dual xeon server with just a few dozen users )... however, if you have like a single pIII server with a few thousand users; spreading the processing power to their local comupters break up the data would save a great deal on 'server' processing power and also save a little ( or a modest amount ) on bandwidth which would provider greater efficiency ]

JinjaNinja

01-13-2004, 07:33 AM

Thank you UCM!
Yeah - it does seem to get stuck in an infinite loop. First off though, my t string is actually the original string read in from the database - it is chopped up into nothingness by my script and the result (including relevant <br> tags) is shoved into the result string r - or at least that is what is meant to happen! I thought that eventually the string t would always get chopped up to zero length - but that appears to be a dangerous (i.e. WRONG!) assumption. :doh:

I will take your advice and use a dropout variable such as "exitCondition" - good idea, thanks!

var exitCondition = false;
while(exitCondition != false){
...
...
exitCondition = true;
}

although what you're going for is a very interesting idea to me... hmmmmm * thinks *
You like what I'm doing here? Why? I'm curious! Is it because of the following reason you wrote?
spreading the processing power to their local comupters [to] break up the data would save a great deal on 'server' processing power and also save a little (or a modest amount) on bandwidth which would provider greater efficiency
A side effect of this approach appears to be that for a brief moment the text appears as normal (i.e. fresh out of the database and not formatted as I want) until the JavaScript kicks in (once the page loads and fires the onload event) and only then the text changes to the new formatted version. So as the page is loading you can see it change! Especially noticable on slower connections where there is a longer time-gap while the rest of the page is downloaded.
I suppose a solution to this is actually somewhere in this thread (see above - I forget who wrote it) - it describes having the text pulled out of the database into a hidden form field and THEN using the script to parse it and display it. I haven't tested this but it should prevent the above (minor) problem.

So do I get a gold star :) for doing something on the Client-side? I hope my floundering ability to script has helped you!
Seeing as my only problem is the logic of my script I will go off and use my brain to try and crack this. Please feel free to add any more solutions to this problem - I will check back regularly! My next step is to get the regular expression nailed down to catch the CarriageReturn LineFeeds properly. I have tried a few combinations but strangely (well, strange to me) this seems the best so far: \n\r\n
Don't know why I need two line feeds, but hey, if it works...

Anyway - thanks to all who have helped so far! Onwards and upwards! :wave:
Jinj

agent002

01-13-2004, 11:59 AM

I don't understand what you want your edited code to do?? Could you please explain for me?