adsPlace_1

Войти или Зарегистрироваться

Hosting Ukraine

Символ #65279 — проблема верстальщика

В роли символа №65279  —   , который и был изначально в названии поста, но и там он умудрился “исчезнуть”.

Символ  обладает рядом очень весёлых свойств, которые каждый встретивший его верстальщик непременно запомнит, если не провтыкает ))

Всё началось с того, что я писал дизайн под свой новый проект. Для красоты и юзабилити надо было, что бы сайт “прилипал” к верхнему краю браузера, но он не лип, ни в какую. Не буду описывать как я эти 2 недели его пытался отловить, перейду сразу к тому что он такое есть и что в этим делать.

Символ  не что иное, как BOM (Byte Order Mark) который находится в начале файла с кодировкой UTF-8, и возможно некоторых других юникодных кодировок. Служит указателем порядка байтов и может указывать, какой кодировкой Unicode закодирован текст. Кодировка Unicode может использовать 16-разрядные или 32-разрядные числа и приложение должно знать, как дальше с ними поступать. Поэтому потребность в маркере последовательности байтов возникает при обмене документами.

Как особенность, в файле он не видим, места не занимает вообще (но выделить его всё же можно), так же, его не видно при включении показа непечатаемых символов.

Во всех браузерах, кроме Оперы, действует как перенос строки. Опера же, на него не реагирует. При чтении этого файла, очень вероятно, что первым символом будет прочитан не текст, а BOM.

Решение уже очевидно — нужно избавится от BOM. Я избавился от него пересохранив необходимые файлы с помощью Notepad++ в UTF-8 без BOM.

simvol-65279-problema-verstalshhika

Скрипт PHP

Если у Вас в проекте много файлов, в которых есть BOM, тогда можно процесс удаления символа  автоматизировать. Есть скрипт, который перебирает рекурсивно все файлы в заданом каталоге и под каталогах и убирает BOM.

<?php 
// Tell me the root folder path.
// You can also try this one
// $HOME = $_SERVER["DOCUMENT_ROOT"];
// Or this
// dirname(__FILE__)
$HOME = dirname(__FILE__);

// Is this a Windows host ? If it is, change this line to $WIN = 1;
$WIN = 0;

// Recursive finder
function RecursiveFolder($sHOME) {
	global $BOMBED, $WIN;
	$win32 = ($WIN == 1)? "\\" : "/";
	$folder = dir($sHOME);
	$foundfolders = array();
	while ($file = $folder->read()) {
		if($file != "." and $file != "..") {
			if(filetype($sHOME . $win32 . $file) == "dir"){
			$foundfolders[count($foundfolders)] = $sHOME . $win32 . $file;
			}else{
				$content = file_get_contents($sHOME . $win32 . $file);
				$BOM = SearchBOM($content);
				if($BOM){
					$BOMBED[count($BOMBED)] = $sHOME . $win32 . $file;
					// Remove first three chars from the file
					$content = substr($content,3);
					// Write to file 
					file_put_contents($sHOME . $win32 . $file, $content);
				}
			}
		}
	}
	$folder->close();
	if(count($foundfolders)>0){
		foreach($foundfolders as $folder){
			RecursiveFolder($folder, $win32);
		}
	}
}

