Jump to content

Story Formatting

Apollyein

By Apollyein
in JavaScript

 Share

Recommended Posts

Apollyein Newbie

Apollyein

Posted
Posted

I want to use CSS, Javascript, and HTML to make a resource for story formatting. That is, making a story appear as though it was taken straight from the bible.I have a text box. I pull the info from the text box, and make it a string. I take said string, find the first letter, <span> it, and then add the rest.My code is basically a copy and paste Frankenstein of W3 and Javascript for the Total Non Programmer tutorials, with hours of tinkering to make it do what I want.My issue:The code ignores all new lines. It just displays as one big text brick.paragraphs.gifMy code is as follows:

<HTML><head><style type="text/css">span{float:left;width:0.7em;font-size:400%;font-family:algerian,courier;line-height:80%;}</style><script LANGUAGE="JavaScript"><!-- Beginning of JavaScript -function MsgBox (textstring) {alert (textstring) }function MyWindow(message) {    //Define contents of page       first=message.slice(0,1)        contents=	'<html>'+	'<head>'+	'<style type="text/css">'+	'span'+	'{'+	'float:left;'+	'width:1.4em;'+	'font-size:400%;'+	'font-family:Celticmd,algerian,courier;'+	'line-height:80%;'+	'}'+	'</style>'+        '<body bgcolor="white"><br><br><br><br>'+        '<p><span>'+first+'</span>     '+       message        '</p>'+        '</body>'+        '</HTML>'    //Create new Window        options =	"toolbar=1,status=1,menubar=1,scrollbars=1," +        	"resizable=1,width=900,height=600";        newwindow=window.open("","FormattedStory", options);        newwindow.document.write(contents);        newwindow.document.close();}// - End of JavaScript - --></SCRIPT></head><body><center><textarea rows="30" cols="80" id="inputstory">Copy and Paste Your Story Into This Box.</textarea><br><INPUT NAME="submit" TYPE=Button VALUE="Format" onClick="MyWindow(inputstory.value)"></center></HTML

Any ideas or help?I'm a total n00b, and the only thing I can think of without requiring a special syntax is to search for a carriage return and splice at that character. Problem is, I don't know how to search for a carriage return!~Apollyein

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

I think what Apollyein is after is a way to convert the new lines in the textarea to a "html" line break.We can use a regular expression and check for new lines and convert that to "<br>".

<html><head><style type="text/css">span{float:left;width:0.7em;font-size:400%;font-family:algerian,courier;line-height:80%;}</style><script LANGUAGE="JavaScript"><!-- Beginning of JavaScript -function MyWindow(message) {//Define regular expression for line breakre = /(\r\n)|(\n)/g//Define contents of pagefirst= '<span>' + message.substring(0,1) + '</span>'message = message.substring(1)contents='<html>'+'<head>'+'<style type="text/css">'+'span'+'{'+'float:left;'+'padding-right: 12px;'+'font-size:200%;'+'font-family:Celticmd,algerian,courier;'+'line-height:80%;'+'}'+'</style>'+'<body bgcolor="white"><br><br><br><br>'+'<p><span>'+first+'</span> '+message'</p>'+'</body>'+'</HTML>'//Create new Windowoptions = "toolbar=1,status=1,menubar=1,scrollbars=1," +"resizable=1,width=900,height=600";newwindow=window.open("","FormattedStory", options);newwindow.document.write(contents.replace(re, "<br>\n"));newwindow.document.close();}// - End of JavaScript - --></SCRIPT></head><body><center><form><textarea rows="30" cols="80" id="inputstory">Copy and Paste Your Story Into This Box.</textarea><br><INPUT NAME="submit" TYPE=Button VALUE="Format" onClick="MyWindow(this.form.elements['inputstory'].value)"></form></center></body></html>

Thanks, :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...