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:

All these  's and  '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

 

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...

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:

What is it that you expect, and how does it differ from the example shown?

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.

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

 

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...

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.

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

Maybe the containing elem should have text-align: center attribute

Thank you all for your help on this.
R

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