Are there any HTML gurus here? If so, would you like to solve the mystery of the ‘invisible’ space showing up when this document is viewed in Firefox?
No, I mean the single space preceding the first letter in the scrollable text box on that page. You can’t see it with the eye, when viewed in the browser, but when you copy the text into a text editor you will see it. It only occurs in Firefox, that I have noticed so far. It is all explained in the document itself. But I don’t know why it’s there.
it’s normal because after the open paragraph you have an empty space (line)
which when you copy text, the browser copies from the beginning of that tag
so then grab and empty space
You have two (three) options
-
or put the whole text in
<pre>and it will be as you write it in the code -
or make the text immediately after the paragraph tag
-
and if you already want to SEPARATE more of this here
then put<br>
3 Likes
Thanks @Oxy,
I think what your’e saying is that HTML treats a paragraph break as white space (which, at a minimum = a single space character.) But if, as you say, it’s normal, why does this occur only when copying and pasting the text from Firefox? If I copy it from Chrome, Edge or Opera, none of them inserts a space there. Also, why does it make a difference whether I copy just the first line (no space, even in FF) or if I copy the first line plus the first letter of the next line (FF inserts a space)?
Why only FF behave like that ?
I don’t know if it’s a bug or a feature 
When comparing browsers there are serializing differences
With Edge/Chrome is that when it copy/puts HTML content on the clipboard
it adds/includes a bunch of style properties (inline style on each element)
This is the clipboard content copied via Edge and below via Firefox (which I copied on my PC)
It doesn’t fit all in the picture so here’s the code 
Edge
StartHTML:0000000161
EndHTML:0000001250
StartFragment:0000000197
EndFragment:0000001214
SourceURL:http://moongazer.epizy.com/website/test/?i=1
<html>
<body>
<!--StartFragment--><p style="color: rgb(0, 0, 0); font-family: "Times New Roman"; font-size: 18.6667px; font-style: normal;
font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2;
text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2;
word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial;
text-decoration-color: initial;">The text in this box is scrollable.</p><p style="color: rgb(0, 0, 0);
font-family: "Times New Roman"; font-size: 18.6667px; font-style: normal; font-variant-ligatures: normal;
font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px;
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style:
initial; text-decoration-color: initial;"><b>The Owl and the Pussy-Cat</b></p><!--EndFragment-->
</body>
</html>
Firefox
FF
StartHTML:00000149
EndHTML:00000308
StartFragment:00000183
EndFragment:00000272
SourceURL:http://moongazer.epizy.com/website/test/
<html><body>
<!--StartFragment--><p>
The text in this box is scrollable.
</p><p>
<b>The Owl and the Pussy-Cat</b></p><!--EndFragment-->
</body>
</html>
you can already see the difference
I think it’s actually a secondary question to you why something behaves like this in another browser and differently in FF
It is up to you to definitely define how everything will look on your page and do it via CSS
(don’t let the browser make its own decisions)
- do not leave blank after
<p>(or press enter) - define the appearance and behavior in CSS for the
<p>element - for poetry and similar forms of texts use
<pre>
You can always report a bug to Mozilla and get a better answer
1 Like
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.