Юникод в вебе: введение для начинающих. Кодирование символов

(коды от 0 до 127), т.е. одним байтом кодируются латинские буквы, цифры и специальные символы. Русские буквы (кириллица) представляются 16-битными (двухбайтными) кодами:

110XXXXX 10XXXXXX,

где X обозначены двоичные разряды для размещения кода символа в соответствии с таблицей UNICODE .

Юникод (англ. Unicode) - стандарт кодирования символов, позволяющий представить знаки почти всех письменных языков. Представляемые в юникоде символы кодируются целыми числами без знака. Эти числа будем называть кодами символов в юникоде или просто UNICODE . Юникод имеет несколько форм представления символов в компьютере: UTF-8, UTF-16 (UTF-16BE, UTF-16LE) и UTF-32 (UTF-32BE, UTF-32LE) . (Англ. Unicode transformation format - UTF).

Рассмотрим, как кодируется в UTF-8 буква Ж . Её UNICODE - 1046 10 или 0416 16 или 10000 010110 2 . UNICODE в двоичном виде разбивается на две части: пять левых бит и шесть правых. Левая часть дополняется до байта признаком 110 двухбайтного кода UTF-8 : 110 10000. К правой части приписываются два бита 10 признака продолжения многобайтного кода: 10 010110. Окончательно код буквы Ж в UTF-8 выглядит так:

110 10000 10 010110 2
или D0 96 16

Таким образом, русская буква кодируется дважды: сначала в 11-битный UNICODE , а затем - в 16-битный UTF-8.

В приведённой ниже таблице, кроме кодов UNICODE и UTF-8 в шестнадцатиричной системе счисления, даны коды UTF-8 в десятичной системе счисления и для сравнения коды кириллицы в кодировке CP-1251 , иначе называемой windovs-1251 .

Юникод (по-английски Unicode) - это стандарт кодирования символов. Проще говоря, это таблица соответствия текстовых знаков ( , букв, элементов пунктуации ) двоичным кодам. Компьютер понимает только последовательность нулей и единиц. Чтобы он знал, что именно должен отобразить на экране, необходимо присвоить каждому символу свой уникальный номер. В восьмидесятых, знаки кодировали одним байтом, то есть восемью битами (каждый бит это 0 или 1). Таким образом получалось, что одна таблица (она же кодировка или набор) может вместить только 256 знаков. Этого может не хватить даже для одного языка. Поэтому, появилось много разных кодировок, путаница с которыми часто приводила к тому, что на экране вместо читаемого текста появлялись какие-то странные кракозябры. Требовался единый стандарт, которым и стал Юникод. Самая используемая кодировка - UTF-8 (Unicode Transformation Format) для изображения символа задействует от 1 до 4 байт.

Символы

Символы в таблицах Юникода пронумерованы шестнадцатеричными числами. Например, кириллическая заглавная буква М обозначена U+041C. Это значит, что она стоит на пересечении строки 041 и столбца С. Её можно просто скопировать и потом вставить куда-либо. Чтобы не рыться в многокилометровом списке следует воспользоваться поиском. Зайдя на страницу символа, вы увидите его номер в Юникоде и способ начертания в разных шрифтах. В строку поиска можно вбить и сам знак, даже если вместо него отрисовывается квадратик, хотя бы для того, чтобы узнать, что это было. Ещё, на этом сайте есть специальные (и - случайные) наборы однотипных значков, собранные из разных разделов, для удобства их использования.

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

Сам консорциум Юникода не изобретает новых символов. В таблицы добавляются те значки, которые находят своё применение в обществе. Например, знак рубля активно использовался в течении шести лет прежде чем был добавлен в Юникод. Пиктограммы эмодзи (смайлики) тоже сначала получили широкое применение в Япониии прежде чем были включены в кодировку. А вот товарные знаки, и логотипы компаний не добавляются принципиально. Даже такие распространённые как яблоко Apple или флаг Windows. На сегодняшний день, в версии 8.0 закодировано около 120 тысяч символов.

Ряд цифр и букв имеют внешне схожее начертание, малоразличимое при небольшом размере шрифта. Например, цифры "0", "1" и буквы "О", "l" (L). Это является серьёзной проблемой, особенно в тех случаях, когда необходимо строго однозначное прочтение символов. К примеру, при записи ручкой на листке бумаги или печати на принтере своего буквенно-цифрового пароля. Решением данной проблемы пришлось заниматься первым программистам и фонт-дизайнерам (в XX-м веке, в самом начале компьютерной эры). Давно уже, появились специальные контрастные шрифты, такие как Inconsolata, Consolas (системный в OS Windows), Anonymous Pro, Deja Vu Sans Mono и многие другие. Некоторые из них можно бесплатно скачать по ссылкам с сайтов их авторов-создателей и с профильных Интернет-ресурсов.
Смотреть пример:
http://www.levien.com/type/myfonts/inconsolata.html

Если допускается техническими условиями и проектным заданием, то вместо цифрового нуля, в HTML-код ставится "Ø" (latin capital letter O with stroke, с косым штрихом, из модификации латинского алфавита для скандинавских языков - норвежского и датского), приблизительно похожий, своим начертанием, на перечёркнутый пополам нолик. В текстовом редакторе - такой значок берётся, копируется из таблицы спецсимволов (Special Character), и вставляется в нужную позицию в строке. Данный лайфхак-приём будет полезен, если возникают сложности с поиском и установкой на девайс специального фонта. Этот совет позволит сэкономить время и не перепутать цифру "0" (zero) с буквой "О" не только на мониторе вашего ПК, но и на экранах других устройств, где может не оказаться нужного шрифта. Такая форма записи, традиционно, применяется при обозначении на листе бумаги смешанной, буквенно-цифровой информации, например, своего пароля, кода доступа. Примечательно, что даже есть шутливое выражение " ", подчёркивающее важность наличия этого элемента, наделяющего символ определённым смыслом и значением. Графический вид нуля в разных типах шрифтов - можно посмотреть и сравнить их изображение на картинках с помощью специализированного сервиса на странице сайта:
http://www.fileformat.info/info/unicode/char/0030/fontsupport.htm

Рисунок 2

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

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

В попытках настроить ту или иную функцию интернета любой пользователь наверняка сталкивался с таким понятием, как «Юникод». Чтобы узнать, что означает это понятие, прочитайте данную статью до конца.

«Юникод»: определение

Под термином «Юникод» сегодня имеют в виду стандарт кодирования символов. Данный стандарт был предложен в 1991 году некоммерческой организацией Unicode Inc. Стандарт «Юникод» разрабатывался для объединения большого числа различных символов в одном документе. Страница, созданная на основе такой кодировки, может содержать в себе иероглифы, буквы, и математические символы. В данной кодировке без проблем отображаются все символы.

«Юникод»: причины создания

Еще задолго до появления системы «Юникод», кодировки выбирались исходя из предпочтений автора документа. Нередко по этой причине, чтобы прочитать один документ, приходилось использовать различные таблицы. Однако делать это приходилось по несколько раз. Это существенно усложняло жизнь обычным пользователям. Как уже было сказано ранее, в 1991 году для решения данной проблемы некоммерческая организация Unicode Inc. предложила использовать новый тип кодирования информации. Данный тип кодирования был создан для объединения самых разнообразных стандартов. Кодировка «Юникод» позволила добиться невозможного: создать инструмент, поддерживающий огромное количество разнообразных символов. Полученный результат превзошел ожидания: получились документы, которые одновременно могли содержать в себе как русский, так и английский текст, а также математические выражения и латынь. Перед созданием единой системы кодировки разработчикам предстояло решить целый ряд проблем, возникающих из-за существования огромного числа стандартов, которые уже существовали на данный момент. К самым распространенным из таких проблем относились ограниченность набора символов, эльфийские письмена, дублирование шрифтов и проблема преобразования различных кодировок.

