Заметки по практике HTML, CSS, JS
November 8

Emoji, Glyphs : разница есть…

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

Разница между эмодзи и глифами

  1. Эмодзи (например, 🔔 🔔)
    • Это изображения, встроенные в шрифты или представленные как векторные/растровые изображения (PNG/SVG) в некоторых реализациях.
    • Эмодзи обычно отображаются цветными в большинстве современных систем (iOS, Android, Windows, macOS), что вызывает сложности с их стилизацией.
    • Они работают как inline-элементы, но их цвет не изменяется, так как браузеры отображают эмодзи как цветные изображения по умолчанию, а не как простые текстовые символы.
  2. Глифы (например, ␇ ⏣)
    • Глифы представляют собой символы из Unicode, которые отображаются в виде векторных форм, содержащихся в шрифте.
    • Глифы легко стилизуются через color, font-size, text-shadow и другие CSS-свойства, так как они обрабатываются как обычный текст.
    • Поддерживают полное управление стилем (цвет, размер, обводка и т.д.) и более предсказуемо ведут себя на всех платформах.

Как это работает на уровне WebKit (или другого браузерного движка)

  • Отображение символов: Браузер, получая символ Unicode (будь то эмодзи или глиф), использует встроенные шрифты системы или загруженные веб-шрифты, чтобы отобразить его.
  • Эмодзи как изображения: Для цветных эмодзи браузеры часто обращаются к системе, чтобы использовать встроенные цветные эмодзи-шрифты, такие как Apple Color Emoji на iOS/macOS или Segoe UI Emoji на Windows. Эти шрифты содержат изображения эмодзи в формате растровых данных, встроенных в шрифт, поэтому они не поддерживают стандартные текстовые стили.
  • Глифы: Обычно представлены монохромными формами в обычных шрифтах, например Arial или Times New Roman. Они обрабатываются как текст, позволяя полное управление их стилем через CSS.

Причины различий в стилизации

  • Цветные шрифты и формат: Эмодзи-шрифты используют цветные форматы (например, SVG-in-OpenType, CBDT/CBLC, COLR/CPAL), которые ограничивают CSS-стилизацию.
  • Поддержка браузерами: WebKit, Blink, Gecko и другие движки специально поддерживают отображение эмодзи в цвете, хотя это часто ограничивает возможности их стилизации. Глифы из простых текстовых шрифтов стилизуются проще, так как они рендерятся в черно-белом виде.

Принцип отображения дополнительных символов

  1. Система и шрифты: При запросе символа браузер сначала проверяет активные шрифты (веб-шрифты, затем системные) на наличие нужного символа.
  2. Порядок шрифтов: Если символ найден в шрифте, он отображается оттуда. Если символ — эмодзи, браузер будет использовать цветной эмодзи-шрифт, если он поддерживается.
  3. Отображение как изображения: Цветные эмодзи обрабатываются как растровые данные, встроенные в шрифты. Это позволяет воспроизводить их как изображения, но ограничивает стилизацию.
  4. Глифы и их рендеринг: Глифы отображаются как обычный текст, что позволяет менять их цвет, размер, добавлять обводки и т.д.

Подытожим

  • Эмодзи: Используются как растровые или векторные изображения, встроенные в цветные шрифты, и ограничены в стилизации.
  • Глифы: Обрабатываются как текст и полностью поддерживают CSS-стили.

Чтобы стилизация (цвет и т.д.) работала, лучше использовать символы из обычных шрифтов (например, глифы), а не эмодзи.