Почему в html текст на русском заменяется странными символами

Атрибут charset

Указывает кодировку документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега , которая задавала кодировку в предыдущих версиях HTML и XHTML.

Синтаксис

Значения

Название кодировки, например UTF-8.

Значение по умолчанию

HTML5 IE Cr Op Sa Fx

      
Типовой документ.
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Почему вместо русского текста выводятся ромбики?

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

Рис. 1. Нечитаемый текст в браузере

Такое происходит при сохранении файла в неверной кодировке, например, в ANSI. Недостаточно добавить в код, нужно чтобы и сам HTML-файл был сохранён в кодировке UTF-8. Для этого следует использовать редакторы, которые поддерживают разные кодировки и могут преобразовать текст из одной кодировки в другую. К примеру, в популярном редакторе Notepad++ под Windows для нужной кодировки следует выбрать меню Кодировки > Преобразовать в UTF-8 (рис. 2).

Рис. 2. Преобразование кодировки в Notepad++

После сохранения файла текст в браузере будет отображаться корректно.

См. также

Юникод: необходимый практический минимум для каждого разработчика

Юникод — это очень большой и сложный мир, ведь стандарт позволяет ни много ни мало представлять и работать в компьютере со всеми основными письменностями мира. Некоторые системы письма существуют уже более тысячи лет, причём многие из них развивались почти независимо друг от друга в разных уголках мира. Люди так много всего придумали и оно зачастую настолько непохоже друг на друга, что объединить всё это в единый стандарт было крайне непростой и амбициозной задачей.

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

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

Зачем понадобился Юникод?

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

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

У такого подхода в целом и однобайтовых кодировок в частности был ряд существенных недостатков:

1. Можно было одновременно работать лишь с 256 символами, причём первые 128 были зарезервированы под латинские и управляющие символы, а во второй половине кроме символов национального алфавита нужно было найти место для символов псевдографики (╔ ╗).
2. Шрифты были привязаны к конкретной кодировке.
3. Каждая кодировка представляла свой набор символов и конвертация из одной в другую была возможна только с частичными потерями, когда отсутствующие символы заменялись на графически похожие.
4. Перенос файлов между устройствами под управлением разных операционных систем был затруднителен. Нужно было либо иметь программу-конвертер, либо таскать вместе с файлом дополнительные шрифты. Существование Интернета каким мы его знаем было невозможным.
5. В мире существуют неалфавитные системы письма (иероглифическая письменность), которые в однобайтной кодировке непредставимы в принципе.

Основные принципы Юникода

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

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

Вводится понятие абстрактного юникод-символа, существующего исключительно в виде умозрительной концепции и договорённости между людьми, закреплённой стандартом. Каждому юникод-символу поставлено в соответствие неотрицательное целое число, именуемое его кодовой позицией (code point).

Так, например, юникод-символ U+041F — это заглавная кириллическая буква П. Существует несколько возможностей представления данного символа в памяти компьютера, ровно как и несколько тысяч способов отображения его на экране монитора. Но при этом П, оно и в Африке будет П или U+041F.

Это хорошо нам знакомая инкапсуляция или отделение интерфейса от реализации — концепция, отлично зарекомендовавшая себя в программировании.

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

Привет U+041F U+0440 U+0438 U+0432 U+0435 U+0442 

записать на листочке, упаковать в конверт и переслать в любой конец Земли. Если там знают о существовании Юникода, то текст будет воспринят ими ровно так же, как и нами с вами. У них не будет ни малейших сомнений, что предпоследний символ — это именно кириллическая строчная е (U+0435), а не скажем латинская маленькая e (U+0065). Обратите внимание, что мы ни слова не сказали о байтовом представлении.

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

Примеры различных юникод-символов

• U+0000: нулевой символ;
• U+D800–U+DFFF: младшие и старшие суррогаты для технического представления кодовых позиций в диапазоне от 10000 до 10FFFF (читай: за пределами БМЯП/BMP) в семействе кодировок UTF-16;
• и т.д.

• U+0020 (пробел);
• U+00A0 (неразрывный пробел,   в HTML);
• U+2002 (полукруглая шпация или En Space);
• U+2003 (круглая шпация или Em Space);
• и т.д.

• U+0300 и U+0301: знаки основного (острого) и второстепенного (слабого) ударений;
• U+0306: кратка (надстрочная дуга), как в й;
• U+0303: надстрочная тильда;
• и т.д.

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

Кодовое пространство Юникода

Кодовое пространство Юникода состоит из 1 114 112 кодовых позиций в диапазоне от 0 до 10FFFF. Из них к девятой версии стандарта значения присвоены лишь 128 237. Часть пространства зарезервирована для частного использования и консорциум Юникода обещает никогда не присваивать значения позициям из этих специальный областей.