// Searching for BOM in files
function SearchBOM($string){ 
	if(substr($string,0,3) == pack("CCC",0xef,0xbb,0xbf)) return true;
	return false; 
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UTF8 BOM FINDER and REMOVER</title>
<style>
body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; background: #FFF; color: #000; }
.FOUND { color: #F30; font-size: 14px; font-weight: bold; }
</style>
</head>
<body>
<?php
$BOMBED = array();
RecursiveFolder($HOME);
echo '<h2>These files had UTF8 BOM, but i cleaned them:</h2><p class="FOUND">';
foreach($BOMBED as $utf){
	echo $utf ."<br />\n";
}
echo '</p>';
?>
</body>
</html>

ВНИМАНИЕ Перед запуском скрипта, сделайте резервную копию файлов!

Создайте файл BOM.php, поместите данный код туда. Загрузите файл в корневую папку и запустите его. Скрипт определит, в каких файлах есть BOM символ и удалит его от туда.

Последние из рубрики

Комментарии(47)

    1. Аватар пользователя Дмитрий

      Дмитрий

      15:48 02.07.2013

      Мужик, огромное спасибо, я себе этой гадостью весь день мозг тр**ал!!

      ответить
    2. Аватар пользователя Alex

      Alex

      16:35 26.08.2013

      Спасибо!!!! спас!

      ответить
    3. Аватар пользователя Максим

      Максим

      16:42 16.06.2015

      Спасибо, прямо то что нужно :)

      ответить
    4. Аватар пользователя Виталя

      Виталя

      20:35 26.06.2015

      СПАСИБО! Огромнейшее спасибО!

      ответить
    5. Аватар пользователя Max

      Max

      00:50 10.07.2015

      Огромное спасибо!!!

      ответить
    6. Аватар пользователя Vladimir

      Vladimir

      19:32 29.08.2015

      Чувак!! Респект тебе по жизни!)

      ответить
    7. Аватар пользователя AlexPixel

      AlexPixel

      23:03 03.11.2015

      Огромное спасибо!!!

      ответить
    8. Аватар пользователя test

      test

      09:32 06.11.2015

      Огромное спасибо, перекопал все в доль и поперек, думал уже руки кривые. +100 к уважухе.

      ответить
    9. Аватар пользователя Николай

      Николай

      05:36 15.12.2015

      Сколько пользовался akelpad всегда оставлял BOM.
      Кто бы знал. Спасибо!

      ответить
    10. Аватар пользователя KillerDr

      KillerDr

      14:38 22.12.2015

      Просто огромаднейшее спаибо!! Всю голову сломал с этой фигней.

      ответить
    11. Аватар пользователя Василий

      Василий

      18:38 27.12.2015

      Существует такая же проблема в Dreamweaver’е. При соединении при помощи include частей страницы воедино, появляются проклятые отступы сверху между блоками. Пробовал я сохранять и с ВОМ и без него, НИЧЕГО НЕ ПОМОГАЕТ! В настройках Dreamweaver’а тоже есть возможность изменения кодировки с ВОМ или без, но отступ все равно остается. А вот ваше решение мне очень помогло, спасибо огромное!!! И кстати при пересохранении файла в Notepad++, который ранее был создан в Dreamweaver’е, его размер немного становится меньше. Еще раз спасибо.

      ответить
    12. Аватар пользователя Петр

      Петр

      13:25 26.01.2016

      спасибо, вы сэкономили мне миллон нервных клеток!:)

      ответить
    13. Аватар пользователя Андрей

      Андрей

      18:25 12.02.2016

      Огромное спасибо автору статьи!!!! Я 3 недели ёпся с этим))))

      ответить
    14. Аватар пользователя Алексей

      Алексей

      21:17 14.03.2016

      Спасибо. Сохранил в Notepad++ в UTF-8 без BOM и ВСЁ!!! Еще раз спасибо.

      ответить
    15. Аватар пользователя Андрей

      Андрей

      02:26 03.04.2016

      Спасибо!

      ответить
    16. Аватар пользователя Оксана

      Оксана

      00:01 04.04.2016

      Спасибо!

      ответить
    17. Аватар пользователя Сергей

      Сергей

      05:36 14.05.2016

      Спасибо Большое! Четыре часа копания кода с круглыми глазами: «Откуда пробел взялся? «

      ответить
    18. Аватар пользователя Евгений

      Евгений

      14:18 16.05.2016

      Ура, товарищи!!! Автору респект!!!!!!!!!!!!11111

      ответить
    19. Аватар пользователя Влад

      Влад

      21:13 17.05.2016

      Спасибо!!! тоже не мог понять че за хрень

      ответить
    20. Аватар пользователя Александр

      Александр

      12:38 01.07.2016

      Благодарю! Очень помогло!

      ответить
    21. Аватар пользователя John Wee

      John Wee

      16:43 03.07.2016

      Спасибо, помогло, выручил =)

      ответить
    22. Аватар пользователя Антон

      Антон

      20:28 08.07.2016

      Большое спасибо, вот очень вовремя и к месту :)

      ответить
    23. Аватар пользователя Закир

      Закир

      17:30 21.07.2016

      Спасибо огромное!

      ответить
    24. Аватар пользователя Николай

      Николай

      21:39 21.07.2016

      Спасибо большое! Много времени потратил в поисках ошибки. СПАСИБО.

      ответить
    25. Аватар пользователя Владимир

      Владимир

      17:28 25.07.2016

      Дружище, я тебя люблю, ты теперь мой новый герой!

      ответить
    26. Аватар пользователя Александр

      Александр

      21:33 19.08.2016

      Найти нужные файлы можно с помощью total commander, задав поиск текста по hex коду EF BB BF

      ответить
    27. Аватар пользователя Дмитрий

      Дмитрий

      10:08 02.10.2016

      пипец, а если все и так уже в UTF-8 без BOM??
      впервые с такой мистикой столкнулся

      ответить
    28. Аватар пользователя Дмитрий

      Дмитрий

      10:18 02.10.2016

      сорян, тупанул, да и правда все ок)
      но этот мистический символ просто нечто, два дня мне моск парил

      ответить
    29. Аватар пользователя Дмитрий

      Дмитрий

      10:36 02.10.2016

      Спасибо большое! =)
      я уже думал скорую помощь вызывать

      ответить
    30. Аватар пользователя Laacrus

      Laacrus

      19:44 15.10.2016

      Спасибо огромное. Кстати так и нашел, с помощью total commander по HEX. Иначе бы голову сломал в каком файле это появилось.

      ответить
    31. Аватар пользователя Артем

      Артем

      04:22 17.10.2016

      Дружище, спасибо огромное.

      ответить
    32. Аватар пользователя Алексей

      Алексей

      00:56 22.11.2016

      Спасибо огромнейшее просто! не представляешь как спас! С помощью скрипта перебора всех файлов нашел BOM в таком месте, куда даже не додумался бы полезть! Спасибо!

      ответить
    33. Аватар пользователя Дмитрий

      Дмитрий

      21:56 02.12.2016

      Спасибо спаситель!!!

      ответить
    34. Аватар пользователя Костя

      Костя

      23:09 05.01.2017

      СПАСИБООООООООООООО!!!!!!!!!!!!!!!!!!!!!!!!!!!!

      ответить
    35. Аватар пользователя Ангарск

      Ангарск

      17:46 13.01.2017

      \wp-content\plugins\wptouch\themes\bauhaus\default\header-bottom.php
      эта зараза сидела здесь!
      мобильная версия сайта вордпрес

      ответить
    36. Аватар пользователя Anton

      Anton

      18:03 23.01.2017

      Несмотря на то, что программа уважаемого автора, несомненно, полезна в быту, по реализации хотелось бы отметить две вещи:
      1. У PHP есть предопределенная константа DIRECTORY_SEPARATOR, которая содержит прямой или обратный слеш, в зависимости на windows или linux исполняется скрипт.
      http://php.net/manual/en/dir.constants.php
      2. Советую посмотреть на класс RecursiveDirectoryIterator, при помощи которого удобно ходить по дереву каталогов.
      http://php.net/manual/ru/class.recursivedirectoryiterator.php

      Это я отметил просто для красоты, чтобы как можно меньше заниматься велосипедостроением :)

      ответить
    37. Аватар пользователя Алексей

      Алексей

      14:22 24.02.2017

      Спасибо чувак

      ответить
    38. Аватар пользователя DD

      DD

      10:36 07.03.2017

      Огромное спасибо. Реально помогло. Успехи в проектах.

      ответить
    39. Аватар пользователя Aang

      Aang

      20:17 15.07.2017

      Спасибо, после поиска часов на последнем найденном решении на этом сайте. Спасибо, очень помогло. Продолжайте хорошую работу.

      ответить
    40. Аватар пользователя Futorka

      Futorka

      18:00 23.08.2017

      Большое спасибо! отличное решение!

      ответить
    41. Аватар пользователя Yorik

      Yorik

      12:33 26.09.2017

      Супер! Спасибо большое!

      ответить
    42. Аватар пользователя Валерий

      Валерий

      18:14 31.10.2017

      Я видел этот код в «исходном коде страницы», но не мог понять, что это BOM. Большое спасибо!

      ответить
    43. Аватар пользователя Йожин

      Йожин

      00:16 03.11.2017

      Большое спасибо, помогло!

      ответить
    44. Аватар пользователя Viper

      Viper

      22:52 15.03.2018

      Супер. Понял что долго б мучался. Хорошо что сразу прогуглил и нашел тут ответ. Спасибо!

      ответить
    45. Аватар пользователя Tryd0g0lik

      Tryd0g0lik

      07:43 17.08.2018

      спасибо

      ответить
    46. Аватар пользователя Костя

      Костя

      09:03 23.08.2018

      Никогда не писал на сайтах комменты, но решил тут оставить свой отзыв. Огромное спасибо за скрипт, сработал отлично! Теперь сайт чист и нету этих чёртовых пробелов, конечно в некоторых местах имеется теперь проблемы, но это дело 5ти минут. Огромное спасибо!

      ответить
    47. Аватар пользователя loalhost

      loalhost

      01:50 17.10.2018

      Помог. я всю ночь дрочиля падлой этой. когда движок начал ковырять решил в инете глянуть.

      ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению