Незрозумілі символи замість тексту в браузері

1. Що таке кодування тексту і з чим її їдять?
2. Види кодувань тексту
3. Вирішуємо проблеми з кодуванням або як прибрати кракозябри?
4. Післямова

Привіт, шановні читачі, шанувальники та інші хороші люди!

Чи траплялося Вам отримувати і читати листи на "фіг якому зрозумій мовою" або заходити на який-небудь інтернет-ресурс і замість звичних букв бачити суцільні кракозябри? Якщо так, тоді ця замітка для Вас, бо в ній ми поговоримо про кодування сторінок, її форматах, чому она виникає і як надалі уникнути незрозумілих ієрогліфів.

Отже, сьогодні нас чекає не легка софтовая стаття, а сувора технічна, так що приготуйтеся: будемо трохи заглиблюватися в суворі реалії.
Поїхали.

Що таке кодування тексту і з чим її їдять?

Почати хотілося б з того, що цієї статті могло б і не бути, тому що комп'ютерно-юзательная життя автора цих рядків протікала цілком собі спокійно і гідно. Але ось в один прекрасний день, шляясь по просторах мережі Інтернет не зі свого ПК, я зіткнувся з незрозумілими явищами на деяких сайтах. Заходячи на інтернет-ресурси, я бачив не звичний нам російський алфавіт і красивий зрозумілий текст, а якусь єресь у вигляді незрозумілої послідовності символів. Виглядала вона приблизно ось так (див. Зображення).

Спочатку я подумав, що моя улюблена мозілку (браузер Firefox) перегрілася і їй пора викликати невідкладну допомогу, але потім почав розуміти, що проблема, швидше за все, на стороні ресурсу мережі і криється вона в неправильно налаштованої кодуванні. Це дійсно виявилося так, і пошаманити трохи з бубном, проблемка була оперативно вирішена. Результатом же всіх моїх любовних пригод і став сьогоднішній матеріал. Власне, поїхали розбиратися в деталях.

Всю інформацію, представлену в цифровому вигляді і знаходиться в глобальній павутині, потрібно розглядати з двох сторін: перша - з боку користувача (красивий і доглянутий текст на екрані монітора) і друга - з боку пошукової машини (якийсь програмний код, що складається з різних тегів / метатегов, таблиці символів та інше).

Якщо Ви хоч трохи знайомі з мовою розмітки гіпертексту (HTML), то повинні бути в курсі, що сайт очима пошукових машин (Google, Яндекс) бачиться не як звичайний текст, а як структурований документ, що складається з послідовностей різного роду тегів. Щоб було зрозуміліше, про що я говорю, давайте поглянемо на всіма нами улюблений сайт Нотатки Сіс.Адміна "проекту [Sonikelf's Project's], але не очима звичайного користувача, а" очима "пошукача. Для цього натискаємо клавіші Сtrl + U (для браузерів Firefox і Chrome) і бачимо наступну картину (див. Зображення):

Перед нами машинний варіант sonikelf.ru, ось в такому ось непрезентабельному вигляді він подається пошуковим системам і саме в такому вигляді вони його і їдять. Якби ми просто взяли і "засандалив" варіанти статей з блокнота або Word звичайним текстом, машини б їм не те що подавилися, вони б навіть і є його не стали. Отже, перед нами головна сторінка проекту в HTML-вид. Зверніть увагу на рядок з написом UTF-8, це не що інше, як горезвісна кодування тексту сторінки, саме вона і відповідає за формат виведення інформації в презентабельному вигляді, в результаті чого через браузер ми бачимо нормальний текст.

Тепер давайте розберемося, чому ж відбувається так, що часом на екрані монітора ми бачимо кракозябри. Все дуже просто, проблема криється у відкритті файлу в невірної кодуванні. Якщо перевести на побутову мову, то допустимо Вас послали в магазин за молоком, а Ви притарабанив хліб, начебто теж їстівне, але зовсім інший формат продукту.

Отже, тепер давайте розбиратися з теорією і для цього введемо деякі визначення.

1. Кодування (або "Charset") - відповідність набору символів набору числових значень. Потрібна для "зливання" інформації в інтернет, тобто текстова інформація перетворюється в біти даних;
2. Кодова сторінка ( "Codepage") - 1 байтовая (8 біт) кодування;
3. Кількість значень, що приймається 1 байтом - 256 (два у восьмому).

Відповідність "символ-зображення" задається за допомогою спеціальних кодових таблиць, де кожному символу вже привласнений свій конкретний числовий код. Таких таблиць існує досить багато, і в різних таблицях один і той же символ може ідентифікуватися по-різному (йому можуть відповідати різні числові коди).