Ради удобства всё пространство поделено на 17 плоскостей (сейчас задействовано шесть их них). До недавнего времени было принято говорить, что скорее всего вам придётся столкнуться только с базовой многоязыковой плоскостью (Basic Multilingual Plane, BMP), включающей в себя юникод-символы от U+0000 до U+FFFF. (Забегая немного вперёд: символы из BMP представляются в UTF-16 двумя байтами, а не четырьмя). В 2016 году этот тезис уже вызывает сомнения. Так, например, популярные символы Эмодзи вполне могут встретиться в пользовательском сообщении и нужно уметь их корректно обрабатывать.

Кодировки

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

Стандарт Юникода включает в себя описание ряда юникод-кодировок, например UTF-8 и UTF-16BE/UTF-16LE, которые позволяют кодировать всё пространство кодовых позиций. Конвертация между этими кодировками может свободно осуществляться без потерь информации.

Также никто не отменял однобайтные кодировки, но они позволяют закодировать свой индивидуальный и очень узкий кусочек юникод-спектра — 256 или менее кодовых позиций. Для таких кодировок существуют и доступны всем желающим таблицы, где каждому значению единственного байта сопоставлен юникод-символ (см. например CP1251.TXT). Несмотря на ограничения, однобайтные кодировки оказываются весьма практичными, если речь идёт о работе с большим массивом моноязыковой текстовой информации.

Из юникод-кодировок самой распространённой в Интернете является UTF-8 (она завоевала пальму первенства в 2008 году), главным образом благодаря её экономичности и прозрачной совместимости с семибитной ASCII. Латинские и служебные символы, основные знаки препинания и цифры — т.е. все символы семибитной ASCII — кодируются в UTF-8 одним байтом, тем же, что и в ASCII. Символы многих основных письменностей, не считая некоторых более редких иероглифических знаков, представлены в ней двумя или тремя байтами. Самая большая из определённых стандартом кодовых позиций — 10FFFF — кодируется четырьмя байтами.

Обратите внимание, что UTF-8 — это кодировка с переменной длиной кода. Каждый юникод-символ в ней представляется последовательностью кодовых квантов с минимальной длиной в один квант. Число 8 означает битовую длину кодового кванта (code unit) — 8 бит. Для семейства кодировок UTF-16 размер кодового кванта составляет, соответственно, 16 бит. Для UTF-32 — 32 бита.

Если вы пересылаете по сети HTML-страницу с кириллическим текстом, то UTF-8 может дать весьма ощутимый выигрыш, т.к. вся разметка, а также JavaScript и CSS блоки будут эффективно кодироваться одним байтом. К примеру главная страница Хабра в UTF-8 занимает 139Кб, а в UTF-16 уже 256Кб. Для сравнения, если использовать win-1251 с потерей возможности сохранять некоторые символы, то размер, по сравнению с UTF-8, сократится всего на 11Кб до 128Кб.

Для хранения строковой информации в приложениях часто используются 16-битные юникод-кодировки в силу их простоты, а так же того факта, что символы основных мировых систем письма кодируются одним шестнадцатибитовым квантом. Так, например, Java для внутреннего представления строк успешно применяет UTF-16. Операционная система Windows внутри себя также использует UTF-16.

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

Для корректной интерпретации текста, прочитанного с диска или из сетевого сокета, необходимо сначала определить его кодировку. Это делается либо с использованием метаинформации, предоставленной пользователем, записанной в тексте или рядом с ним, либо определяется эвристически.

В сухом остатке

Информации много и имеет смысл привести краткую выжимку всего, что было написано выше:

• Юникод постулирует чёткое разграничение между символами, их представлением в компьютере и их отображением на устройстве вывода.
• Юникод-символы не всегда соответствуют символу в традиционно-наивном понимании, например букве, цифре, пунктуационному знаку или иероглифу.
• Кодовое пространство Юникода состоит из 1 114 112 кодовых позиций в диапазоне от 0 до 10FFFF.
• Базовая многоязыковая плоскость включает в себя юникод-символы от U+0000 до U+FFFF, которые кодируются в UTF-16 двумя байтами.
• Любая юникод-кодировка позволяет закодировать всё пространство кодовых позиций Юникода и конвертация между различными такими кодировками осуществляется без потерь информации.
• Однобайтные кодировки позволяют закодировать лишь небольшую часть юникод-спектра, но могут оказаться полезными при работе с большим объёмом моноязыковой информации.
• Кодировки UTF-8 и UTF-16 обладают переменной длиной кода. В UTF-8 каждый юникод-символ может быть закодирован одним, двумя, тремя или четырьмя байтами. В UTF-16 — двумя или четырьмя байтами.
• Внутренний формат хранения текстовой информации в рамках отдельного приложения может быть произвольным при условии корректной работы со всем пространством кодовых позиций Юникода и отсутствии потерь при трансграничной передаче данных.