«Юникод»: экскурс в историю

Представьте себе следующую картину: на дворе 80-е, компьютерная техника еще не получила столь широкого распространения и имеет вид, отличный от сегодняшнего. Каждая операционная система по-своему уникальна и доработана энтузиастами под те или иные конкретные нужды. В результате необходимость в обмене информацией привела к дополнительным доработкам. При попытке прочитать документ, созданный в другой операционной системе, на экране обычно выводились непонятные наборы символов. Это требовало дальнейшей работы с кодировкой, которую не всегда получалось выполнить быстро. Порой на обработку необходимого документа уходило несколько месяцев. Пользователи, которым часто приходится обмениваться информацией, стали создавать для себя особые таблицы преобразования. Работа с такими таблицами выявила одну интересную особенность: создавать такие таблицы необходимо одновременно по двум направлениям. Машина не может выполнить банальную инверсию вычислений. Для нее в правом столбце записан исходный файл, а в левом результат. Наоборот переставить их нельзя. При необходимости использовать в документе какие-то специальные символы, сначала их необходимо было добавить, а потом еще объяснить другому пользователю, что нужно с ними сделать, чтобы они не превратились в «крякозябры». Также стоит учитывать, что под каждую кодировку приходилось разрабатывать собственные шрифты. Это привело к созданию огромного количества дублей в операционной системе. Так, например, на одной странице пользователь мог наблюдать десяток шрифтов, идентичных стандартному Times New Roman, но с пометками UCS-2, UTF-16, UTF-8, ANSI. Таким образом, назрела необходимость разработки универсального стандарта.

«Юникод»: создатели

Начало истории создания «Юникод» можно отнести к 1987 году. Именно тогда Джо Беккер из компании Xerox вместе с Марком Дэвисом и Ли Коллинзом из компании Apple приступили к исследованиям в области практической разработки универсальной кодировки. В 1988 году Джо Беккер опубликовал проект создания международной многоязычной кодировки. Несколько месяцев спустя работая группа по разработке «Юникод» была расширена. В нее вошли такие специалисты, как Гленн Райт из Sun Microsystems, Майк Кернеган и Кен Уистлер из RLG. Это позволило завершить работы по предварительному формированию единого стандарта кодирования.

«Юникод»: общее описание

В основе кодировки Unicode лежит общее понятие символа. Под данным определением понимают абстрактное явление, которое существует в виде письменности, реализуемой через графемы. В «Юникод» каждому символу сопоставляется уникальный код, который принадлежит тому или иному блоку стандарта. Так, к примеру, графема «В» присутствует и в английском, и в русском языках, но ей соответствует два разных символа. К данным символам также может применяться преобразование в строчную букву. Это значит, что каждый из этих символов описывается ключом, набором свойств и названием.

«Юникод»: преимущества

От других современных систем кодировки «Юникод» отличается огромным запасом знаков для «шифрования» различных символов. Все дело в том, что предшествующие кодировки имели всего 8 бит. Это значит, что они поддерживали всего 28 символов. Новая разработка имела 216 символов, что стало большим шагом вперед. Таким образом появилась возможность закодировать практически все существующие алфавиты. Необходимость использования таблиц преобразования с появлением «Юникода» отпала. Наличие единого стандарта просто сводило их полезность к нулю. Вместе с тем исчезли и «крякозябры». Появление нового стандарта сделало их существование невозможным. Также была исключена необходимость создания дублей шрифтов.

«Юникод»: развитие

Несмотря на то, что прогресс не стоит на месте, кодировка «Юникод» продолжает удерживать лидирующие позиции в мире. Это стало возможным во многом благодаря тому, что он стал легко внедряемым и получил широкое распространение. При это не стоит считать, что сегодня используется такая же кодировка «Юникод», что и 25 лет назад. Сегодня используется версия 5.x.x. Число кодируемых символов возросло до 231. С момента возникновения до появления версии 2.0.0 кодировка «Юникод» увеличила число входящих в нее символов практически в два раза. В последующие годы такой рост возможностей продолжился. К моменту появления версии 4.0.0 возникла необходимость увеличения самого стандарта. В результате кодировка «Юникод» обрела вид, в котором мы ее знаем сегодня.

