Search code examples
htmlcssxsltcss-floatfreemarker

css float reduces spacing in freemarker - in xslt no difference

I have to change the templates from XSLT to Freemarker (at best without changing the CSS).

I'm facing the problem that pretty much every element takes up additional space which breaks huge parts of the layout (CSS is not changed at all). The additional space is not shown as margin/padding/border/positioning in the dev-tools of any browser.

I discovered that floating the elements reduces the space between them so it looks like using XSLT but this is not an option as these are literally dozens of elements affected. Of all sorts and types, below is just an simple example.

The code generated by XSLT/Freemarker is the same, despite the fact that there are linebreaks in Freemarker while in XSLT it's all in one line (which shouldn't cause problems like this, i hope):

HTML:

<div class="stars text-center">
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star" aria-hidden="true"></i>
</div>

CSS:

despite the obvious text-center and setting the color no CSS is set for either icons or parent

Result:

enter image description here

Top: Freemarker, Bottom: XSLT

Solution

  • You can use the compress directive with single_line=true.

    <@compress single_line=true>
    <div class="stars text-center">
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star" aria-hidden="true"></i>
    </div>
</@compress>

    This will replace new line characters by space characters and generate the following HTML:

    <div class="stars text-center"> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star" aria-hidden="true"></i> </div>