Краткое замечание про кодирование

С термином кодирование может произойти некоторая путаница. В рамках Юникода кодирование происходит дважды. Первый раз кодируется набор символов Юникода (character set), в том смысле, что каждому юникод-символу ставится с соответствие кодовая позиция. В рамках этого процесса набор символов Юникода превращается в кодированный набор символов (coded character set). Второй раз последовательность юникод-символов преобразуется в строку байтов и этот процесс также называется кодирование.

В англоязычной терминологии существуют два разных глагола to code и to encode, но даже носители языка зачастую в них путаются. К тому же термин набор символов (character set или charset) используется в качестве синонима к термину кодированный набор символов (coded character set).

Всё это мы говорим к тому, что имеет смысл обращать внимание на контекст и различать ситуации, когда речь идёт о кодовой позиции абстрактного юникод-символа и когда речь идёт о его байтовом представлении.

В заключение

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

Почему в html текст на русском заменяется странными символами

Электронные книги вошли в нашу повседневную жизнь и продолжают укреплять свою позицию. PDF – один из самых популярных форматов, который можно встретить на интернет просторах, посещая сайты и магазины. Но бывают досадные ситуации, когда текст, который мы хотим скопировать, просто превращается в непонятные символы. Кто-то на них говорит иероглифы, другие – кракозябры . Как же исправить такую ситуацию?

Я не уверен, что следующие советы помогут для всех решить проблему, но частичное решение ее все же возможно.

Давайте сразу отбросим отсканированые и нераспознанные PDF документы, из которых просто невозможно скопировать текст. Это равносильно попытке копирования текста из обычной фотографии, сделанной на ваш смартфон. В таком случае текст нужно распознать специальной программой, вроде ABBYY FineReader.

Наша книга (тестовая) полностью поддерживает копирование текста и изображений. Но при попытке перенести такой текст в Microsoft Office Word, можно видеть такие нечитабельные символы как на скриншоте сверху статьи.

Способ 1 (длинный).

Вся проблема в шрифтах и системе кодирования. PDF документ, с которого производится копирование имеет встроенные шрифты. И если такие шрифты отсутствуют в вашей операционной системе, то вы увидите такие кракозябры .

Чтобы можно было видеть нормальные буквы, при переносе текста нужно устанавливать соответствующие шрифты .

Чтобы узнать какие именно нужно инсталлировать на компьютер шрифты, нужно открыть наш PDF документ поддерживаемой программой (на примере PDF-XChange Viewer ). Далее идем в «Файл» → «Свойства документа» (можно нажать сочетание клавиш Ctrl + D).

Далее нажимаем на параметр «Шрифты» и видим список шрифтов, установленных в документе. Их и нужно найти в интернете и установить на компьютер. Для этого на загруженном шрифте два раза нажимаем левой клавишей мыши (то есть, открываем его), а потом нажимаем на кнопку «Установить» .

Далее копируем и вставляем текст из PDF документа, выделяем его в Microsoft Office Word (или в другом офисном редакторе, который у вас установлен) и выбираем из списка недавно установленный шрифт. Все должно быть нормально. Снизу на скриншоте видно, что я намеренно применил нужный шрифт только на одно предложение, другую часть текста прочитать невозможно.

Способ 2 (быстро и удобно).

Другой, более правильный и простой вариант – это использование программы (или плагина к редактору Notepad ++ ), которая называется Shtirlitz. Программа старая, давно не обновлялась, однако работает отлично. Прямо на лету выполняется вставка нормального текста. Никаких шрифтов не требуется. После копирования текста с данной программы и дальнейшей вставкой его в редактор Microsoft Office Word, все буквы и символы будут читаться и с использованием любого шрифта. Первый вариант не позволяет изменить шрифт. То есть, всегда, и на каждом компьютере нужно будет инсталлировать нужные шрифты для чтения только определенного документа. А если таких документов несколько сотен? Поэтому желательно воспользоваться этой программой для декодирования.

Способ 3 (онлайн).

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

Обратите внимание, что кодирование нашей тестовой книги windows-1252. Для нас нужна кодировка windows-1251. Поэтому переходим на сервис online-decoder.com.