Что же еще полезного есть в «Юникод»? Кроме огромного, постоянно пополняющегося количества символов, кодировка «Юникод» имеет одну довольно полезную особенность. Это нормализация. Кодировка не тратит ресурсы компьютера на регулярную проверку одного и того же символа, который в разных алфавитах может иметь похожее написание. Для этой цели используется специальный алгоритм, который дает возможность вынести схожие символы отдельно графой и обращаться к ним, а не проверять каждый раз всю информацию. Всего разработано и внедрено четыре таких алгоритма. Преобразование в каждом из них осуществляется по определенному принципу, отличающемуся от других.

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

Что такое Юникод?

Юникод это возможность корректно отображать буквы и знаки пунктуации из различных языков на одной страницы. Он невероятно полезен: пользователи смогут работать с вашим сайтом по всему миру и он будет показывать то, что вы хотите - это может быть французский язык с диакритическими знаками или Kanji .

Юникод продолжает развиваться: сейчас актуальна версия 8.0 в которой более 120 тысяч символов (в оригинальной статье, опубликованной в начале 2014 года, речь шла о версии 6.3 и 110 тысячах символов).

Кроме букв и цифр, в Юникоде есть и другие символы и иконки. В последних версиях в их число вошли эмодзи , которые вы можете видеть в месседжере iOS.

Страницы HTML создаются из последовательности символов Юникода и при отсылке по сети они конвертируются в байты. Каждая буква и каждый символ любого языка имеют свой уникальный код и кодируются при сохранении файла.

При использовании системы кодирования UTF-8 вы можете напрямую вставлять в текст символы Юникода, но также можно добавлять их в текст, указывая цифровую символьную ссылку. Например, это символ сердечка и вы можете вывести этот символ, просто добавив код в разметку .

Эту числовую ссылку можно задавать как в десятичном формате, так и в шестнадцатеричном. Десятичный формат требует добавления в начале буквы x , запись даст то же самое сердечко ( ), что и предыдущий вариант. (2665 это шестнадцатеричный вариант 9829).

Если вы добавляете символ Юникода с помощью CSS, то вы можете использовать только шестнадцатеричные значения .

Некоторые наиболее часто используемые символы Юникода имеют более запоминаемые текстовые имена или аббревиатуры вместо цифровых кодов - это, например, амперсанд (& - &). Такие символы называются мнемоники в HTML , их полный список есть в Википедии .

Почему вам стоит использовать Юникод?

Хороший вопрос, вот несколько причин:

1. Чтобы использовать корректные символы из разных языков.
2. Для замены иконок.
3. Для замены иконок, подключаемых через @font-face .
4. Для задания CSS-классов

Корректные символы

Первая из причин не требует никаких дополнительных действий. Если HTML сохранен в формате UTF-8 и его кодировка передана по сети как UTF-8, все должно работать как надо.

Должно. К сожалению, не все браузеры и устройства поддерживают все символы Юникода одинаково (точнее, не все шрифты поддерживают полный набор символов). Например, недавно добавленные символы эмодзи поддерживаются не везде.

Для поддержки UTF-8 в HTML5 добавьте (при отсутствии доступа к настройкам сервера стоит добавить также ). При старом доктайпе используется ().

Иконки

Вторая причина использования Юникода это наличие большого количества полезных символов, которые можно использовать в качестве иконок. Например, , ≡ и .

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

Предположим, что я хочу подключить индикатор рейтинга со звездами на свою страницу. Я могу сделать это так:

★ ★ ★ ☆ ☆

Получится следующий результат:

Но если вам не повезет, вы увидите что-то вроде этого:

Тот же рейтинг на BlackBerry 9000

