Troubleshoot BOM issue

BOM: Byte Order Mark

What does it look like:

On the page an invisible element push the html element out of there normal place, messing up alignment.

In the developper code, in firefox it looks like a red dot that display /ufeff on mouse hover.

In a php file it the BOM might cause the header to be sent prematurely, leading to a “header already sent” error.

What is the BOM and why does it causes issue:

BOM is usually invisible in browser but can cause issue by displacing html elements on the page.

W3 consortium write in their dedicated resource on BOM:

At the time this article was written, if you include some external file in a page using PHP and that file starts with a BOM, it may create blank lines.

This is because the BOM is not stripped before inclusion into the page, and acts like a character occupying a line of text. See an example. In the example, a blank line containing the BOM appears above the first item of included text.

https://www.w3.org/International/questions/qa-byte-order-mark#problems

The byte order mark is not present in UTF-8 but some text editor such as Microsoft notepad add it systematically (at the time of writing).

Solution to identify the file starting with BOM:

To find out the php file that included the BOM I SSH into the shared hosting, and found the file using this code: 

find -type f|while read file;do [ "`head -c3 -- "$file"`" == $'\xef\xbb\xbf' ] && echo "found BOM in: $file";done


I downloaded the file through FTP and encoded it in UTF-8 with notepad++ and uploaded back to the server.

Notepad++ offers to format the file in UTF-8 with or without the BOM in the encoding tab.