Issue with whitespaces on deployed site

support
1

I’ve recently published my site to codeberg pages using forgejo actions and I’ve been having an issue with it removing a bunch of whitespaces in my page that do not show up in the local builds using the hugo server command. Below I’ve attached an image to give you an idea of what this issue looks like.

Hugo Help whitespace
Hugo Help whitespace1752×989 111 KB

The way the site is being build is by using forgejo actions using the yaml file provided in the Host on Codeberg from the Hugo’s documentation, but it does not output the same as using the hugo server command and I have no idea how to troubleshoot and actually fix this issue, I’d like some ideas on what might be causing this issue as well as any possible way to make the hugo server command align with what’s being deployed as I really have no idea why the whitespace does not show up in the deployed site as opposed to the local build process.

Below here is the code for these following elements as shown in the image in case it might help:
Hover on note text
In Post:

> {{<icon icon="bulb" class="icon-default" class2="icon-gap">}}Hover on "{{<tooltip text="Like that.">}}Note{{</tooltip>}}" or other {{<tooltip text="Like this.">}}dotted underlined text{{</tooltip>}} for more info.

Shortcode:

<span class="tooltip">
    {{ .Inner | markdownify -}}
    <span class="tooltiptext">
        {{- .Get "text" | markdownify -}}
    </span>
</span>
 {{- /* This comment removes trailing newlines. */ -}}

Font settings menu
HTML

<li id="font-settings">
                            <div class="font-toggle" tabindex="1">
                                <i class="font-closer" tabindex="1"></i>
                                <a>
                                    {{ partial "helper/icon" "typeface" }}
                                    <span class="font-menu">{{- T "fontMenu" -}}</span>
                                </a>
                                    <div class="tooltiptext">
                                    <div>
                                        <label class="radio" data-font="sans-serif">
                                            <input type="radio" name="font" value="sans-serif" checked>
                                            <span title="Adwaita Sans">Sans Serif</span>
                                        </label>
                                        <label class="radio" data-font="serif">
                                            <input type="radio" name="font" value="serif">
                                            <span title="Literata">Serif</span>
                                        </label>
                                        <label class=radio data-font="accessibility">
                                            <input type="radio" name="font" value="accessibility">
                                            <span title="Atkinson Hyperlegible Next">Accessibility</span>
                                        </label>
                                    </div>
                            </div>
                        </li>

SCSS

        @media (max-width: 600px) {

            &[data-font="sans-serif"]::after {
                content: "(Adwaita Sans)";
                color: var(--unhighlighted-text-color);
                font-weight: 300;
            }

            &[data-font="serif"]::after {
                content: "(Literata)";
                color: var(--unhighlighted-text-color);
                font-weight: 300;
            }

            &[data-font="accessibility"]::after {
                content: "(Atkinson Hyperlegible Next)";
                color: var(--unhighlighted-text-color);
                font-weight: 300;
            }
        }

Any additional code can be found on Codeberg and in case it’s helpful you can see the build process on the repos actions tab as well.

2

this will remove all whitespace. see Introduction to templating

in your action you call hugo using --minify whereas a local server build does not. see Configure minify

your last commit has no space after the closing -}} shortcode tag.

1 Like
3

I’ve used the {{- /* This comment removes trailing newlines. */ -}} due to it leaving a whitespace at the end every time I use the shortcode, and it does not cause the same issue when I run hugo server. Does removing --minify cause any other problems or should I just go ahead and remove it or is it better practice to work with it?

4

typically you want minify on production because you reduce size of every loaded page so faster loads.

you could go with non breaking spaces or css styling of the span to add a right margin. typically 0.25em for a space

offline. unable to provide a working code out of my head

5

I could attempt the suggested workaround, however the spacing issue is quite frequent and having to use non breaking spaces would not be ideal as one of the main things I got from using Hugo was being able to write posts in markdown and having to use them would break the flow. Also I would prefer not to use margins as that would still mean it doesn’t work in contexts where the css isn’t present such as in rss, in screen readers/tts and some browsers “reader view”.

6

Minification in combination with HTML’s whitespace model may behave unexpectedly if you modify the CSS display property. This appears to be the root cause in your case.

Your tooltip class sets display: inline-block. If you remove this (effectively making it similar to display: inline), it fixes the layout. I’ve only checked your provided example - not edge cases or the full design - so this change might break the layout for uncommon DOM structures or during responsive screen size changes.

Another approach would be to ensure that supposed inline elements are always written on a single line in your shortcode. You can achieve this either by removing line breaks using comments (to maintain readable indentation) or by removing the line breaks entirely.

With line breaks

<span class="tooltip">
    {{ .Inner | markdownify -}}
    <span class="tooltiptext">
        {{- .Get "text" | markdownify -}}
    </span>{{- /* This comment removes trailing newlines. */ -}}
</span>
 {{- /* This comment removes trailing newlines. */ -}}

Without line breaks

<span class="tooltip">{{ .Inner | markdownify -}}<span class="tooltiptext">{{- .Get "text" | markdownify -}}</span></span>

In this case your file must not end with a line break.

3 Likes
7

I ended up going with making the shortcode one line with no breaks by adding the {{- /* This comment removes trailing newlines. */ -}} and it ended up working out. I also added <span></span> at the end of my font settings drop down menu and it seems to work just fine.

Thanks a lot for the help, I really appreciate, anyone who chimed in to help me with this issue.

1 Like