Так бывает, если используемые символы отсутствуют в шрифте браузера или устройства (к счастью, эти звездочки поддерживаются отлично и старые телефоны BlackBerry являются здесь единственным исключением).

Если символ Юникода отсутствует, на его месте могут быть разные символы от пустого квадрата (□) до ромба со знаком вопроса (�).

А как найти символ Юникода, который может подойти для использования в вашем дизайне? Вы можете поискать его на сайте типа Unicodinator , просматривая имеющиеся символы, но есть и лучший вариант. - этот отличный сайт позволяет вам нарисовать искомую иконку, после чего предлагает вам список похожих символов Юникода.

Использование Юникода с @font-face иконками

Если вы используете иконки, подключаемые с внешним шрифтом через @font-face , символы Юникода можно использовать в качестве запасного варианта. Таким образом вы можете показать похожий символ Юникода на тех устройствах или в браузерах, где @font-face не поддерживается:

Слева иконки Font Awesome в Chrome, а справа замещающие их символы Юникода в Opera Mini.

Многие инструменты для подбора @font-face используют диапазон символов Юникода из области для частного использования (private use area). Проблема этого подхода в том, что если @font-face не поддерживается, пользователю передаются коды символов без какого-либо смысла.

Отлично подходит для создания наборов иконок в @font-face и позволяет выбрать в качестве основы для иконки подходящий символ Юникода.

Но будьте внимательны - некоторые браузеры и устройства не любят отдельные символы Юникода при их использовании с @font-face . Имеет смысл проверить поддержку символов Юникода с помощью Unify - это приложение поможет вам определить, насколько безопасно использование символа в наборе иконок @font-face .

Поддержка символов Юникода

Основная проблема с использованием символов Юникода в качестве запасного варианта это плохая поддержка в скринридерах (опять-таки, некоторые сведения об этом можно найти на Unify), поэтому важно осторожно выбирать используемые символы.

Если ваша иконка это просто декоративный элемент рядом с текстовой меткой, читаемым скринридером, вы можете особо не волноваться. Но если иконка расположена отдельно, стоит добавить скрытую текстовую метку, чтобы помочь пользователям скринридеров. Даже если символ Юникода будет считан скринридером, есть вероятность, что он будет сильно отличен от своего предназначения. Например, ≡ (≡) в качестве иконки-гамбургера будет считан VoiceOver на iOS как “идентичный”.

Юникод в названиях CSS-классов

То, что Юникод можно использовать в названиях классов и в таблицах стилей известно с 2007 года. Именно тогда Джонатан Снук написал об использовании символов Юникода во вспомогательных классов при верстке скругленных углов . Особого распространения эта идея не получила, но о возможности использовать Юникод в названиях классов (спецсимволы или кириллицу) знать стоит.

Выбор шрифтов

Совсем немногие шрифты поддерживают полный набор символов Юникода, поэтому при выборе шрифта сразу проверяйте наличие нужных вам символов.

Много иконок в Segoe UI Symbol или Arial Unicode MS . Эти шрифты есть и на PC и на Mac; в Lucida Grande также достаточное количество символов Юникода. Вы можете добавить эти шрифты в декларацию font-family , чтобы обеспечить наличие максимального количества символов Юникода для пользователей, у которых эти шрифты установлены.

Определение поддержки Юникода

Было бы очень удобно иметь возможность проверить наличие того или иного символа Юникода, но нет гарантированного способа сделать это.

Символы Юникода могут быть эффективны при наличии поддержки. Например, эмодзи в теме письма выделяет его на фоне остальных в почтовом ящике.

Заключение

Эта статья затрагивает лишь основы Юникода. Надеюсь, она окажется полезной и поможет вам лучше понять Юникод и эффективно применять его.

Список ссылок

• (Генератор набора иконок @font-face на основе Юникода)
• Shape Catcher (Инструмент для распознавания символов Юникода)
• Unicodinator (таблица символов Юникода)
• Unify (Проверка поддержки символов Юникода в браузерах)
• Unitools (Коллекция инструментов для работы с Юникодом)