Символы-эмодзи: два режима отображения
Для символов-эмодзи в Юникоде предусмотрено два режима отображения: цветной и текстовый.
В текстовом режиме символы-эмодзи должны отображаться (в браузерах, текстовых редакторах, других программах) так же, как и символы-буквы. Когда пользователь каким-то образом указывает цвет текста в своей программе, то цвет символов-эмодзи в текстовом режиме совпадает с цветом символов-букв.
В цветном режиме символы-эмодзи раскрашены в некие рекомендованные цвета, и эти цвета не меняются, если пользователь как-то меняет цвет всего текста в программе.
В браузерах на движке «Chromium» («Google Chrome», «Microsoft Edge», «Яндекс.Браузер» и других), а также в текстовом редакторе «VS Code» (он тоже сделан на базе движка «Chromium») режимом по умолчанию для символов-эмодзи является цветной режим. Именно поэтому в предыдущем посте символы-эмодзи U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi) отображались раскрашенными в разные цвета.
Для переключения отображения одного символа-эмодзи в текстовый режим можно добавить после этого символа-эмодзи специальный управляющий символ U+FE0E («Variation Selector-15» или по-русски «селектор начертания-15»).
Проверка на практике
Чтобы посмотреть, как это выглядит на практике, я взял тестовые файлы «test.js» и «test.html» из предыдущего поста и расширил их. После этого я скопировал файл «test.js» и поменял ему расширение на «.txt», в результате получил третий тестовый файл - «test.txt». Содержимое файлов «test.js» и «test.txt» одинаковое, но они по-разному отображаются в редакторе «VS Code».
Интересная нам строка в файле «test.html» теперь выглядит так:
const cars = ["🚗", "🚙", "🚕"];
const cars2 = ["🚗︎", "🚙︎", "🚕︎"];
Напомню, это только часть файла «test.html», которая нам сейчас интересна.
Содержимое файлов «test.js» и «test.txt» теперь выглядит так:
const cars = ["🚗", "🚙", "🚕"];
const cars2 = ["🚗︎", "🚙︎", "🚕︎"];
В добавленной второй строке символы-эмодзи должны отобразиться в текстовом режиме.
Вот как эти три тестовых файла отображаются в браузере «Microsoft Edge» и редакторе «VS Code», картинка-иллюстрация:
На вышеприведенной иллюстрации можно заметить, что при отображении в текстовом режиме символы-эмодзи в браузере и при отображении файла «test.txt» в редакторе «VS Code» отобразились тем же цветом, что и символы-буквы. При отображении в цветном режиме символы-эмодзи отобразились в рекомендованных цветах, которые не совпали с цветом символов-букв и других символов.
При отображении в текстовом режиме символы-эмодзи при отображении файла «test.js» в редакторе «VS Code» раскрасились в цвет строкового литерала (в данном случае - коричневый) для языка JavaScript, как и должно быть по логике подсветки синтаксиса. В цветном режиме символы-эмодзи остались в «своих» цветах, не отреагировав на раскраску синтаксиса языка JavaScript. Это еще одна причина, почему программисты в текстах своих программ обычно не используют символы-эмодзи.
Чтобы совсем всё стало понятно, можно взглянуть на двоичное представление файла «test.js» (у файла «test.txt» содержимое аналогичное), картинка-иллюстрация:
Напомню, файлы «test.js» и «test.txt» написаны в кодировке UTF-8.
На вышеприведенной иллюстрации красным маркером подчеркнуты байты символов-эмодзи U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi). Каждый из них занимает по четыре байта:
«F0 9F 9A 97» (символ-эмодзи U+1F697),
«F0 9F 9A 99» (символ-эмодзи U+1F699),
«F0 9F 9A 95» (символ-эмодзи U+1F695).
Синим маркером подчеркнуты байты управляющего символа U+FE0E. Этот символ занимает три байта:
«EF B8 8E» (управляющий символ U+FE0E).
Сам управляющий символ в браузере или в редакторе не виден, но его действие (смена режима отображения символа-эмодзи на текстовый режим) видно. В редакторе «VS Code» этот управляющий символ можно вставить в нужное место в тексте из буфера обмена. В буфер обмена этот символ можно получить разными путями, например, с сайта с таблицей символов Юникода.
В текстовом режиме символы-эмодзи должны отображаться (в браузерах, текстовых редакторах, других программах) так же, как и символы-буквы. Когда пользователь каким-то образом указывает цвет текста в своей программе, то цвет символов-эмодзи в текстовом режиме совпадает с цветом символов-букв.
В цветном режиме символы-эмодзи раскрашены в некие рекомендованные цвета, и эти цвета не меняются, если пользователь как-то меняет цвет всего текста в программе.
В браузерах на движке «Chromium» («Google Chrome», «Microsoft Edge», «Яндекс.Браузер» и других), а также в текстовом редакторе «VS Code» (он тоже сделан на базе движка «Chromium») режимом по умолчанию для символов-эмодзи является цветной режим. Именно поэтому в предыдущем посте символы-эмодзи U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi) отображались раскрашенными в разные цвета.
Для переключения отображения одного символа-эмодзи в текстовый режим можно добавить после этого символа-эмодзи специальный управляющий символ U+FE0E («Variation Selector-15» или по-русски «селектор начертания-15»).
Проверка на практике
Чтобы посмотреть, как это выглядит на практике, я взял тестовые файлы «test.js» и «test.html» из предыдущего поста и расширил их. После этого я скопировал файл «test.js» и поменял ему расширение на «.txt», в результате получил третий тестовый файл - «test.txt». Содержимое файлов «test.js» и «test.txt» одинаковое, но они по-разному отображаются в редакторе «VS Code».
Интересная нам строка в файле «test.html» теперь выглядит так:
const cars = ["🚗", "🚙", "🚕"];
const cars2 = ["🚗︎", "🚙︎", "🚕︎"];
Напомню, это только часть файла «test.html», которая нам сейчас интересна.
Содержимое файлов «test.js» и «test.txt» теперь выглядит так:
const cars = ["🚗", "🚙", "🚕"];
const cars2 = ["🚗︎", "🚙︎", "🚕︎"];
В добавленной второй строке символы-эмодзи должны отобразиться в текстовом режиме.
Вот как эти три тестовых файла отображаются в браузере «Microsoft Edge» и редакторе «VS Code», картинка-иллюстрация:
На вышеприведенной иллюстрации можно заметить, что при отображении в текстовом режиме символы-эмодзи в браузере и при отображении файла «test.txt» в редакторе «VS Code» отобразились тем же цветом, что и символы-буквы. При отображении в цветном режиме символы-эмодзи отобразились в рекомендованных цветах, которые не совпали с цветом символов-букв и других символов.
При отображении в текстовом режиме символы-эмодзи при отображении файла «test.js» в редакторе «VS Code» раскрасились в цвет строкового литерала (в данном случае - коричневый) для языка JavaScript, как и должно быть по логике подсветки синтаксиса. В цветном режиме символы-эмодзи остались в «своих» цветах, не отреагировав на раскраску синтаксиса языка JavaScript. Это еще одна причина, почему программисты в текстах своих программ обычно не используют символы-эмодзи.
Чтобы совсем всё стало понятно, можно взглянуть на двоичное представление файла «test.js» (у файла «test.txt» содержимое аналогичное), картинка-иллюстрация:
Напомню, файлы «test.js» и «test.txt» написаны в кодировке UTF-8.
На вышеприведенной иллюстрации красным маркером подчеркнуты байты символов-эмодзи U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi). Каждый из них занимает по четыре байта:
«F0 9F 9A 97» (символ-эмодзи U+1F697),
«F0 9F 9A 99» (символ-эмодзи U+1F699),
«F0 9F 9A 95» (символ-эмодзи U+1F695).
Синим маркером подчеркнуты байты управляющего символа U+FE0E. Этот символ занимает три байта:
«EF B8 8E» (управляющий символ U+FE0E).
Сам управляющий символ в браузере или в редакторе не виден, но его действие (смена режима отображения символа-эмодзи на текстовый режим) видно. В редакторе «VS Code» этот управляющий символ можно вставить в нужное место в тексте из буфера обмена. В буфер обмена этот символ можно получить разными путями, например, с сайта с таблицей символов Юникода.