Все кодування розрізняються кількістю байт і набором спеціальних знаків, в які перетворюється кожен символ вихідного тексту.

Примітка:
Декодування - операція, в результаті якої відбувається перетворення коду символу в зображення. В результаті цієї операції інформація виводиться на екран монітора користувача.

Загалом .. З визначеннями розібралися, а тепер давайте дізнаємося, які ж (кодування) бувають.

Види кодувань тексту

А їх, в общем-то, вистачає.

Однією з найбільш "древніх" вважається американська кодировочная таблиця (ASCII, читається як "аски"), прийнята національним інститутом стандартів. Для кодування вона використовувала 7 бітів, в перших 128 значеннях розміщувався англійський алфавіт (в нижньому і верхньому регістрах), а також знаки, цифри і символи. Вона більше підходила для англомовних користувачів і не була універсальною.

Вітчизняний варіант кодування, для якого стали використовувати другу частину кодової таблиці - символи з 129 по 256. Заточена під російськомовну аудиторію.

• Кодування сімейства MS Windows: Windows 1250-1258.

8-бітові кодування, з'явилися як наслідок розробки самої популярної операційної системи, Windows. Номери з 1250 по 1 258 вказують на мову, під який вони заточені, наприклад, 1250 - для мов центральної Європи; 1251 - кириличний алфавіт.

• Код обміну інформацією 8 біт - КОІ8

KOI8-R, KOI8-U, KOI-7 - стандарт для російської кирилиці в юнікс-подібних операційних системах.

Універсальний стандарт кодування символів, що дозволяє описати знаки практично всіх письмових мов. Позначення "U + xxxx" (хххх - 16-ковий цифри). Найпоширеніші сімейства кодувань UTF (Unicode Transformation Format): UTF-8, 16, 32.

В даний час, як то кажуть, "рулить" UTF-8 - саме вона забезпечують найкращу сумісність зі старими ОС, які використовували 8 -бітний символи. В UTF-8 кодуванні знаходяться більшість сайтів в мережі Інтернет і саме цей стандарт є універсальним (підтримка кирилиці і латиниці).

Зрозуміло, я привів в повному обсязі види кодувань, а тільки найбільш ходові. Якщо ж Ви хочете для загального розвитку знати їх все, то повний список можна відшукати в самому браузері. Для цього достатньо пройти в ньому на вкладку "Вид-Кодування-Вибрати список" і ознайомитися зі всілякими їх варіантами (див. Зображення).

Думаю виникло резонне питання: "Якого дідька стільки кодувань? ". Їх достаток і причини виникнення можна порівняти з таким явищем, як кроссбраузерность / кроссплатформенность. Це коли один і той же сайт сайт відображається по-різному в різних інтернет-браузерах і на різних гаджет-пристроях. До речі у сайту "Нотатки Сіс.Адміна" з цим, як Ви помітили все в порядку :).

