Кодировки web-документов

История возникновения

Кодировка представляет собой таблицу символов, где каждой букве алфавита (а также цифрам и специальным знакам) присвоен свой уникальный номер - код символа.

Стандартизирована только половина таблицы, т.н. ascii-код - первые 128 символов, которые включают в себя буквы латинского алфавита. И с ними никогда не бывает проблем. Вторая же половина таблицы (а всего в ней 256 символов - по количеству состояний, который может принять один байт) отдана под национальные символы, и в каждой стране эта часть различна. Но только в России умудрились придумать целых 5 различных кодировок. Термин "различные" обозначает то, что одному и тому же символу соответствует разный цифровой код. Т.е. если мы неправильно определим кодировку текста, то нашему вниманию предстанет абсолютно нечитаемый текст.

Кодировки появились исторически. Первая широко используемая российская кодировка называлась koi-8. Её придумали, когда адаптировали к русскому языку систему unix. Это было ещё в семидесятых - до появления персоналок. И до сих пор в unix это считается основной кодировкой.

Потом появились первые персональные компьютеры, и началось победное шествие dos. Вместо того, чтобы воспользоваться уже придуманной кодировкой, microsoft решила сделать свою, ни с чем не совместимую. Так появилась dos-кодировка (или 866 кодовая страница). В ней, кстати, были введены спецсимволы для рисования рамок, что широко использовалось в программах, написанных под dos. Например, в том же norton commander-е.

Параллельно с ibm-совместимыми развивались и macintosh-компьютеры. Несмотря на то, что их доля в России очень мала, тем не менее потребность в русификации существовала и, разумеется, была придумана ещё одна кодировка - mac.

Время шло, и 1990 году microsoft явила на свет первую успешную версию windows 3.0-3.11. А вместе с ней и поддержку национальных языков. И снова был проделан такой же фокус, как и с dos. По непонятным причинам они не поддержали ни одну из уже существовавших ранее (как это сделала os/2, принявшая за стандарт dos-кодировку), а предложили новую win-кодировку (или кодовая страница 1251). Де-факто она стала самой распространённой в России.

И, наконец, пятый вариант кодировки связан уже не с конкретной фирмой, а с попытками стандартизации кодировок на уровне всей планеты. Занималась этим iso - международная организация по стандартам. И, догадайтесь, что они сделали с русским языком? Вместо того, чтобы принять за "стандартную русскую" какую-нибудь из вышеописанных, они придумали ещё одну (!) и назвали её длинным неудобоваримым сочетанием iso-8859-5. Разумеется, она тоже оказалась ни с чем не совместимой. И в настоящий момент эта кодировка практически нигде не применяется. Кажется, её используют только в базе данных oracle. По крайней мере, я ни разу не видел текст в этой кодировке. Тем не менее, её поддержка присутствует во всех броузерах.

Сейчас идет работа над созданием новой универсальной кодировки (unicode), в которой предполагается в одну кодовую таблицу запихнуть все языки мира. Тогда точно проблем не будет. Для этого на каждый символ отвели 2 байта. Таким образом, максимальное количество знаков в таблице расширилось до 65535. Но до момента, когда все перейдут на unicode, остаётся ещё слишком много времени.

web-дизайн и кодировки

А теперь о том, как все эти кодировки связаны с web-дизайном. Проблема заключается как в web-серверах, так и в броузерах. Обе составляющие должны общаться на одном языке и в одной кодировке, и только в этом случае броузер будет понимать то, что ему посылает сервер.

Со стороны сервера мы должны установить систему, которая умеет предварительно посылать сообщение о том, в какой кодировке будет прислана страница. А броузер это сообщение должен принять и, соответственно, настроиться на нужное отображение. Если всё сделано корректно, то проблем не возникает. Но действительность вносит свои коррективы и неправильная настройка web-сервера может привести к тому, что, послав сообщение о том, что сейчас будет страничка в кодировке win-1251, сервер присылает ее в koi-8. Разумеется, броузер путается, ведь он не в состоянии самостоятельно определить кодировку страницы. Он всего лишь пользуется указаниями сервера и, соответственно, показывает страничку неправильно.

Имеется способ указать кодировку странички не на сервере, а непосредственно в html-коде. Для этого используется специальная версия meta-тега с параметром charset, задающим нужный язык. Например, для странички, написанной в кодировке win1251, соответствующий код будет выглядеть так:

Но, к сожалению, с этим тегом связано несколько проблем. В России очень распространён способ, при котором web-сервер автоматически определяет, в какой кодировке приходит запрос от клиента и отдаёт страничку web-броузеру уже перекодированной. Вот тут нас и поджидает небольшой подводный камень. meta-тег может сыграть плохую шутку. Дело в том, что указания на страничке имеют приоритет по сравнению с командами, присылаемыми web-сервером и, правильно перекодировав страничку, сервер, тем не менее, не может изменить содержимое тега meta. Происходит несовпадение реальной кодировки, в которой пришла страничка, и указаниями в теге meta. Такую страничку нельзя будет нормально просмотреть и перекодировать средствами броузера. Выбор кодировки вручную в данном случае не поможет, т.к. тег meta имеет приоритет и над установками броузера. Единственный способ сделать это - сохранить страничку и удалить злосчастный тег.

В связи со всеми этими проблемами в РУНЕТ-е не рекомендуется применять данный тег вообще. В таком случае просмотр будет осуществляться в той кодировке, на которую настроен броузер, если сервер не пришлёт уведомление о кодировке документа. В случае несовпадения ее можно достаточно легко переключить. Кроме того, если по-умолчанию выставлять кодировку win-1251, то у 95% Ваших посетителей страничка сразу же будет показана правильно.

Проблемы с таблицами стилей

В последнее время в связи с широким распространением dhtml, css и 4-х версий броузеров возникла новая проблема, связанная с кодировками. И причиной её появления служит использование каскадных таблиц стилей (css).

Как известно, css позволяет нам задать конкретный шрифт, который будет использоваться для отображения текста. И, вроде бы, мы можем пользоваться абсолютно любым шрифтом, и от этого захватывает дух. Но проблема заключается в том, что шрифты берутся из набора, установленного на компьютере у посетителя, а вовсе не у Вас. И именно Ваш набор шрифтов совершенно не обязан быть у других. Как правило, его там и нет.

Что же делать? Неужели нельзя пользоваться разными шрифтами? Можно! Но с рядом ограничений и пониманием того факта, что даже при этих ограничениях у некоторых людей Ваша страничка не будет просматриваться.

Каковы же эти ограничения?

Первое, и основное, заключается в том, чтобы использовать только стандартные шрифты, поставляемые с windows и гарантированно находящиеся на машине клиента. А этих шрифтов, как известно, всего три. Вот их список: "arial", "times new roman", "courier".

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

Почему же нельзя использовать другие шрифты? Потому что в этом случае недостающий шрифт будет подменён ближайшим подходящим по-умолчанию. Для уменьшения вероятности этого мы и используем в css список заменяющих шрифтов. Но ещё хуже, если шрифт будет на компьютере, но окажется нерусифицированной версией. В этом случае текст будет отображен некими спецсимволами из набора знаков центральной Европы - всевозможные знаки с умляутами, апострофами, тильдами и т.п.

Из всего вышесказанного следует вывод - со шрифтами следует работать осторожно. И до сих пор много чисто текстовых надписей отливается в gif. Ситуация не изменится до тех пор, пока шрифт нельзя будет загружать на клиентскую машину, подобно тому, как это происходит с картинкой. На самом деле такая технология уже есть и реализована, например, в 4-ом internet explorer. Но она ещё слишком сыра и, что самое главное, шрифт должен быть представлен в специальном формате. Будем надеяться, что в будущем это станет стандартом, а пока нужно с осторожностью пользоваться шрифтами, отливая редкие в графику и используя в css только стандартные.

Статьи по теме

Как быстро запустить Laravel на Windows

Все привет, меня зовут Павел Жуковский и сегодня я расскажу о том как быстро развернуть Laravel на Windows. Как развернуть чере...

2024-09-30

Next.js

На мой взгляд, Next.js - это лучший на сегодняшний день инструмент для разработки веб-приложений. Обратите внимание: руководство актуально �...

2024-09-25

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения Либо ограничить доступ. OpenAI рассказа...

2024-09-05

WebSocket

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером че...

2024-08-01

Ошибка 404: что это такое и как ее использовать для бизнеса

Для SEO 404 Error — возможность сохранить клиента и позиции в выдаче. Как это сделать, в статье. Окно «404 Not Found» вид...

2024-07-17

PostgreSQL 16. Изоляция транзакций. Часть 2

Введение Данная статья является продолжением первой части: "PostgreSQL 16. Организация данных. Часть 1". Как и первая часть, эта является объед�...

2024-05-27

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

Аудит сайта – комплексный процесс, который позволяет оценить эффективность сайта и понять, на каком этапе теряются продажи, почему люди...

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13