LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 07-18-2021, 09:16 PM   #1
pizzipie
Member
 
Registered: Jun 2005
Location: Hayden, ID
Distribution: Ubuntu 20.04
Posts: 384

Rep: Reputation: 9
Javescript - Can't add spaces/tabs to indent/center line on page


Using Ubuntu 20.04

I am trying to indent a line to center it on the page. I am using document.write() to do this:

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

document.write("&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Referred By:&emsp;"+document.referrer);
document.write("&emsp;This file:&emsp;"+document.location);
document.write("&emsp;Last Modified:&nbsp;"+"<?php echo $lastModifiedDatetime; ?>");
document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr style='width:80%;' </style>");

</script>
All these &emsp;'s and &nbsp;'s don't do anything after about a few spaces. I've tried * and it is no different. As you can see on the screenshot the line beginning with "Referred By:" Should be further to the right by more than a few spaces.

I sure everyone wonders why the Javascript coders haven't written a function to do this.

Totally frustrated, R
Attached Thumbnails
Click image for larger version

Name:	Selection_052.png
Views:	9
Size:	13.2 KB
ID:	36810  
 
Old 07-18-2021, 11:24 PM   #2
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=14, FreeBSD_12{.0|.1}
Posts: 5,715
Blog Entries: 11

Rep: Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747
Quote:
Originally Posted by pizzipie View Post
Using Ubuntu 20.04

I am trying to indent a line to center it on the page. I am using document.write() to do this:

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

document.write("&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Referred By:&emsp;"+document.referrer);
document.write("&emsp;This file:&emsp;"+document.location);
document.write("&emsp;Last Modified:&nbsp;"+"<?php echo $lastModifiedDatetime; ?>");
document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr style='width:80%;' </style>");

</script>
Using whitespace characters for formatting HTML documents is a losing proposition...

You mention spaces and tabs in your title which does not work at all except inside <pre>...</pre> tags

You then show HTML entities &nbsp; and &emsp; in your example code, which are rendered "correctly" but still not really what you intended, which is to center the line...

Quote:
Originally Posted by pizzipie View Post
All these &emsp;'s and &nbsp;'s don't do anything after about a few spaces. I've tried * and it is no different. As you can see on the screenshot the line beginning with "Referred By:" Should be further to the right by more than a few spaces.

I sure everyone wonders why the Javascript coders haven't written a function to do this.
I disagree, "Referred by:" looks to be about 6-ems from the left side, assuming no other CSS rules were inherited. And the others look about right for the example given, except for this which is obviously invalid markup:

Code:
document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr style='width:80%;' </style>");
What is it that you expect, and how does it differ from the example shown?

Quote:
Originally Posted by pizzipie View Post
I sure everyone wonders why the Javascript coders haven't written a function to do this.
They have not done that because it is not the function of javascript to render the page. What you need is a simple CSS rule, or two.

I would strongly suggest avoiding use of whitespace to control formatting for anything other than single spacings between text or other elements where that is natural and most convenient. If you want to center that content as your question states, use a CSS style="text-align:center" attribute on the enclosing paragraph or other parent element and forget all those spaces which cannot actually center the line anyway, and will always be problematic to maintain.

But all of this makes me wonder why you are even using javascript to write this content into the page...? You are obviously generating this all on the server as indicated by the PHP code, so why not just write it out as well formed HTML and be done with it? I suspect that you may be using javascript because of some misperception that it is the way to control the layout, which is obviously incorrect. If so, then it would be helpful to yourself and others if you gave a more complete description of the problem you are actually trying to solve so we can arrive at an appropriate solution.

Last edited by astrogeek; 07-18-2021 at 11:45 PM. Reason: ptoys
 
Old 07-19-2021, 03:20 PM   #3
pizzipie
Member
 
Registered: Jun 2005
Location: Hayden, ID
Distribution: Ubuntu 20.04
Posts: 384

Original Poster
Rep: Reputation: 9
Thanks for your reply Astrogeek,

All I was trying to do is have the text look like the attached file. That is just a quick document.write()
w/o all the css stuff. So... I can't do it that way. It's not that important so I'll show it another way.

