Revision as of 17:30, 12 October 2024

Mago is among things, author of Rogue trader improved sheet.

Mago's guide on how to eliminate the XML whitespaces

If you need a full explanation of what XML whitespaces are and why, read this article:

https://www.oracle.com/technical-resources/articles/wang-whitespace.html

• The Problem:

The XML whitespaces will appear on character sheets when the lines of code are separated by line break such as this: (Also this view is based on the Custom Character sheet viewer)

1- <div>
2-   <span>Title 1</span>
3-   <input/>
4-   <span>Title 2></span>
5- </div>

Now you may expect to see something like Title1-Input-Title2 flush together with no space in between, however because tags are separated by a line break in the HTML viewer, these line breaks become empty whitespace: (also the only way i found to see the whitespace tag is with the Firefox browser inspect tool)

Title1(whitespace)Input(whitespace)Title2

Now this is not at all bad if you want space in between elements, however what if you need to flush them together? Worse yet this whitespace also takes part of the <div> width, so if you wanted to do 100% width for the tags inside, these tags will start to overlap or jump to the next line. completely undesirable.

I know of 3 workable solutions for this issue, each with their own complications:

• Solution 1 write everything that doesn't need whitespaces in a single line:

1- <div>
2-   <span>Title 1</span><input/><span>Title 2></span>
3- </div>

this solution is effective, however this makes reading the HTML code a real headache, particularly if you have many tags per line.

• Solution 2 Encase every tag inside a <div> that has Negative right/left margins:

1- <div>
2-   <div class="item"><span>Title 1</span></div>
3-   <div class="item"><input/></div>
4-   <div class="item"><span>Title 2></span></div>
5- </div>

/* CSS */
.item {
   margin-left: -2px;
   margin-right: -2px;
}

This can be played around to just be the right margin that is negative, or it could be applied to the tags themselves like:

/* CSS */
input{
   margin-right: -4px;
}

However this does come with its own complications: if you need to use certain tags in other sections of the sheet that use the whitespace or some tags will misalign because of the negative margin. Also you will have to write or copypaste more code.

• Solution 3 Set the containing <div> font-size to 0px, this (for some reason) eliminates all whitespaces within.

/* CSS */
.container div{
   font-size: 0px;
}

• This is my preferred solution, its very clean, however it does come with a caveat
  • Every tag inside those container divs must have a font-size specified, such as select, input, label, span ect..., with sufficient specificity, if not, the letters would just disappear
  • Another caveat is "ok but what if i want separation it between elements without relying on the whitespaces"

• Either create a "spacing" div, or add left/right margins to the different tags

1- <div>
2-   <span>Title 1</span>
3-   <div class="spacing"></div>
4-   <input/>
5-   <div class="spacing"></div>
6-   <span>Title 2></span>
7- </div>

/* CSS */
.spacing div{
   display: inline-block;
   width: auto;
}

hope this helps