Space above header bar

[bfruben]

Describe the Bug

When making my own theme and changing some phrases I ended up with extra space above the titlebar.

This space only appears when I change copy and change the entities.php in the themes folder.

Steps to Reproduce

1. Make your own theme
2. Copy the entities.php from */lang/sv to */themes/theme_name/lang/sv
3. Change the entities.php file
4. Reload Bookstack with the custom theme

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

Expected Behaviour

No extra space above the titlebar

Screenshots or Additional Context

No response

Browser Details

Edge

Exact BookStack Version

BookStack v24.05.4

[ssddanbrown]

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

• What exactly are you changing which makes the space appear?
• Are there any other files within your theme folder?

Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed.

[bfruben]

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

• What exactly are you changing which makes the space appear?
• Are there any other files within your theme folder?

Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed.

• Any change I make the space appears.
• These are the only files I have in the themes folder right now:

Thanks for the tip! I was removing everything that I didn't want to change. That's how I discovered this "bug". ;)

[ssddanbrown]

Thanks the the response @bfruben, I can't reproduce this, nor does it make sense really. I can only think the structure of the file is being modified in some way, casing stray text to be emitted at the start of the page/document.

With just one language override file active:

• Does the file still have just one <?php at the very very start of the file?
• Does the text ?> exist in the file at all?
• Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)?

[bfruben]

Does the file still have just one <?php at the very very start of the file?

Yes

Does the text ?> exist in the file at all?

No

Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)?

There is now visible text on the page but there is in the html, see picture:

[ssddanbrown]

@bfruben Yeah, that could cause space. The structure of the HTML in that screenshot also looks broken as I wouldn't expect those meta elements to be in that location reletive to the shortcut data.

• Have you got anything in the "Custom HTML Head Content" customization setting within the app?
• Does this space remain when viewing the customization settings page in the app?

[bfruben]

Have you got anything in the "Custom HTML Head Content" customization setting within the app?

Not anymore.

Does this space remain when viewing the customization settings page in the app?

No, it only shows on the books and shelves pages.

[BFjimmy]

This code fixes the problem:

(function () {
    const bom = '\uFEFF'; // Byte Order Mark (BOM)
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
        acceptNode: (node) => (node.nodeValue.includes(bom) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT),
    });

    let count = 0; // Count of BOMs removed
    while (walker.nextNode()) {
        const node = walker.currentNode;
        const before = node.nodeValue;
        node.nodeValue = node.nodeValue.replace(new RegExp(bom, 'g'), '');
        count += (before.length - node.nodeValue.length) / bom.length;
    }

    console.log(`Removed ${count} BOM instance(s) from the DOM.`);
})();

Is there a way to add JavaScript snippets that is automatically loaded on page load?

Here's a quick test code. Creating a link with the code:

javascript:(function(){const bom='\uFEFF';const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,{acceptNode:(node)=>node.nodeValue.includes(bom)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT});let count=0;while(walker.nextNode()){const node=walker.currentNode;const before=node.nodeValue;node.nodeValue=node.nodeValue.replace(new RegExp(bom,'g'),'');count+=(before.length-node.nodeValue.length)/bom.length;}console.log(`Removed ${count} BOM instance(s) from the DOM.`);})();

[ssddanbrown]

Is there a way to add JavaScript snippets that is automatically loaded on page load?

@bfruben You could add them in a module script, via the "Custom HTML Head Content" customization setting. EG:

<script type="module">
// Code here
</script>

But a script to search and replace text of all text nodes is doing quite a lot on load, and it'd be better to address the actual issue.

It would be useful if a ZIP of a theme folder, which replicates this issue, could be shared so I can replicate and dig into this myself.

[BFjimmy]

Yes, it's just a quick-and-dirty fix until we got the issue really fixed :)

[ssddanbrown]

Since no content has been provided to reproduce this I'll go ahead and close this off since there's nothing further I can look into on my side.