Can I somehow prevent returns in my code from adding spacing between form elements?

Question

Possible Duplicate:
Ignore whitespace in HTML

I am creating a Dutch recipe website. The problem is a visual error that occurs when adding new form fields through Javascript.

Where the problem occurs

In order to describe all the needed ingredients, I allow the user to add more ingredient form fields to the existing ones, which are defined beforehand by HTML. You can add these new fields by pressing the button that says 'Add another ingredient'. A javascript function called addIngredient() is called onclick (it is truncated for clarity, full code can be found here):

function addIngredient() {
  ingredientCount++;

  //define the elements that should be created
  var Group = document.createElement("span");
  var Quantity = document.createElement("input");
  var Unit = document.createElement("input");
  var Type = document.createElement("input");
  var lineBreak = document.createElement("br");

  //set the attributes for each element
  Group.setAttribute("id", "ingredient_" + ingredientCount);
  Quantity.setAttribute("type", "text");
  Unit.setAttribute("type", "text");
  Type.setAttribute("type", "text");

  //add the ingredient group span and linebreak to the ingredients div
  var ingredientList = document.getElementById("ingredienten");
  ingredientList.appendChild(Group);
  ingredientList.appendChild(lineBreak);

  //add the ingredient form elements to the ingredient group span
  var addElements = document.getElementById("ingredient_" + ingredientCount);
  addElements.appendChild(Quantity);
  addElements.appendChild(Unit);
  addElements.appendChild(Type);
}

What happens

The input elements added through JavaScript appear to have different spacing between them from those created beforehand, by HTML. Here is a screencap showing the visual error:

spacing discrepancy

This surplus spacing disappears when I remove my returns from the HTML defining the input elements that are created beforehand.

with returns:

<span>
  <input>
  <input>
  <input>
</span><br>

without returns:

<span>
  <input><input><input>
</span><br>

This leads me to conclude that the elements created with HTML actually are influenced in spacing or position by the way I write my code. The form elements created with Javascript are, of course, generated without any linebreaks, so these surplus spaces are not present.

My question

Frankly, I'm a bit shocked that hitting return in my HTML apparently outputs some spacing on the webpage. I find it ridiculous that code formatting would result in things to be added on the page. I do not want to remove the returns in my code to prevent it from happening.

Is there any other way than removing returns from my code to ensure that those spaces between my form elements do not show up?

Can't you just add `$nbsp;` at the end of your generated HTML? — Hogan, Aug 01 '12 at 14:42
Certainly. Now that the *why does this happen* is explained by other users, this also presents a suitable solution. — bakkerjoeri, Aug 01 '12 at 14:46
Yikes! I meant ` `. How did that `$` get there? Darn capitalists! — Hogan, Aug 01 '12 at 14:58
I know this might sound like a weird thought, but I'm new here, and I wouldn't mind feedback on the way I asked my question and dealt with the answers. Is there anything that I might want to do different or more according to how people do it normally? — bakkerjoeri, Aug 01 '12 at 17:06
I think you did great, you question was very clear and your comments and follow up were good. I added a comment instead of an answer because I wanted to remind people of ` ` but I did not think it warented a full answer. — Hogan, Aug 01 '12 at 17:35
I think that your question was a fine example of the model of questions here :) — Swadq, Dec 15 '12 at 18:55

score 2 · Accepted Answer · answered Aug 01 '12 at 14:29

Within an HTML element, whitespace is normalized to a single space. If you have some text, seven space characters, and some more text, those seven space characters will be normalized to a single space. Similarly, if you have some text, a return character, and some more text, that return character will be normalized to a single space.

You may think this is undesirable, but there would be at least as many odd situations if returns were just silently removed.

You can't prevent those returns resulting in there being a space between your input elements, but you could dynamically insert a space after each dynamically-added input element. That way there's a space between all of the inputs, the 'hardcoded' ones and the ones you've added via script.

Without any attempt to make the code look pretty:

var addElements = document.getElementById("ingredient_" + ingredientCount);
addElements.appendChild(Quantity);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Unit);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Type);

That (or something along those lines) should space the dynamic inputs in the same way that the hardcoded ones are spaced.

This seems to be the way to go, in this case. Thank you for teaching me about the whitespace collapsing. I must say that I was completely unaware of this. It's the first time I have run into a situation where it is actually apparent. — bakkerjoeri, Aug 01 '12 at 14:38
It's also worth noting that the spec in certain cases allows browsers to optionally remove the whitespace completely. You may have guessed it: different browsers behave differently there. — user123444555621, Dec 15 '12 at 19:12

score 1 · Answer 2 · answered Aug 01 '12 at 14:26

Browsers do whitespace collapsing: one ore more whitespace characters (blank, tab, return) are collapsed to one single space.

I'm not aware of a way how to circumvent this. Maybe you can set the font-size to 0? or add a space character in your JS. You could also try floating your input fields to the left (span > input { float:left; }) which floats only the input fields and not the text content of the span element.

score 0 · Answer 3 · answered Aug 01 '12 at 14:28

Any amount of whitespace, including line returns, tab indents, multiple space, etc. between HTML tags will be treated as exactly one space when rendered. This is fundamental to HTML. If you are working with outputting HTML you need to be aware of this and handle it accordingly in your code that generates the HTML.

score 0 · Answer 4 · edited May 23 '17 at 12:01

0

As mentioned in another question this is the only solution* I'm aware of:

<span><!--
    --><input><!--
    --><input><!--
    --><input><!--
--></span><br>

*Well, if you want to call that a solution...

edited May 23 '17 at 12:01

Community

1
1

answered Dec 15 '12 at 19:10

user123444555621

148,182
27
114
126

Can I somehow prevent returns in my code from adding spacing between form elements?

Where the problem occurs

What happens

My question

4 Answers4