Полное руководство по типографике CJK в CSS

Правильное отображение кандзи, ханча и ханги в веб-браузерах

Для корректного отображения кандзи, ханча и ханги (CJK) в веб-браузерах с нативным рендерингом, как в операционной системе, необходимо использовать CSS-свойства, такие как font-variant-east-asian, text-width и text-spacing в сочетании с подходящими шрифтами и механизмами резервирования. Ключевым моментом является включение специфичных для CJK типографских функций при обеспечении совместимости браузеров на разных платформах и с разными движками рендеринга.

Содержание

• Основы типографики CJK
• CSS-свойства для рендеринга CJK
• Выбор шрифтов и стратегии резервирования
• Совместимость с браузерами и тестирование
• Продвинутые методы и лучшие практики

Основы типографики CJK

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

Вариации ширины символов в тексте CJK:

• Полноширинные символы: Традиционные символы CJK, знаки препинания и символы, занимающие полную ширину символа (обычно 1em)
• Полуширинные символы: Западные символы и символы, занимающие половину ширины символа (0.5em)
• Пропорциональные символы: Некоторые знаки препинания, ширина которых корректируется в зависимости от контекста

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

Например, в китайском тексте:

• Запятые (，) обычно должны быть полноширинными
• Восклицательные знаки (！) могут нуждаться в пропорциональной корректировке
• Западное знаки препинания в тексте CJK часто требуют специальной обработки

CSS-свойства для рендеринга CJK

Несколько CSS-свойств могут помочь достичь корректного рендеринга CJK:

font-variant-east-asian

Это свойство управляет восточноазиатскими типографскими вариантами:

.css-for-cjk {
  font-variant-east-asian: normal | traditional | simplified | full-width | proportional-width;
}

• full-width: Принудительно использует полноширинные варианты западных символов
• proportional-width: Разрешает использование пропорциональных вариантов ширины
• traditional: Использует традиционные китайские/японские/корейские формы

text-width

Это свойство управляет шириной символов:

.css-text-width {
  text-width: auto | full-width | proportional-width;
}

text-spacing

Управляет интервалом между символами:

.css-text-spacing {
  text-spacing: normal | ideograph-alpha | ideograph-numeric | no-preset;
}

font-feature-settings

Для более детального контроля над функциями OpenType:

.css-features {
  font-feature-settings: "pwid" 1, "palt" 0;
}

• “pwid”: Пропорциональная ширина идеографов
• “palt”: Альтернативные пропорции для латинского текста

Выбор шрифтов и стратегии резервирования

Стек системных шрифтов для CJK

.css-system-cjk {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 
               "Noto Sans CJK SC", sans-serif;
}

Варианты веб-шрифтов

Для согласованности кроссплатформенного рендеринга:

@font-face {
  font-family: 'Noto Sans CJK';
  src: local('Noto Sans CJK SC'), 
       local('Noto Sans JP'), 
       local('Noto Sans KR');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Особенности выбора начертания шрифта

Шрифты CJK часто требуют разных сопоставлений начертаний:

/* Шрифты CJK обычно используют разные шкалы начертаний */
.css-cjk-bold {
  font-weight: 500; /* Часто эквивалентно западному жирному начертанию */
}

Совместимость с браузерами и тестирование

Поддержка современных браузеров

Механизмы резервирования

/* Прогрессивное улучшение для CJK */
.css-cjk-fallback {
  font-family: system-ui, -apple-system, sans-serif;
  font-variant-east-asian: full-width;
  
  /* Резервирование для старых браузеров */
  @supports not (-webkit-text-spacing-adjust: 100%) {
    text-spacing: ideograph-alpha;
  }
}

Подход к тестированию

1. Визуальное тестирование: Сравнение рендеринга на разных операционных системах
2. Функциональное тестирование: Проверка поведения разрывов строк и интервалов
3. Тестирование производительности: Обеспечение того, что веб-шрифты не влияют на время загрузки

Продвинутые методы и лучшие практики

Обработка смешанного контента

Для контента, содержащего как CJK, так и западный текст:

.css-mixed-content {
  font-variant-east-asian: full-width;
  text-spacing: ideograph-alpha;
  font-feature-settings: "palt" 1;
}

Адаптивная типографика

.css-responsive-cjk {
  font-size: clamp(16px, 4vw, 24px);
  line-height: 1.6;
  
  /* Корректировка для разных размеров экрана */
  @media (max-width: 768px) {
    font-variant-east-asian: proportional-width;
  }
}

Оптимизация производительности

/* Используйте системные шрифты там, где это возможно для лучшей производительности */
.css-performance-cjk {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

Полный пример реализации

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример типографики CJK</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", 
                   "Hiragino Sans GB", "Microsoft YaHei", 
                   "Noto Sans CJK SC", sans-serif;
      font-variant-east-asian: full-width;
      text-spacing: ideograph-alpha;
      line-height: 1.6;
      font-size: 16px;
    }
    
    .cjk-text {
      font-feature-settings: "palt" 1, "pwid" 1;
    }
    
    /* Резервирование для старых браузеров */
    @supports not (-webkit-font-smoothing: antialiased) {
      font-family: "Microsoft YaHei", sans-serif;
    }
  </style>
</head>
<body>
  <div class="cjk-text">
    <p>你好，世界！这是一段包含中文、英文和标点符号的混合文本。</p>
    <p>Hello, World! This is a mixed text with CJK and Western content.</p>
  </div>
</body>
</html>

Источники

1. MDN Web Docs - font-variant-east-asian
2. CSSWG Text Module Level 3 - Text Spacing
3. Apple Developer Documentation - Typography Guidelines
4. Google Fonts - Noto Sans CJK Documentation
5. Mozilla Developer Network - CJK Typography

Заключение

Правильная типографика CJK в веб-браузерах требует комбинации CSS-свойств, подходящего выбора шрифтов и тщательного тестирования на разных платформах и в разных браузерах. Ключевые выводы включают использование font-variant-east-asian со значениями full-width или proportional-width, реализацию стеков системных шрифтов для нативного рендеринга ОС и предоставление механизмов резервирования для старых браузеров. Всегда тестируйте как на macOS/iOS, так и на Windows/Android для обеспечения согласованности типографики на разных платформах. Для наиболее аутентичного нативного опыта отдавайте предпочтение системным шрифтам вместо веб-шрифтов, где это возможно, и учитывайте специфические типографские соглашения для каждого целевого языка CJK.