Всі ці кодування - робочі варіанти, створені розробниками "під себе" і рішення своїх завдань. Коли ж їх кількість перевалила за всі розумні межі, а в пошукових системах стали плодитися запити типу: "Як прибрати кракозябри в браузері? "- розробники стали ламати голову над приведенням всій цій каші до єдиного стандарту, щоб, так би мовити, всім було добре. І кодування Unicode, в общем-то, це "добре" і зробила. Тепер якщо такі проблеми і виникають, то вони носять локальний характер, і не знають як їх виправити тільки зовсім неосвічені користувачі (втім, часто біда з кодуванням і відображенням сайтів з'являється через те, що веб-майстер вказав на стороні сервера некоректний формат, і доводиться перемикати кодування в браузері).

Ну ось, власне, поки вся "базово необхідна" теорія, яка дозволить Вам «не плавати" в кодіровочних питаннях, тепер переходимо до практичної частини статті.

Вирішуємо проблеми з кодуванням або як прибрати кракозябри?

Отже, наша стаття була б неповною, якби ми не торкнулися призначені для користувача-побутові питання. Давайте їх і розглянемо і почнемо з того, як (за допомогою чого) можна подивитися кодування?

У будь-якій операційній системі є таблиця символів, її не потрібно докачувати, встановлювати - це даність згори, яка розташовується за адресою: "Пуск-програми-стандартні-службові-таблиця символів". Це таблиця векторних форм всіх встановлених у Вашій операційній системі шрифтів.

Вибравши "додаткові параметри" (набір Unicode) і відповідний тип накреслення шрифту, Ви побачите повний набір символів, в нього входять. Клікнувши по будь-якому символу, Ви побачите його код в форматі UTF-16, що складається з 4-х шістнадцяткових цифр (див. Зображення).

Тепер пара слів про те, як прибрати кракозябри. Вони можуть виникати в двох випадках:

1. З боку користувача - при читанні інформації в інтернет (наприклад, при заході на сайт);
2. Або, як говорилося трохи вище, з боку веб-майстри (наприклад, при створенні / редагуванні текстових файлів з підтримкою синтаксису мов програмування в програмі Notepad ++ або через вказівки неправильної кодування в коді сайту).

Розглянемо обидва варіанти.

№1. Ієрогліфи з боку користувача.
Припустимо, Ви запустили ОС і в якомусь із додатків у Вас відображаються горезвісні каракулі. Щоб це виправити, йдемо за адресою: "Пуск - Панель управління - Мова і регіональні стандарти - Зміна мови" і вибираємо зі списку, "Росія".

Також перевірте у всіх вкладках, щоб локалізація була "Росія / російська" - це так звана системна локаль.

Якщо Ви відкрили сайт і раптом зрозуміли, що почуття інформацію Вам не дають ієрогліфи, тоді варто поміняти кодування засобами браузера ( "Вид - Кодування"). На яку? Тут все залежить від виду цих кракозябри. Орієнтуйтеся на наступну шпаргалку (див. Зображення).

№2. Ієрогліфи з боку веб-майстри.
Дуже часто початківці розробники сайтів не надають великого значення кодуванні створюваного документа, в результаті чого потім і стикаються з вищезазначеної проблемою. Ось кілька простих базових рад для веб-майстрів, щоб виправити біду.

Щоб такого не відбувалося, заходимо в редактор Notepad ++ і вибираємо в меню пункт "Кодування". Саме він допоможе перетворити наявний документ. Питається, який? Найчастіше (якщо сайт на WordPress або Joomla), то "Перетворити в UTF-8 без BOM" (див. Зображення).

Зробивши таке перетворення, Ви побачите зміни в рядку статусу програми.

Також, щоб уникнути кракозябри необхідно примусово прописати інформацію про кодування в шапці сайту. Тим самим Ви вкажіть браузеру на те, що сайт варто зчитувати саме в прописаної кодуванні. Початківцю веб-майстру необхідно розуміти, що чехарда з кодуванням найчастіше виникає через невідповідність налаштувань сервера налаштувань сайту, тобто на сервері в базі даних прописана одна кодування, а сайт віддає сторінки в браузер в досконалої інший.

Для цього необхідно прописати "нахабно" (в шапку сайту, тобто, як часто, в файл header.php) між тегами <head> </ head> наступний рядок:

<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">

Прописавши такий рядок, Ви змусите браузер правильно інтерпретувати кодування, і ієрогліфи пропадуть.

Також може знадобитися коригування виведення даних з БД (MySQL). Робиться це так:

mysql_query ( 'SET NAMES utf8');
myqsl_query ( 'SET CHARACTER SET utf8');
mysql_query ( 'SET COLLATION_CONNECTION = "utf8_general_ci'" ');

Як варіант, можна ще зробити хід конем і прописати в файл .htaccess такі ось рядки:

# BEGIN UTF8
AddDefaultCharset utf-8
AddCharset utf-8 *
<IfModule mod_charset.c>
CharsetSourceEnc utf-8
CharsetDefault utf-8
</ IfModule>
# END UTF8

Всі вищенаведені методи (або деякі з них), швидше за все, допоможуть Вам і Вашим майбутнім відвідувачам позбутися ненависних ієрогліфів і проблем з кодуванням. На жаль, більш детально ми тут інструкцію по веб-майстерням штукам розглядати не будемо, думаю, що вони обов'язково розберуться в подробицях при бажанні (як-не-як у нас дещо інша тематика сайту).

Ну, ось і практична частина статті закінчена, залишилося підвести невеликі підсумки.

до змісту ↑

Післямова

Сьогодні ми познайомилися з таким поняттям, як кодування тексту. Упевнений, тепер при виникненні каракулей на моніторі комп'ютера ви не спасуете, а згадайте всі наведені тут методи і вирішите питання в свою користь!

На сім все, спасибі за увагу і до нових зустрічей.

PS Коментарі, як і завжди, чекають Ваших гарячих дискусій і питань, так що відписує.
PPS: За існування даної статті спасибі члену команди 25 КАДР

Ми в соц.сетях: ВК Facebook Twitter Telegram