Там можно видеть окно, где написано «Скопируйте сюда текст». Вставляем наш непонятный текст и нажимаем на кнопку «Подбор». Такой способ будет правильно использовать если вам неизвестна система кодирования. Декодер попытается подобрать ее автоматически. Если вы знаете исходное кодирование своей кракозябры, то можете смело нажимать кнопку «Точно», указав перед этим кодирование, напротив текста «Я знаю нужные кодировки».

Второй сервис «artlebedev.ru». Есть два способа для декодирования: «Просто» и «Сложно». Первый вариант работает на автомате. Второй – дает возможность, при необходимости, указать исходное и конечное кодирование.

Третий онлайн сервис для декодирования текста «2cyr.com» имеет отличие от предыдущих в том, что позволяет выбирать язык. Кроме русского, доступен также и украинский язык интерфейса (и надеюсь, что кодирования также, просто не было возможности проверить).

Есть также два режима: автоматический и режим эксперта. Во втором можно указывать исходное и конечное кодирование. Рекомендуется автоматический режим. После того как вставили текст, напротив слов «Выберите кодировку : » , нужно выбрать «Автоматически (рекомендуется)» и нажать на кнопку «Ок».

Все три сервиса отлично работали на моей тестовой книге в формате PDF с кракозябрами.

Способ 4 (с помощью макросов для Microsoft Office Word ).

Еще один вариант для программы Microsoft Office Word. Никаких шрифтов ставить не нужно. Создаем макрос со следующим кодом:

Код 1: «Перекодирование 1252 в 1251»

Sub Corr1252_1251()
Dim s$, i&, j&
s = Selection
For i = 1 To Len(s)
j = AscW(Mid$(s, i, 1))
If j < 256 Then
Mid$(s, i, 1) = Chr(j)
‘ Debug.Print i & vbTab & Mid$(s, i, 1) & vbTab & j & vbTab & Chr(j)
End If
Next
Selection.Text = s
End Sub

Код 2: «Перекодирование 1252 в 1251 (с учетом русской буквы Ё)»

Sub changeToRus()
‘
‘ Замена кракозябр на кириллические буквы
‘ CP1252 -> CP1251
‘
For i = 192 To 255
a1 = i
a = Trim(«^u») & Trim(Str(a1))
‘ Формирование запроса для поля Найти
sRus = Array(«А», «Б», «В», «Г», «Д», «Е», «Ж», «З», «И», «Й», «К», «Л», «М», «Н», «О», _
«П», «Р», «С», «Т», «У», «Ф», «Х», «Ц», «Ч», «Ш», «Щ», «Ъ», «Ы», «Ь», «Э», «Ю», «Я», _
«а», «б», «в», «г», «д», «е», «ж», «з», «и», «й», «к», «л», «м», «н», «о», _
«п», «р», «с», «т», «у», «ф», «х», «ц», «ч», «ш», «щ», «ъ», «ы», «ь», «э», «ю», «я»)
‘ Формирование массива кириллических букв для поля Заменить
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = a
.Replacement.Text = sRus(i — 192)
.Forward = True
.Wrap = wdFindContinue
.MatchCase = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
‘ Выполнение замены по тексту
Next i

‘ Замена Ё и ё
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = ChrW(168)
.Replacement.Text = «Ё»
.Forward = True
.Wrap = wdFindContinue
End With
Selection.Find.Execute Replace:=wdReplaceAll
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = ChrW(184)
.Replacement.Text = «ё»
.Forward = True
.Wrap = wdFindContinue
End With
Selection.Find.Execute Replace:=wdReplaceAll
End Sub

Выделяем вставленный текст с иероглифами. Тогда запускаем макрос на выполнение и получаем нормальный текст, который можно спокойно редактировать, изменять шрифты и т.д.

Для добавления готового макроса в Word делаем следующее:

Открываем редактор и переходим в «Вид».

Там находим кнопку «Макросы» и нажимаем на нее.

Даем для макроса имя (любое, оно будет автоматически изменено при полном копировании кода выше).

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

Как видно, макрос начинается так:

Sub названиемакроса()
дальше идет код макроса
End Sub

Название макроса может любым, но не цифры и не должно быть пробелов. Может быть так: декодирование_кракозябр_с_ё. Но не может быть так: декодирование кракозябр с ё.

То есть, для нас нужно заменить для нашего созданного пустого макроса весь текст с кодом, который показан выше.

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

Ваш текст должен стать читабельным.

Источник макросов для Microsoft Office Word: http://wordexpert.ru

Как ни крути, но это не полное решение ситуации. Поиск после данных действий в самом PDF документе работать не будет. Проблема остается. Кто может подсказать ее решение, просьба писать в комментариях.