Search the Community
Showing results for tags 'double space'.
Found 1 result
-
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" */ /*==================*/