I am still curious though as to why those &emsp;'s &nbsp;'s don't work. That is if I put a whole row of them before some text I'd expect a large area of white space before the text chars begin. But that doesn't happen.
Attached Thumbnails
Click image for larger version

Name:	Selection_053.png
Views:	12
Size:	4.7 KB
ID:	36820  
 
Old 07-19-2021, 04:52 PM   #4
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=14, FreeBSD_12{.0|.1}
Posts: 5,715
Blog Entries: 11

Rep: Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747Reputation: 3747
Quote:
Originally Posted by pizzipie View Post
I am still curious though as to why those &emsp;'s &nbsp;'s don't work. That is if I put a whole row of them before some text I'd expect a large area of white space before the text chars begin. But that doesn't happen.
As I pointed out in my first post, those &emsp;s are in fact rendering, correctly, according to the code and screenshot in your first post. You have 6 &emsp;s preceeding "Referred by" and there is in fact space for six 'M's in the screenshot. But that is just dumb luck really!

If you add more &emsp;s then at some point the browser's rendering engine is going to break that line, very likely putting some or all of those spaces on an empty line above "Referred by...", so that you think...

Quote:
All these &emsp;'s and &nbsp;'s don't do anything after about a few spaces.
Different browsers may treat them differently as well. &nbsp; should never break, but I am not sure whether their width is guaranteed to be consistent either (you should look that up!).

But the only reliable answer is to remind you that HTML, by definition and design, ignores repeated whitespace characters, collapsing them into a single simple space. Entities such as &nbsp; and &emsp; have other rules applied to them but you would need to read the specifications and experiment with different browsers to have any certainty about how they will be handled in all cases, and I have not done so.

So whitespace, even whitespace entities, should never be used for layout positioning. The only way to reliably position text or other content in an HTML document is with structure provided by HTML elements, and CSS rules to tell the browser how to render the provided structural elements. Javascript only enters the picture as a means to access or modify the structure, styles attached to them, or the content. But those must all stand on their own when rendered, javascript does not change the behavior of the rendering engine.
 
Old 07-20-2021, 07:14 PM   #5
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 10,117

Rep: Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687Reputation: 4687
You've set the hr to 80% width. You just need to also set its margin to auto.

Code:
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The line is centered</title>
        <style>
            hr {
                width: 80%;
                margin: auto;
            };
        </style>
    </head>
    <body>
        <hr>
    </body>
</html>
 
Old 07-21-2021, 09:36 AM   #6
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 4,205
Blog Entries: 1

Rep: Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565Reputation: 1565
Maybe the containing elem should have text-align: center attribute
 
Old 07-21-2021, 01:37 PM   #7
pizzipie
Member
 
Registered: Jun 2005
Location: Hayden, ID
Distribution: Ubuntu 20.04
Posts: 384

Original Poster
Rep: Reputation: 9
Thank you all for your help on this.
R
 
Old 08-05-2021, 04:26 AM   #8
AnanthaP
Member
 
Registered: Jul 2004
Location: Chennai, India
Posts: 947

Rep: Reputation: 216Reputation: 216Reputation: 216
Thing about using tabs is that the rendering computer might have a different setting compared to the one you tested it on.

Similarly about &emsp; &ensp; &nbsp; etc., unless the font is set to a non proportional, preferably sans serif font, it will not render as you think counting off spaces should work. Would be interesting if you could try your code with a non proportional font (like courier new or it's linux equivalent).

So, as mentioned earlier, align=center is the way. It will align as expected.

AP
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: Unexpand - Convert Spaces to Tabs on the Linux Command Line LXer Syndicated Linux News 0 04-29-2020 06:12 AM
LXer: Tabs or spaces? Spaces, obviously, but how many? LXer Syndicated Linux News 0 09-13-2018 09:50 AM
Which indent variable gives perfect indent in vim ? techie_san778 Linux - Software 1 07-25-2014 03:16 AM
[Emacs] (setq indent-tabs-mode t) not working tumiki Linux - Newbie 3 12-18-2012 10:55 AM
emacs - convert auto indent tabs to spaces? BrianK Linux - General 1 04-15-2004 10:14 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 02:09 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration