Jump to content

how to embed line break and double space in array string


W3_Bill

Recommended Posts

Good morning,

I'm using Firefox on a Fedora-23 system, both current as of 2016-08-18.

In an html file, I have a Javascript script to randomize the selection of an image and its caption by choosing it based on the time when the page is loaded. The selection works great. But the caption strings (in a Javascript array) are long. I've tried a few different ways of putting a line break in the string, so that they display in the web page as two lines. I've also tried "<br/>" (no space before the slash). Nothing works. What is the elegant, best practice way of putting a line break in the place where I want it within a long caption in this scenario? (I very probably could come up with a "brute force" way - like two arrays, but that's tedious, especially if I have a much larger number of pictures and captions.) By the way, it's curious that when I go to the W3Schools JavaScript Strings tutorial, run the second "Try it Yourself", embed "<br />" in a one of the strings, and run it, I do get the line break where I want it in the output string!

I'd also like the caption to end with " (picture #i of n)". I want *two* spaces before the '('; it looks much better that way. But additional spaces beyond one apparently get parsed off when the page loads. What is the elegant, best practice way of getting the desired amount of additional space there?

I am unable to attach the html and css files, so I've included them at the end of this message's body, below the signature.

Thank-you for your help.

Bill.


<!-- ============= -->
<!-- "testjs.html" -->
<!-- ============= -->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<!-- ===================================================================== -->

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="testjs.css"/>
<title>Test Javascript Page</title>
</head>

<!-- ===================================================================== -->

<body>

<!-- ===================================================================== -->

<table id="page_table" style="width:100%">
<tr>
<td id="page_cell">

<!-- ===================================================================== -->

<h1> <a id="pagetop"></a> Test Javascript Web Page</h1>

<p> <br /> </p>

<table>
<tr>
<td style="padding: 0;">
<img id="TestPic" alt=""/>
</td>
</tr>
</table>
<p id="TestCaption" class="photocaption">
</p>

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

var captions = [
"first line of long caption for first test image<br>meta-data part of long caption for first test image" ,
"second test image, long caption, top line<br />second test image, long caption, meta-data part" ,
"1st line of long caption for 3rd test image\nmeta-data line of long caption for 3rd test image" ,
"4th test image, long caption, top line" + "<br />" + "4th test image, long caption, meta-data line" ,
"upper line of long caption for test image #5" + '\n' + "meta-data line of long caption for test image #5"
];

var d = new Date();
var newPic = "TestImage";
var picnum = d.getSeconds()%5;
document.getElementById ( "TestCaption" ).textContent =
captions[picnum] + " (picture #" + (++picnum) + " of 5)";
newPic = newPic + picnum + ".jpg";
document.getElementById ( "TestPic" ).src = newPic;

</script>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<!-- other stuff goes here -->

<!-- ===================================================================== -->

</td>
</tr>
</table>

<!-- ===================================================================== -->

</body>
</html>

<!-- ================= -->
<!-- end "testjs.html" -->
<!-- ================= -->


************************* (here is the associated css file) *************************


/*==============*/
/* "testjs.css" */
/*==============*/

/*------*/
/* body */
/*------*/

body { background-color: #000000;
margin-top: 5mm;
margin-bottom: 5mm;
margin-left: 5mm;
margin-right: 5mm;
color: #ff8f6f;
text-align: center; /* needed in IE for table centering */
font-family: Times, serif;
font-size: 5.6mm; }

/*----------*/
/* headings */
/*----------*/

h1 { background-color: transparent; text-align: center; color: #ffff00; }
h2 { background-color: transparent; text-align: left; color: #ffff00; }
h3 { background-color: transparent; text-align: left; color: #ff9faf; }

/*-------------------*/
/* named text styles */
/*-------------------*/

.photocaption { text-align: center;
background-color: transparent;
font-style: italic;
font-size: 100%;
color: #ff9faf; }

/*===================================*/

/*------------*/
/* page table */
/*------------*/

table#page_table { margin: auto;
background-color: #e7a070;
color: #ff8f6f;
border-collapse: separate;
border-spacing: 5mm;
border: outset 2mm; }

/*-----------------*/
/* page table cell */
/*-----------------*/

td#page_cell { text-align: center; vertical-align: middle;
background-color: #270f00;
color: #ff8f6f;
border: inset 2mm #ff8f6f;
padding: 15mm; }

/*===================================*/

/*-------*/
/* table */
/*-------*/

table { margin: auto;
background-color: #e7a070;
color: #ff8f6f;
border-collapse: separate;
border-spacing: 2mm;
border: outset 1.4mm; }

/*------------*/
/* table cell */
/*------------*/

td { text-align: center; vertical-align: middle;
background-color: #3f1700;
color: #ff8f6f;
border: inset 1mm #ff8f6f;
padding: 3mm; }

/*==================*/
/* end "testjs.css" */
/*==================*/

Link to comment
Share on other sites

You can set innerHTML instead of textContent and then it will interpret <br> tags properly.

 

Additional spaces can be added with " " but I would advise against it. You should use CSS to style the text. You can set the text-indent property to push the text further in.

 

In HTML whitespace is ignored so that you can indent the code without all of the indentation showing up on the rendered page.

Link to comment
Share on other sites

> You can set innerHTML instead of textContent and then it will interpret <br> tags properly.

 

That works. Thank-you.

 

> Additional spaces can be added with " "

 

That works. Thank-you.

 

> You should use CSS to style the text. You can set the text-indent property to push the text further in.

 

I don't understand this. The double space that I want is in the midst of the line of text. For example, I want to use JavaScript to put together a single line of text that looks like this:

caption for picture (picture #3 of 5)

I'm wanting two spaces between the first occurrence of the word "picture" and the left-parenthesis character. How will CSS help with that?

 

thanks,

Bill.

Link to comment
Share on other sites

Wow. You're fast. Thank-you.

 

I haven't seen a way of tagging a question "solved" (like the Fedora users forum does), but I consider this "solved".

 

Bill.

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
×
×
  • Create New...